纯手写旋转木马_.NET_编程开发_程序员俱乐部

既不想用插件，又想实现旋转木马超炫的效果；来看看我的用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         

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

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