自己写轮播图，当超过最小设定宽度时，随浏览器宽度变化而变化，当小于最小设定宽度时，固定为最小设定宽度。

html部分

1 
     
       2     
      
        3         
        4         
        5         
        6         
        7     
      
 8     
      
 9 
     
10 

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 - 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 - 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);
     

 

 

参考文章：