微信扫一扫打赏支持

bootstrap课程15 左右滑动式幻灯片如何实现

bootstrap课程15  左右滑动式幻灯片如何实现

一、总结

一句话总结：布局：放图片的div很宽，放3幅图，但是只显示一幅图，其它隐藏；算法：实现图片切换也就是改变第二个div的 left属性即可。

 

1、左右滑动式幻灯片的算法是什么？

<div><div><img>*3</div></div>
最外面的div是相对定位，
第二个div是绝对定位，里面横放着这三幅图
实现图片切换也就是改变第二个div的 left属性即可

 63             <div class="window">  
 64                 <div class="image_reel">  
 65                     <a href="#"><img src="1.jpg" alt="" /></a>  
 66                     <a href="#"><img src="2.jpg" alt="" /></a>  
 67                     <a href="#"><img src="3.jpg" alt="" /></a>  
 68                 </div>  
 69             </div>

 

2、如何消去图和图之间默认的缝隙？

可以让图片左浮动就可以消去缝隙了

 

 

 

二、左右滑动式幻灯片如何实现

1、相关知识

 

2、代码

 

自定义幻灯片实例(常用)

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>index</title>
  6     <style>
  7         *{
  8             font-family: 微软雅黑;
  9         }
 10 
 11         .container{
 12             width:1140px;
 13             padding:0px 15px;
 14             margin:0 auto;
 15         }
 16         
 17         .carousel{
 18             height:300px;
 19             overflow: hidden;
 20             position: relative;
 21         }
 22 
 23         .image_reel{
 24             position: absolute;
 25             left:0px;
 26             top:0px;
 27         }
 28 
 29         .image_reel img{
 30             float: left;
 31         }
 32         
 33         .paging{
 34             position: absolute;
 35             bottom:20px;
 36             right:20px;
 37             display: none;
 38         }
 39 
 40         .paging a{
 41             text-decoration: none;
 42             color:#fff;
 43             padding:0px 5px;
 44         }
 45 
 46         .paging a:hover{
 47             background: #920000;
 48             font-weight:bold;
 49         }
 50 
 51         .paging a.active{
 52             background: #920000;
 53             font-weight:bold;
 54         }
 55     </style>
 56     <script src="jquery.min.js"></script>
 57 </head>
 58 <body>
 59     <div class="container">
 60         <h1 class="page-header">Bootstrap幻灯片</h1>
 61 
 62         <div class="carousel">  
 63             <div class="window">  
 64                 <div class="image_reel">  
 65                     <a href="#"><img src="1.jpg" alt="" /></a>  
 66                     <a href="#"><img src="2.jpg" alt="" /></a>  
 67                     <a href="#"><img src="3.jpg" alt="" /></a>  
 68                 </div>  
 69             </div>  
 70             <div class="paging">  
 71                 <a href="#" rel="1">1</a>  
 72                 <a href="#" rel="2">2</a>  
 73                 <a href="#" rel="3">3</a>  
 74             </div>  
 75         </div>    
 76     </div>
 77 </body>
 78 <script>
 79 // // 第一步
 80 $(".paging").show();  
 81 $(".paging a:first").addClass("active");  
 82    
 83 // //Get size of the image, how many images there are, then determin the size of the image reel.  
 84 var imageWidth = $(".window").width();  
 85 var imageSum = $(".image_reel img").size();  
 86 var imageReelWidth = imageWidth * imageSum;  
 87    
 88 // //Adjust the image reel to its new size  
 89 $(".image_reel").css({'width' : imageReelWidth});   
 90 
 91 // // 第二步
 92 // //Paging  and Slider Function  
 93 rotate = function(){  
 94     var triggerID = $active.attr("rel") - 1; //Get number of times to slide  
 95     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide  
 96    
 97     $(".paging a").removeClass('active'); //Remove all active class  
 98     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)  
 99    
100     //Slider Animation  
101     $(".image_reel").animate({  
102         left: -image_reelPosition  
103     }, 500 );  
104    
105 };   
106    
107 // //Rotation  and Timing Event  
108 rotateSwitch = function(){  
109     play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds  
110         $active = $('.paging a.active').next(); //Move to the next paging  
111         if ( $active.length === 0) { //If paging reaches the end...  
112             $active = $('.paging a:first'); //go back to first  
113         }  
114         rotate(); //Trigger the paging and slider function  
115     }, 2000); //Timer speed in milliseconds (7 seconds)  
116 };  
117    
118 rotateSwitch(); //Run function on launch   
119 
120 // 第三步
121 //On Hover  
122 $(".image_reel a").hover(function() {  
123     clearInterval(play); //Stop the rotation  
124 }, function() {  
125     rotateSwitch(); //Resume rotation timer  
126 });   
127    
128 //On Click  
129 $(".paging a").click(function() {  
130     $active = $(this); //Activate the clicked paging  
131     //Reset Timer  
132     clearInterval(play); //Stop the rotation  
133     rotate(); //Trigger rotation immediately  
134     rotateSwitch(); // Resume rotation timer  
135     return false; //Prevent browser jump to link anchor  
136 });
137 
138 </script>
139 </html>

 

 

 

 

 

 
posted @ 2018-07-24 16:15  范仁义  阅读(452)  评论(0)    收藏  举报