您的位置：首页 > Web前端 > JQuery

基于jQuery的图片左右轮播，基本原理通用

2017-05-16 10:09 363 查看
转载地址：http://www.cnblogs.com/qj0813/p/5072314.html

我的思路很简单就是通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <meta charset="utf-8">
5         <title></title>
6     </head>
7     <script src="js/jquery.min.js"></script>
8     <style>
9         .banner{
10             margin:0 auto;
11             border: 4px dashed black;
12             width:400px;
13             height:200px;
14             position: relative;
15             overflow:hidden;
16         }
17         .banner a{
18             z-index: 100;
19             display: block;
20             width:100%;
21             height: 100%;
22             position: absolute;
23             left:100%;
24             top:0;
25         }
26         .banner .first{
27             left:0;
28         }
29         .banner a img{
30             width:100%;
31             height: 100%;
32         }
33         .choose{
34             z-index: 1000;
35             position: absolute;
36             left:150px;
37             top:180px;
38             width:100px;
39             height: 10px;
40         }
41         .choose span{
42             margin-right: 15px;
43             float: left;
44             display:block;
45             background: blue;
46             width:10px;
47             height: 10px;
48             border-radius: 10px;
49         }
50         .choose span:hover{
51             background: red;
52         }
53         .choose .red{
54             background: red;
55         }
56         .banner .pre,.next{
57             cursor:pointer;
58             text-align:center;
59             border-radius:20px;
60             display:block;
61             background:#cccccc;
62             opacity:0.4;
63             text-decoration: none;
64             z-index: 200;
65             display:block;
66             width:40px;
67             height: 40px;
68             font-size: 40px;
69             color:red;
70             position: absolute;
71             top:80px;
72         }
73         .banner .pre{
74             left:0px
75         }
76         .banner .next{
77             right: 0px;
78         }
79     </style>
80     <body>
81
82         <div class="banner">
83             <!--
84                 这里为上一页下一页点击按钮
85             -->
86             <span class="pre">-</span>
87             <span class="next">+</span>
88             <!--
89                 此处为轮播主体，颜色块代替。图片自加
90             -->
91             <a href="###" class="first" style="background: pink;"></a>
92             <a href="###" style="background: blue;"><img src="images/banner1.jpg"/></a>
93             <a href="###" style="background: greenyellow;"><img src="images/banner2.jpg"/></a>
94             <a href="###" style="background: deepskyblue;"><img src="images/banner3.jpg"/></a>
95             <!--
96                 此处为轮播部分下方小点选择
97             -->
98             <div class="choose">
99                 <span class="red"></span>
100                 <span></span>
101                 <span></span>
102                 <span></span>
103             </div>
104         </div>
105
106         <script>
107             /*定义两个变量，保存当前页码和上一页页码*/
108             var $index=0;
109             var $exdex=0;
110             /*小点的鼠标移入事件，触发图片左移还是右移*/
111             $(".choose span").mouseover(function(){
112                 //获取当前移入的index值
113                 $index=$(this).index();
114                 //首先让点的颜色变化，表示选中
115                 $(".choose span").eq($index).addClass("red").siblings().
116                         removeClass("red");
117                 //判断如果index变小，证明图片要往左移动。变大则为右移
118                 if($index>$exdex){
119                     next();
120                 }else if($index<$exdex){
121                     pre();
122                 }
123                 //移动完毕将当前index值替换了前页index
124                 return $exdex=$index;
125             });
126             //下一页的点击事件。在右移基础上加了最大index判断
127             $(".next").click(function(){
128                 $index++;
129                 if($index>3){
130                     $index=0
131                 }
132                 $(".choose span").eq($index).addClass("red").siblings().
133                         removeClass("red");
134                 next();
135                 return $exdex=$index;
136             });
137             //上一页的点击事件
138             $(".pre").click(function(){
139                 $index--;
140                 if($index<0){
141                     $index=3
142                 };
143                 $(".choose span").eq($index).addClass("red").siblings().
144                     removeClass("red");
145                 pre();
146                 return $exdex=$index;
147             });
148             //加个定时器，正常轮播
149             var atime=setInterval(function(){
150                 $(".next").click();
151             },1000);
152             //这里为右移和左移的事件函数。
153             //右移基本原理就是先让exdex定位的left左移百分百，而选中的当前页从屏幕右边移入,left变为0
154             function next(){
155                 $(".banner a").eq($index).stop(true,true).
156                         css("left","100%").animate({"left":"0"});
157                 $(".banner a").eq($exdex).stop(true,true).
158                         css("left","0").animate({"left":"-100%"});
159             }
160             function pre(){
161                 $(".banner a").eq($index).stop(true,true).
162                     css("left","-100%").animate({"left":"0"});
163                 $(".banner a").eq($exdex).stop(true,true).
164                     css("left","0").animate({"left":"100%"});
165             }
166         </script>
167     </body>
168 </html>


希望大家指出问题，交流思路，让我们彼此思路能够更宽广。

致谢
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery banner html
相关文章推荐
新的分享
章节导航