旋转手柄切换图片jQuery+CSS图片轮播特效_滚动轮播_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

旋转手柄切换图片jQuery+CSS图片轮播特效

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-10-09 16:24:09 去下载去预览

特效介绍

旋转手柄切换图片jQuery+CSS图片轮播特效，鼠标拖动外环的红色手柄，可以左右切换圆环内的图片。兼容IE6。

使用方法

1、在head区引入下面的代码

<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if lte IE 6]>
    <style type="text/css">
    /* Internet Explorer 6 PNG transparency fix */
    #rotatescroll1 .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); }
    #rotatescroll1 .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); }
    </style>
<![endif]-->
<!-- The JavaScript -->
<script type="text/javascript" src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycircleslider.js"></script>
<script type="text/javascript" src="js/website.js"></script>

2、在body区域引入下面的代码：

<div id="rotatescroll1">
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/SF1.jpg" alt="Chun-Li" /></li>
            <li><img src="images/SF2.jpg" alt="VEGA" /></li>
            <li><img src="images/SF3.jpg" alt="DHAISIM" /></li>
            <li><img src="images/SF4.jpg" alt="KEN" /></li>
            <li><img src="images/SF5.jpg" alt="BALROG" /></li>
            <li><img src="images/SF6.jpg" alt="CAMMY" /></li>
            <li><img src="images/SF7.jpg" alt="GOUKI" /></li>
            <li><img src="images/SF8.jpg" alt="BLANKA" /></li>
            <li><img src="images/SF9.jpg" alt="HONDA" /></li>
            <li><img src="images/SF10.jpg" alt="FEI LONG" /></li>
            <li><img src="images/SF11.jpg" alt="GUILE" /></li>
            <li><img src="images/SF12.jpg" alt="RYU" /></li>
            <li><img src="images/SF13.jpg" alt="SAGAT" /></li>
            <li><img src="images/SF14.jpg" alt="THWAK" /></li>
            <li><img src="images/SF15.jpg" alt="ZANGIEF" /></li>
        </ul>
    </div>
    <div class="overlay"></div>
    <div class="thumb"></div>
</div>