在jQuery插件库上看到一个轮播图觉得很漂亮，就自己尝试做了一个，实现左侧小图定时滚动，小图和底部的原点可以点击切换大图，离开后小图继续滚动，白色背景始终保持在当前图上。

思路：HTML结构分了大图片部分、小图导航和底部圆点三个部分；通过克隆图片列表加长了列表长度，当滚动到克隆的图片部分时，将整个列表拉回原位，看起来就像连续滚动的效果了。

• html

<div class="images">    //大图部分<ul class="iunit"><li><img src="data:images/a1.png" alt=""></li><li><img src="data:images/a2.png" alt=""></li><li><img src="data:images/a3.png" alt=""></li><li><img src="data:images/a4.png" alt=""></li><li><img src="data:images/a5.png" alt=""></li><li><img src="data:images/a6.png" alt=""></li></ul>
</div>
<div class="nav">     //小图导航部分 li有6个<ul class="nunit"><li class="cur"><a href="javascript:;"><img src="data:images/a1x.png" alt=""><span class="title">Title</span><br><span class="descrip">Description</span></a></li></ul>
</div>
<div class="sub_nav">   //底部圆点导航部分<ul class="sunit"><li class="cur"></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>复制代码

css就不放上来了，全部源文件在最后的链接，下面是js部分代码:

1.获取元素和克隆列表

var $carousel = $("#carousel");
var $iunit = $carousel.find(".iunit");  //大图片部分的ul
var $nunit = $carousel.find(".nunit");  //小图片部分的ul
var $sunit = $carousel.find(".sunit");  //圆点部分的ul
var idx=0, _idx = 0;   //设置三个信号量分别控制三个部分,降低三个部分之间的耦合性
var s_idx = 0;//克隆两个图片列表
$iunit.find("li").clone().appendTo($iunit);
$nunit.find("li").clone().appendTo($nunit);//获取每一个里表中的li，这里要在克隆之后获取，否则就只能获取到克隆之前的个数
var $iunit_lis = $iunit.find("li");
var $nunit_lis = $nunit.find("li");
var $sunit_lis = $sunit.find("li");
复制代码

2.添加鼠标移入和移除事件监听

//添加鼠标移入监听，给后面加cur添加important否则权重不够行内
$nunit_lis.mouseenter(function(){$(this).css("background-color", "rgba(255,255,255,0.3)");
});
$nunit_lis.mouseleave(function(){$(this).css("background-color", "rgba(0,0,0,0.08)");
});
复制代码

3.左侧导航部分添加点击事件监听

$nunit_lis.click(function(){//当前点击的下标1-12idx = $(this).index();$(this).siblings("li").removeClass("cur");$(this).addClass("cur");//判断下标，当大于7时，下标值减去6，返回1-6if(idx > 6){idx -= 6;}$nunit_lis.eq(idx+6).addClass("cur");//添加运动事件，内部判断索引值为6时，still移动，但是移动之后拉回到0$iunit.animate({"left": -980 * idx}, 300, function(){if(idx>5){$(this).css("left", 0);}});//小圆点跟随信号量idx值一同改变$sunit_lis.eq(idx).addClass("cur").siblings("li").removeClass("cur");
});
复制代码

4.底部圆点添加点击事件监听

$sunit_lis.click(function(){s_idx = $(this).index();$sunit_lis.eq(s_idx).addClass("cur").siblings("li").removeClass("cur");$iunit.animate({"left": -980 * s_idx}, 300);
});
复制代码

5.封装运动函数，开启定时器让导航滚动起来

function go(){_idx++;$nunit.animate({"top": -70 * _idx}, 300, function(){if(_idx>5){_idx=0;$nunit.css("top", 0);}})
}var timer = setInterval(go, 1000);$carousel.mouseenter(function(){clearInterval(timer);
});
$carousel.mouseleave(function(){timer = setInterval(go, 1000);
});
复制代码

小结：没有完全实现作者的所有功能，原轮播可以在滚动时自动切换当前小图，并且始终保持在中间位置，看了一下他的源代码是使用了一个插件，还有一些css3的知识，最近刚开始学习css3，回头再重新用css3重做应该会做的更好。

源代码戳这里

刚刚学会使用GitHub，可以上传一些之前做的demo了！加油加油，还有那么多要学的东东！css3好有意思啊，又学到好多新方法，已经想做点什么来试试手了！