纯手写旋转木马

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

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

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

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

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

 .headd {
            width: 30px;
            height: 30px;
            position: absolute;
        }
       #a1, #a2 {
            z-index: 6;
            width: 130px;
            height: 130px;
            padding-top: 200px;
            position: absolute;
            padding-left: 50px;
            background-image: url(allicon24.png);
            background-repeat: no-repeat;
            background-position: -200px -200px;
            cursor: pointer;
        }
        .head{
            width: 500px;
            height: 500px;
        }
        

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

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