一、总结
一句话总结：布局：放图片的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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
