轮播是html页面中比较常见的一种展现形式，也是基础，把轮播图做好，是排版中比较关键的
1.首先是轮播的html元素放置；做轮播之前，要有一个初步的认识
2.每个元素的位置怎样摆放，也是很关键的，这里所说的布局
3.js轮播的动态展现过程
做好以上三步，轮播基本上就出来的
首先 .html代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6
7 <link rel="stylesheet" href="./css/wufenstyle.css">
8 <script src="./js/jquery.js"></script>
9 <script src="./js/wufeng.js"></script>
10 </head>
11 <body>
12 <div class="showbox">
13 <div class="imgbox">
14 <img src="./img/porsche-normal5.jpg">
15 <img src="./img/porsche-normal1.jpg">
16 <img src="./img/porsche-normal2.jpg">
17 <img src="./img/porsche-normal3.jpg">
18 <img src="./img/porsche-normal4.jpg">
19 <img src="./img/porsche-normal5.jpg">
20 <img src="./img/porsche-normal1.jpg">
21 </div>
22 <div class="pre" >
23 <span></span>
24 </div>
25 <div class="aft" >
26 <span></span>
27 </div>
28 <ul class="odot">
29 <ul class="lis">
30 <li class="active"></li>
31 <li class="changtai"></li>
32 <li class="changtai"></li>
33 <li class="changtai"></li>
34 <li class="changtai"></li>
35 </ul>
36 </ul>
37 </div>
38 </body>
39 </html>然后是 .css 页面布局
1 *{
2 margin:0;
3 padding:0;
4 }
5 img{
6 margin:0;
7 padding:0;
8 }
9 li{
10 list-style-type: none;
11 }
12 .active{
13 background:url('../img/active.png') no-repeat 0 0;
14 }
15 .changtai{
16 background:url('../img/none.png') no-repeat 0 0;
17 }
18 div.showbox{
19 position:relative;
20 width:100%;
21 height:800px;
22 overflow: hidden;
23 }
24 div.imgbox{
25 position:absolute;
26 width:200000px;
27 height:100%;
28 left:0;
29 }
30 div.imgbox img{
31 height:100%;
32 position: relative;
33 float:left;
34 }
35 div.showbox div.pre{
36 position: relative;
37 float:left;
38 width:60px;
39 height:100%;
40 }
41 div.showbox div.pre span{
42 position: absolute;
43 left:0;
44 right:0;
45 top:0;
46 bottom: 0;
47 margin:auto;
48 width:40px;
49 height:60px;
50 background: url('../img/toleft01.png') no-repeat 0 0;
51 cursor:pointer;
52 cursor:hand;
53 }
54 div.showbox div.aft{
55 position: relative;
56 float:right;
57 width:60px;
58 height:100%;
59 }
60 div.showbox div.aft span{
61 position: absolute;
62 left:0;
63 right:0;
64 top:0;
65 bottom: 0;
66 margin:auto;
67 width:40px;
68 height:60px;
69 background: url('../img/toright01.png') no-repeat 0 0;
70 cursor:pointer;
71 cursor:hand;
72 }
73 div.showbox ul.odot{
74 position: absolute;
75 width:100%;
76 height:100px;
77 bottom: 15px;
78 }
79 div.showbox ul.odot ul.lis{
80 position: absolute;
81 left:0;
82 right:0;
83 top:0;
84 bottom: 0;
85 margin:auto;
86 width:200px;
87 height:30px;
88 }
89 div.showbox ul.odot ul.lis li{
90 display: inline-block;
91 width:15px;
92 height:15px;
93 margin:5px;
94 cursor:pointer;
95 cursor:hand;
96 }最后是 .js代码：
1 $(function(){
2 var O_showbox = $('div.showbox');
3 var O_imgbox = $('div.showbox div.imgbox');
4 var O_imgs = $('div.showbox div.imgbox img');
5 var O_pre = $('div.showbox div.pre');
6 var O_aft = $('div.showbox div.aft');
7 var O_lis = $('div.showbox ul.odot ul.lis li');
8 var timer = null;
9 var O_index = 1;
10 var oshow_width = O_showbox.width();
11 var O_imgs_len = O_imgs.length;
12 O_imgs.each(function(){
13 $(this).css('width',oshow_width+'px');
14 });
15 O_imgbox.css('width',oshow_width*O_imgs_len +'px');
16
17 O_imgbox.css('left','-' + oshow_width + 'px');
18 O_aft.on('click',function(){
19 O_index++;
20 var target_left = -O_index*oshow_width;
21 O_imgbox.stop(false,true).animate({'left':target_left+'px'},function(){
22 if(O_index >= O_imgs_len-1){
23 O_index=1;
24 O_imgbox.css('left','-' + oshow_width + 'px');
25 };
26 O_lis.removeClass('active').removeClass('changtai');
27 O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai');
28 });
29 });
30 O_pre.on('click',function(){
31 O_index--;
32 var target_left = -O_index*oshow_width;
33 O_imgbox.stop(false,true).animate({'left':target_left+'px'},function(){
34 if(O_index <= 0 ){
35 O_index=O_imgs_len-2;
36 O_imgbox.css('left','-' + oshow_width*O_index + 'px');
37 };
38 O_lis.removeClass('active').removeClass('changtai');
39 O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai');
40 });
41 });
42 function aoto_play(){
43 timer = setInterval(function(){
44 O_aft.click();
45 },1500)
46 };
47 aoto_play();
48 O_lis.on('click',function(){
49 var index= $(this).index();
50 O_index =index + 1;
51 var target_left = -O_index*oshow_width;
52 O_imgbox.stop(false,true).animate({'left':target_left+'px'});
53 O_lis.removeClass('active').removeClass('changtai');
54 O_lis.eq(O_index-1).addClass('active').siblings().addClass('changtai');
55 });
56 O_showbox.hover(function(){
57 clearInterval(timer);
58 },function(){
59 aoto_play();
60 });
61
62 // 自适应
63 var Oz_width = 1903; //初始状态的宽度
64 var Oz_height = 800; //初始状态的高度
65 var Oz_ratio = Oz_height/Oz_width ; // 自适应高宽比率
66
67 function zishiying(){
68 var curwidth = $(document.body).width() ;
69 //初始化
70 // 设定显示divbox的宽为视窗宽度，高度为宽度按比例缩放
71 O_showbox.width( curwidth+'px');
72 O_showbox.height( parseInt(curwidth*Oz_ratio) + 'px' );
73 //设置图片的高度和宽度
74 O_imgs.each(function(){
75 $(this).css('width',oshow_width+'px');
76 $(this).css('height',parseInt(curwidth*Oz_ratio) + 'px' );
77 });
78 // 设定imgbox的高度和宽度
79 O_imgbox.css('width',curwidth*O_imgs_len +'px');
80 O_imgbox.css('height',parseInt(curwidth*Oz_ratio) + 'px' );
81
82 }
83 zishiying();
84 $(window).resize(function(){
85 zishiying();
86 // window.location.reload();
87 });
88 });以上三个部分完成，轮播就OK了；
下面对代码进行说明：html和css部分就略过了，说一下js的部分
1. 首先：获取元素及初始化数据
2. 写点击事件：点击展示下一页和上一页，这里主要是和索引相关，下一页则索引自加，上一页则索引自减；
利用animate的移动规则，先移动，然后判断索引；确认是否已经到最后一页，或者第一页
因为我们做的是无缝轮播，图片放置时第一页和最后一页是重复的，这样做一个判断，并作出相应的处理，使图片移动时，看起来是一种无缝状态
3. 设定自动播放和小点点击事件，轮播停止和重新开始事件
4.设定轮播图片的自适应：
综合：
基本上可以实现轮播自适应，但是有一个问题，就是在图片轮播进时，改变浏览器的大小时，不太匹配，有时候会把图片显示不全，或者显示第一张图片的一般，另一张图片的一部分；
如以上第4点，在$(window).resize()事件中加入window.location.reload() 刷新时，显示不全的问题得到解决了，但是刷新时，会出现空白闪动，这给人的体验不太好
总结一下：除了自适应有问题外，轮播基本上实现了
自适应的问题暂时还不知道怎样解决，欢迎各位看到后留言，告诉我自适应的方法
附：后记：11/11 再次测试时：
把自适应中，var curwidth 改成 oshow_width, 相应的curwidth全部换成oshow_width;(此改变是为了同步，觉得没有必要多设一个参数)；
测试时，轮播图片在窗口改变过程中，还是有显示不全的现象（即只显示一张图片的一部分，另一张图片的另一部分），但是再切换到下一页或者自动轮播到下一页时，恢复正常了；
末尾也出现空白界面的现象也没有再出现
----虽然解决了一些问题，但是还是没有找到问题的根因，疑惑中...............
效果图如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
