这里先对标签的样式进行设置（我这里只用了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>
最后是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>
时间： 2024-11-03 02:17:14