Jquery无缝轮播图的制作

轮播是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>

View Code

然后是 .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 }

View Code

最后是 .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 });