你的位置:首页 > Java教程

[Java教程]Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行


这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加)

 1 <style type="text/css"> 2      3     /*展示图片切换的div样式*/ 4      #ShowImg { 5        width: 599px; 6        height: 324px; 7        background-image: url("imgs/1.jpg");/*注意自己的图片路径和图片名称*/ 8        margin: 0 auto; 9     }10     /*显示点击切换按钮的div*/11      #Nav {12       height: 26px;13       padding-top: 280px;14       padding-left: 480px;15       16     }17     /*这里是切换按钮,这里用li实现*/18      #Nav ul li {19       display: block;20       font-size: 9px;21       padding-top: 3px;22       float: left;23       margin: 2px;24       width: 19px;25       cursor: pointer;26       color: #7f0019;27       font-family: "arial";28       height: 19px;29       background-color: #fff;30       border: 1px solid #cecece;31       text-align: center;32     }33   </style>

然后是js代码:

 1   <!--引入jquer脚本--> 2   <script src="script/jquery-1.8.0.min.js"></script> 3    4   <!--js代码具体实现:--> 5   <script type="text/javascript"> 6     $(function () { 7       8       //开启一个定时器,设置一个适当的时间段,让图片实现不断切换效果,这里设置的是1000ms即是1m 9       setInterval(function () {10         //先从隐藏域的flag中获取它的值11         var j = $("#flag").val();12         //如果这个值等于-1,这里约定鼠标正在该按钮上,什么都不做,直接返回。13         if (j==-1) {14           return;15         }16         //否则根据j的值,设置相应的事件17         var lits = $("#Nav li");18         if (j-1>=0) {19           setStyleMouseLeave(lits[j-1]);20         } else {21           setStyleMouseLeave(lits[2]);22         }23 24         setStyleMouseOver(lits[j]);25 26         j++;27         if (j>2) {28           j = 0;29         }30         $("#flag").val(j);31 32       }, 1000);33 34       //获取div nav下所有的li元素,并为他们绑定鼠标进入,和鼠标离开事件35       $("#Nav li").mouseover(function (i) {36 37         //该函数修改自己的样式,以及图片38         setStyleMouseOver(this);39         //设置兄弟元素的样式,即是其余的两个li40         $(this).siblings().css({41           color: 'rgb(127, 0, 25)',42           fontWeight: 'normal',43           background: 'rgb(255, 255, 255)',44         });45        //设置flag的值为-1,以达到暂停定时器的效果46         $("#flag").val("-1");47 48 49       })50             .mouseleave(function () {51 52              //当鼠标离开时,要设置自己样式53             setStyleMouseLeave(this);54               //获取当前的li中n的属性,并根据n的值,来判断当再次执行定时器时,哪一个li被选中55               var n = $(this).attr("n");56 57               if (n/1 + 1 <= 2) {58                 n = n*1 + 1;59               } else {60                 n = 0;61               }62              //鼠标离开后更新flag的值,使flag的值,正好等于下次将要遍历到的li的属性n的值,以达到重启定时器的效果,但定时器从未停止,也没有重启功能63               $("#flag").val(n);64             });;65 66     });67 68     //封装出的两个公共的函数69 70     function setStyleMouseOver(li) {71 72       $(li).css({73         color: 'rgb(255, 255, 255)',74         fontWeight: 'bolder',75         background: 'rgb(218, 10, 10)',76       });77       var url = $(li).attr("url");78       $("#ShowImg").css("background-image", "url(" + url + ")");79     }80 81     function setStyleMouseLeave(li) {82 83       $(li).css({84         color: 'rgb(127, 0, 25)',85         fontWeight: 'normal',86         background: 'rgb(255, 255, 255)',87       });88    89     }90 91   </script>

View Code

最后是dom元素

 1 body> 2   <div id="ShowImg"> 3     <div id="Nav"> 4       <ul> 5         <!--这里的url属性和n属性是我自己添加的,为了编程方便,标签本身是没有这些属性的,注意这里的url根据自己放置图片的实际位置设置值--> 6         <li url="imgs/1.jpg" n="0" style="color: rgb(255, 255, 255); font-weight: bolder; background: rgb(218, 10, 10);">1</li> 7         <li url="imgs/2.gif" n="1" >2</li> 8         <li url="imgs/3.jpg" n="2" >3</li> 9        10       </ul>11     </div>12   </div>13   <!--标识-->14   <input type="hidden" name="name" id="flag" value="1" />15 </body>