星空网 > 软件开发 > ASP.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/loading.gif' data-original="images/10.jpg" /></li> 8         <li style="opacity: 0; z-index: 1"> <img src='/images/loading.gif' data-original="images/11.jpg" /></li> 9         <li style="opacity: 0; z-index: 1"><img src='/images/loading.gif' data-original="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     

纯手写旋转木马
纯手写旋转木马
纯手写旋转木马

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

个人的浅谈经验,希望有用;纯手写旋转木马

纯手写旋转木马



原标题:纯手写旋转木马

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流