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                 //设置兄弟元素的样式，即是其余的两个li

40                 $(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>