純手寫旋轉木馬

2019-11-17 02:02:49

字體：大中小

來源：轉載

供稿：網友

純手寫旋轉木馬

既不想用插件，又想實現旋轉木馬超炫的效果；來看看我的用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