js-輪播圖

本身寫輪播圖，當超過最小設定寬度時，隨瀏覽器寬度變化而變化，當小於最小設定寬度時，固定爲最小設定寬度。

html部分

 1 <div id="banner">
 2     <div class="slide">
 3         <a href=""><img src="xm1.jpg" alt=""></a>
 4         <a href=""><img src="xm2.jpg" alt=""></a>
 5         <a href=""><img src="xm3.jpg" alt=""></a>
 6         <a href=""><img src="xm4.jpg" alt=""></a>
 7     </div>
 8     <ul class="slideBtn"></ul>
 9 </div>
10 <script src="jquery.min.js"></script>

css部分

1 * {margin: 0;padding: 0;}
2 #banner{min-width:1200px;min-height: 450px;margin:0 auto;overflow: hidden;position: relative;}
3 .slide{position: absolute;top:0;}
4 .slide img{width:100%;float: left;}
5 .slideBtn{position: absolute;bottom: 0;width:100%;text-align: center;z-index: 10;}
6 .slideBtn li{display: inline-block;width:10px;height:10px;margin:5px;background: #000;opacity: .2;filter:Alpha(opacity=20);border-radius: 50%;cursor: pointer;}
7 .slideBtn li:hover,.slideBtn li.on{opacity: 1;filter:Alpha(opacity=100);background: #f00;}

js部分

 1     var bannerW,
 2          slideW,
 3          slideLeft,
 4          slideIndex = 0,
 5          slide = $(".slide").find("img"),
 6          oNum = slide.length,oLi = ""; 
 7     bannerW = $("#banner").width();
 8     slideW = oNum * bannerW;
 9     $(".slide").width(slideW);
10     slide.width(bannerW);
11     $("#banner").height(slide.height());
12     $(window).resize(function(){
13         bannerW = $("#banner").width();
14         slideW = oNum * bannerW;
15         $(".slide").width(slideW);
16         slide.width(bannerW);
17         $("#banner").height(slide.height());
18     })
19     for(var i=0;i<oNum;i++){
20         oLi += "<li></li>";
21     }
22     $(".slideBtn").append(oLi);
23     $(".slideBtn").find("li").eq(0).addClass("on");
24     $(".slideBtn").find("li").click(function(){
25         slideIndex = $(this).index();
26         slideLeft = slideIndex * bannerW;
27         $(this).addClass("on").siblings().removeClass("on");
28         $(".slide").animate({left:-slideLeft},"slow");
29     })
30     var timer = setInterval(function () {
31         slideIndex++;
32         if(slideIndex > oNum - 1){
33             slideIndex = 0;
34         }
35         slideLeft = slideIndex * bannerW;
36         $(".slideBtn").find("li").eq(slideIndex).addClass("on").siblings().removeClass("on");
37         $(".slide").animate({left:-slideLeft},"slow");
38     }, 3000);     

 

當輪播圖的寬高固定時

html部分與上面同樣，其他也大致一直，只是少了一個隨瀏覽器寬度變化的事件

css部分

1 * {margin: 0;padding: 0;}
2 #banner{width:1200px;height: 450px;margin:0 auto;overflow: hidden;position: relative;}
3 .slide{position: absolute;top:0;}
4 .slide img{width:100%;float: left;}
5 .slideBtn{position: absolute;bottom: 0;width:100%;text-align: center;z-index: 10;}
6 .slideBtn li{display: inline-block;width:10px;height:10px;margin:5px;background: #000;opacity: .2;filter:Alpha(opacity=20);border-radius: 50%;cursor: pointer;}
7 .slideBtn li:hover,.slideBtn li.on{opacity: 1;filter:Alpha(opacity=100);background: #f00;}

js部分

 1     var bannerW,
 2           slideW,
 3           slideLeft,
 4           slideIndex = 0,
 5           slide = $(".slide").find("img"),
 6           oNum = slide.length,oLi = ""; 
 7     bannerW = $("#banner").width();
 8     slideW = oNum * bannerW;
 9     $(".slide").width(slideW);
10     slide.width(bannerW);
11     for(var i=0;i<oNum;i++){
12         oLi += "<li></li>";
13     }
14     $(".slideBtn").append(oLi);
15     $(".slideBtn").find("li").eq(0).addClass("on");
16     $(".slideBtn").find("li").click(function(){
17         slideIndex = $(this).index();
18         slideLeft = slideIndex * bannerW;
19         $(this).addClass("on").siblings().removeClass("on");
20         $(".slide").animate({left:-slideLeft},"slow");
21     })
22     var timer = setInterval(function () {
23         slideIndex++;
24         if(slideIndex > oNum - 1){
25             slideIndex = 0;
26         }
27         slideLeft = slideIndex * bannerW;
28         $(".slideBtn").find("li").eq(slideIndex).addClass("on").siblings().removeClass("on");
29         $(".slide").animate({left:-slideLeft},"slow");
30     }, 3000);    

 

 

參考文章：http://www.javashuo.com/article/p-vfajzgry-ky.html