轮播图-version1

实现目标

  • 按'>'出现下一caption，按'<'出现上一caption
  • 按下面的点到指定的caption
  • 自动轮播

思路：

  • 设置一个carousel容器，里面有carousel的每一张图，这里称为caption，例子中有caption 1，caption 2，caption 3，设这些caption的position为absolute，设置好top，left。这三张图叠加在一起了，默认显示caption 3，然而我们需要一开始显示caption 1，所以设所有的caption display为none，并增添一个新class show，show 的内容就是display：block，然后给caption 1添上class show。
  • 按前进/后退按钮时，index（当前caption索引，起始为0）+1/-1，判断index是否超出范围，如果超出，按钮不做反应，index恢复正常值；如果没有超出，则将索引为index的图可见，其他不可见
  • 给每一个dot加上点击事件，点击时，将点的索引给index，然后判断index是否超出范围，如果超出，按钮不做反应，index恢复正常值；如果没有超出，则将索引为index的图可见，其他不可见
  • 使setInterval()函数实现轮播

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>JS Bin</title>
 7   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 8 </head>
 9 <body>
10 <div class="carousel-container">
11     <div id="carousel" class="carousel">
12       <div class="carousel-piece show">
13         <div class="text">caption 1</div>
14       </div>
15       <div class="carousel-piece">
16         <div class="text">caption 2</div>
17       </div>
18       <div class="carousel-piece">
19         <div class="text">caption 3</div>
20       </div>
21       <div class="arrow-container">
22         <a href="#" class="pre">&#10094;</a>
23         <a href="#" class="next">&#10095;</a>
24       </div>
25     </div>
26     <div class="dot-container">
27       <span class="dot active"></span>
28       <span class="dot"></span>
29       <span class="dot"></span>
30     </div>
31 </div>
32 </body>
33 </html>
HTML
 1 .carousel-container{
 2   text-align:center;
 3 }
 4 .carousel {
 5   width: 400px;
 6   height: 200px;
 7   background: orange;
 8   position: relative;
 9   overflow:hidden;
10   margin:0 auto;
11 }
12 .carousel .carousel-piece {
13   background: #ccc;
14   width: 80%;
15   height:100%;
16   margin:0 auto;
17   text-align:center;
18   line-height:200px;
19   position:absolute;
20   left:10%;
21   display:none;
22 }
23 .carousel .carousel-piece:nth-child(2){
24   background:pink;
25 }
26 .carousel .carousel-piece:nth-child(3){
27   background:lightblue;
28 }
29 .carousel .carousel-piece.show{
30   display:block;
31 }
32 .carousel .carousel-piece .text{
33   color:#fff;
34   font-size:24px;
35 }
36 .carousel .arrow-container {
37   position: absolute;
38   width:400px;
39   height:21px;
40   top:42%;
41 }
42 .carousel .arrow-container a{
43   text-decoration:none;
44   width:30px;
45   height:30px;
46   line-height:30px;
47   text-align:center;
48   background:#fff;
49   border-radius:50%;
50 }
51 .carousel .arrow-container .pre {
52   position:absolute;
53   left: 5px;
54 }
55 .carousel .arrow-container .next {
56   position:absolute;
57   right: 5px;
58 }
59 .dot-container{
60   margin:10px 0;
61 }
62 .dot-container span{
63   display:inline-block;
64   width:10px;
65   height:10px;
66   background:#fff;
67   border-radius:50%;
68   border:3px solid orange;
69   cursor:pointer;
70 }
71 .dot-container span.active{
72   background:#ccc;
73 }
CSS
 1 var index=0;
 2 var pieces=document.getElementsByClassName('carousel-piece');
 3 var dots=document.getElementsByClassName('dot');
 4 var preBtn=document.getElementsByClassName('pre')[0];
 5 var nextBtn=document.getElementsByClassName('next')[0];
 6 window.onload=function(){
 7   setInterval(animateSlide,3000);
 8 }
 9 preBtn.onclick=function(){
10   getSlide(0,-1);
11 }
12 nextBtn.onclick=function(){
13   getSlide(0,1); 
14 }
15 for(var i=0;i<dots.length;i++){
16   dots[i].onclick=(function(i){
17     return function(){
18       getSlide(1,i);
19     }
20   })(i);
21 }
22 function getSlide(flag,step){
23   if(flag===0){
24     index=index+step;
25   }
26   else{
27     index=step;
28   }
29   if(index>2){
30     index=2;return;
31   }
32   if(index<0){
33     index=0;return;
34   }
35   change();
36 }
37 function animateSlide(){
38   index++;
39   if(index>2){
40     index=0;
41   }
42   change();
43 }
44 function change(){
45   for(var i=0;i<pieces.length;i++){
46     if(i===index){
47       pieces[i].classList.add('show');
48       dots[i].classList.add('active');
49     }
50     else{
51       pieces[i].classList.remove('show');
52       dots[i].classList.remove('active');
53     }
54   }
55 }
Javascript
 1 var index=0;
 2 $(function(){
 3   $('.pre').click(function(){
 4     index=index-1;
 5     change(1);
 6   });
 7   $('.next').click(function(){
 8     index=index+1;
 9     change(1);
10   });
11   $('.dot').click(function(){
12     index=$(this).index();
13     change(1);
14   });
15   setInterval(animateSlide,5000);
16 });
17 function change(flag){
18   if(index>2&&flag) {index=2;return;}
19   if(index<0&&flag) {index=0;return;}
20   $('.carousel-piece')
21     .not(':eq(index)').removeClass('show')
22     .eq(index).addClass('show');
23   $('.dot')
24     .not(':eq(index)').removeClass('active')
25     .eq(index).addClass('active')
26 }
27 function animateSlide(){
28   index=index+1;
29   if(index>2) {index=0;}
30   change(0);
31 }
JQuery
 1 var index=0;
 2 var pieces=document.getElementsByClassName('carousel-piece');
 3 var dots=document.getElementsByClassName('dot');
 4 var preBtn=document.getElementsByClassName('pre')[0];
 5 var nextBtn=document.getElementsByClassName('next')[0];
 6 window.onload=function(){
 7   setInterval(animateSlide,5000);
 8 }
 9 preBtn.onclick=function(){
10   index=index-1;
11   getSlide();
12 }
13 nextBtn.onclick=function(){
14   index=index+1;
15   getSlide();
16 }
17 for(var i=0;i<dots.length;i++){
18   dots[i].onclick=(function(i){
19     return function(){
20       index=i;
21       getSlide();
22     }
23   })(i);
24 }
25 function getSlide(){
26   if(index>2) {index=2;return;}
27   if(index<0) {index=0;return;}
28   change();
29 }
30 function animateSlide(){
31   index++;
32   if(index>2){index=0;}
33   change();
34 }
35 function change(){
36   for(var i=0;i<pieces.length;i++){
37     if(i===index){
38       pieces[i].classList.add('show');
39       dots[i].classList.add('active');
40     }
41     else{
42       pieces[i].classList.remove('show');
43       dots[i].classList.remove('active');
44     }
45   }
46 }
Javascript Version2

 

posted @ 2017-10-26 16:14  CodingSwallow  阅读(189)  评论(0)  编辑  收藏  举报