纯手写旋转木马

既不想用插件，又想实现旋转木马超炫的效果；来看看我的用jquery、CSS实现的旋转木马；

 1  $(function () { 2             var t; 3             var i = 1; 4             var o = 100;  5             t = setInterval(a, 3000);//切记setInterval函数不要放在循环当中，它本身调用一次将重复循环调用；函数a 后省去（），否则它将失去作用； 6             $("ul").mouSEOver ( function () {//当鼠标移动到ul内容内，将停止显示下一个图片； 7                 clearInterval(t); 8             }); 9            10             $("ul").mouseout(function () {//当鼠标移动到ul内容内，继续显示下一个图片；11                  t = setInterval(a, 3000);12             });13   14             $('.headd').on("click", function () {//显示上一个图15                   o -= 2;16                   a();17             });18              function a() {//根据全局变量i的值，将除li[i]的图片放入最顶层，其余ul内的图片全部隐藏；19                    i = o % 3;20                 $("li:eq(" + i + ")").css({ "opacity": "1", "z-index": "3" }).show();//有小伙伴会疑问，为什么既设置隐藏还设置z-index，因为防止打开的那一瞬间，三个图片都显示出来21                 for (var j = 0; j < 3; j++)22                     if (i != j) {23                         $("li:eq(" + j + ")").css({ "opacity": "0", "z-index": "1" }).hide();24                     }25                    o++;26                  //console.log('ff');27             }28         });

 下面是它的HTML：要实现的图片在li内， 用盒子#a1实现上一篇的链接；为什么要在# a1 上再套一个盒子?这样 当鼠标移动到a1盒子上，它才能感知；

 1 <div class="head" > 2             <div class="headd"  > 3                 <div id="a1"></div> 4                 <div id="a2"></div> 5             </div> 6             <ul id="u"> 7                 <li style="opacity:1;z-index:3  "><img src="images/10.jpg" /></li> 8                 <li style="opacity: 0; z-index: 1"> <img src="images/11.jpg" /></li> 9                 <li style="opacity: 0; z-index: 1"><img src="images/12.jpg" /></li>10             </ul>11  </div>

在添加z-index 属性的盒子 一定要添加position:absolute;

 1  .headd { 2             width: 30px; 3             height: 30px; 4             position: absolute; 5         } 6        #a1, #a2 { 7             z-index: 6; 8             width: 130px; 9             height: 130px;10             padding-top: 200px;11             position: absolute;12             padding-left: 50px;13             background-image: url(allicon24.png);14             background-repeat: no-repeat;15             background-position: -200px -200px;16             cursor: pointer;17         }18         .head{19             width: 500px;20             height: 500px;21         }22         

第一次发博客，希望能帮助到那些寻求知识的种子们；

个人的浅谈经验，希望有用；