一直以来做项目碰到轮播图我都是去网站上找现成插件拿来用，现成的插件1是省时间，拿来改改尺寸改改参数就能直接用，2是现在的插件确实很强大，对于我一个刚刚学习前端的人来说，牛人写的轮播我看懂也要花些功夫，更别说在工作中写出来，估计写出来以后，整个项目都要因我延时了...
我做过的项目也不多，开始用的最多的就是bootstrap里面的轮播，具备最基础的功能，很适合我刚开始做项目用，最近我无意发现了一个更好用的轮播件（Swiper）这个插件在手机上有点意思，他可以实现手指触摸拖拽，还可以双指进行缩放，挺好用的，官网有中文的，上手挺容易的（你们还有什么好用的插件可以私信我^-^）.
好了说正事 ，接触前端的应该都知道 轮播可以说刚开始学就必须应该
会的，不会那就太没面子了，面试问过我 ，我胸有成竹的叙述其实我心
里想着他要真让我拿出电脑写一个我还真的会蒙
今天下午有时间 ，我凭着用过这么多次的映像自己动手写了一个，真的是
最最最最基础的轮播。
我开始想写那种无缝的轮播，我是这么写的
<div id="slider"> <ul class="main"> <li><img src="img/banner1.jpg"></li> <li><img src="img/banner2.jpg"</li> <li><img src="img/banner3.jpg"></li> </ul> <ul class="index"> <li>1</li> <li>2</li> <li>3</li> </ul></div>
外层slider{width:500px;height:400px;position:relative;overflow：hidden；}，
.main{ float:left;width:1500px;position:absolute;left:0;top:0;transition:all linear .5s} //一张图片宽500px;
.mian>li{ float：left；}
像这样：
然后改变.main的left就可以了；我开始是这么想的，也这么做了，轮也能轮了，但是轮播图上index怎么弄，点击它还要跳到对应的图片上，想了好久
我放弃了，(日后我会解决得)
还有一种轮播，可能你已经想到了 那种改变图片透明度的轮播，我当时想这个好写啊，同样能实现作用，于是....上码！
主要css
.main>li{ position: absolute; top:0; left: 0; opacity: 0; transition: all linear .5s;}//三张叠放在一起
.main .active{ opacity: 1;}
.index .active{ width:12px; height:12px; border-radius: 12px; background-color: red; }
<script> var i = 1; $(‘.main>li:nth-child(‘+i+‘)‘).addClass(‘active‘).siblings(‘.active‘).removeClass(‘active‘);//img $(‘.index>li:nth-child(‘+i+‘)‘).addClass(‘active‘).siblings(‘.active‘).removeClass(‘active‘);//index var timer = setInterval(function () { animate(); },1000);// 放在对应序号上,切换对应图片 $(‘.index>li‘).on(‘mouseenter‘,function(){ var index = $(this).html(); $(‘.main>li:nth-child(‘+index+‘)‘) .addClass(‘active‘).siblings(‘.active‘) .removeClass(‘active‘);//img
$(‘.index>li:nth-child(‘+index+‘)‘) .addClass(‘active‘).siblings(‘.active‘) .removeClass(‘active‘);//index });// 鼠标进入停止出来启动 $(‘#slider‘).hover( function(){clearInterval(timer);}, function(){ timer = setInterval( function(){ animate() },1000);} );// 主体函数 function animate(){ ++i; $(‘.main>li:nth-child(‘+i+‘)‘) .addClass(‘active‘).siblings(‘.active‘) .removeClass(‘active‘);//img $(‘.index>li:nth-child(‘+i+‘)‘) .addClass(‘active‘).siblings(‘.active‘) .removeClass(‘active‘);//index if(i==3){i=0} };</script>
就这段复用性贼差，处理效率贼低的代码我写了半天，
虽然效率低，但还好的是，我下次说我会的时候会比之
前更有底气
??
微信公众号：web小小白