商城轮播图
程序员文章站
2022-05-02 12:53:50
实现目的：进入网页自动轮播，悬浮停止，左右按钮可翻看图片，底下序号可翻看图片。 代码如下： ......
实现目的：进入网页自动轮播，悬浮停止，左右按钮可翻看图片，底下序号可翻看图片。
代码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>轮播图</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 ul li{
12 list-style: none;
13 }
14 .outer{
15 width: 590px;
16 height: 470px;
17 border:dashed cadetblue 5px;
18 margin: 0 auto;
19 position: relative;
20 }
21 .outer .num{
22 position: absolute;
23 left: 0;
24 /*top: 0;*/
25 bottom: 10px;
26 font-size: 0;
27 text-align: center;
28 width: 100%;
29
30 }
31 .outer .num li{
32 height: 20px;
33 width: 20px;
34 background-color:darkgray ;
35 border-radius: 60%;
36 text-align: center;
37 line-height: 20px;
38 display: inline-block;
39 font-size: 16px;
40 margin: 5px;
41 cursor: pointer;
42 }
43 .outer .img li{
44 position: absolute;
45 left: 0;
46 top: 0;
47
48 }
49 .button{
50 height: 60px;
51 width: 40px;
52 background-color: gray;
53 position: absolute;
54 /*left: 0px;*/
55 top: 50%;
56 margin-top: -30px;
57 opacity: 0.6;
58 font-size: 40px;
59 font-weight: bolder;
60 text-align: center;
61 display: none;
62 }
63 .btn_right{
64 right: 0;
65 }
66 .outer:hover .button{
67 display: block;
68 }
69 .outer .num li.current{
70 background-color: red;
71 }
72 </style>
73 </head>
74 <body>
75 <div class="outer">
76 <ul class="img">
77 <li><img src="image/1.jpg"></li>
78 <li><img src="image/2.jpg"></li>
79 <li><img src="image/3.jpg"></li>
80 <li><img src="image/4.jpg"></li>
81 <li><img src="image/5.jpg"></li>
82 </ul>
83 <ul class="num">
84 <li>1</li>
85 <li>2</li>
86 <li>3</li>
87 <li>4</li>
88 <li>5</li>
89 </ul>
90 <div class="btn_left button"> < </div>
91 <div class="btn_right button"> > </div>
92 </div>
93 <script src="jquery-1.8.2.js"></script>
94 <script>
95 $(function () {
96 $('.num li').first().addclass('current');
97 $('.num li').mouseover(function () {
98 $(this).addclass('current').siblings().removeclass('current');
99 var index = $(this).index();
100 i = index;
101 $('.img li').eq(index).fadein(1000).siblings().fadeout(1000);
102 });
103
104 var i = 0;
105 function move() {
106 i++;
107 if(i==5){
108 i=0;
109 };
110 $('.num li').eq(i).addclass('current').siblings().removeclass('current');
111 $('.img li').eq(i).fadein(1000).siblings().fadeout(1000);
112 };
113 var time = setinterval(move,1500);
114
115 $('.outer').hover(function () {
116 clearinterval(time);
117 },function () {
118 time = setinterval(move,1500);
119 });
120
121 $('.btn_right').click(function () {
122 move();
123 });
124 $('.btn_left').click(function () {
125 if(i==0){
126 i=5
127 };
128 i = i - 2;
129 move();
130 });
131 })
132 </script>
133 </body>
134 </html>