web实现轮播图

来源：互联网发布：网上比价软件下载编辑：程序博客网时间：2024/06/18 13:19

html代码，图片请自行准备

<!DOCTYPE html>      <html>          <head>              <meta charset="utf-8" />              <title></title>              <link rel="stylesheet" href="css/banner.css" />            <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>            <script src="js/banner.js" ></script>         </head>          <body style="text-align: center;">              <div class="box">                  <ul>                      <li>                        <a href="#">                    <img src="img/b.jpg"/>                        </a>                    </li>                      <li>                        <a href="#">                    <img src="img/b.jpg"/>                    </a>                    </li>                      <li>                        <a href="#"><img src="img/b.jpg"/>                    </a>                    </li>                  </ul>                     </div>              <div>            </div>            <!--有些刚接触编程可能不知道，为什么要把js代码放着呢？因为在上面的html加载完之后，js里面的元素才不会为空，若放在html元素之前，                则在js执行的时候，会出现元素不存在的异常，因为html元素还没加载，程序的执行是从上往下执行的，这点不可不查。-->                <script type="text/javascript">              var bannerStyle = {selectedStyle:"selectedStyle",indicatorPosition:"left",dotStyle:"dotStyle",indicatorBoxStyle:"indicatorBoxStyle",buttonStyle:"bannerButtonStyle",showButton:true,automaticSwitch:false,buttonMargin:"30px",delay:500};           banner($(".box"),bannerStyle);        </script>         </body>      </html>

js代码：

//轮播图  function banner(box,bannerStyle){    var liWidth,buttonBox,indicator,leftButton,buttonHieght,rightButton,methodId,liNumber,boxWidth = box.width(),index = 0;       //此处为重点    var cloneObject = box.children("ul").children("li").first().clone();    //此处为重点       box.children("ul").append(cloneObject);liNumber = box.children("ul").children("li").length;box.css("width",boxWidth);box.append("<div><button><</button><button>></button></div>");box.append("<div></div>");buttonBox = box.children("div").eq(0).addClass("buttonBoxStyle");indicator = box.children("div").eq(1).addClass(bannerStyle.indicatorBoxStyle);leftButton = buttonBox.find("button").eq(0).addClass(bannerStyle.buttonStyle).css("left",bannerStyle.buttonMargin);    rightButton = buttonBox.find("button").eq(1).addClass(bannerStyle.buttonStyle).css("right",bannerStyle.buttonMargin);    buttonHieght = leftButton.height();buttonBox.css("margin-top",-buttonHieght/2);box.children("ul").children("li").css("width",boxWidth);box.children("ul").children("li").children("a").children("img").css("width",boxWidth);box.css("height",box.children("ul").children("li").children("a").children("img").height());buttonBox.css("width",boxWidth);indicator.css("width",boxWidth);liWidth = box.children("ul").children("li").width();//添加指示器for(var a = 0;a<liNumber-1;a++){        indicator.append("<span></span>");        indicator.find("span").eq(a).addClass(bannerStyle.dotStyle);        if(a == 0){        indicator.find("span").eq(0).addClass(bannerStyle.selectedStyle);        }        if(a == liNumber-2){            indicator.find("span").eq(a).css("margin-right","0px");        }        indicator.find("span").eq(a).click(function(){            index = $(this).index();            move();        });    }    if(bannerStyle.indicatorPosition=="left"){indicator.css("text-align","left");indicator.css("padding-left","10px");}else if(bannerStyle.indicatorPosition=="right"){indicator.css("text-align","right");indicator.css("padding-right","10px");}else{indicator.css("left","0px");}   leftButton.click(function(){        index--;        move();       });       rightButton.click(function(){        index++;        move();       });       function move(){        //滑动到最左再接着向左滑动的话便进入       if(index == -1){        index = liNumber-2;        box.children("ul").css("left",-(liNumber-1)*liWidth);       }       //滑动到最右再接着向左滑动的话便进入       if(index == liNumber){        box.children("ul").css("left","0px");            index = 1;       }        box.children("ul").stop().animate({left:-index*liWidth},bannerStyle.delay);        //设置指示器        if(index!=liNumber-1){            indicator.children().eq(index).addClass(bannerStyle.selectedStyle).siblings().removeClass(bannerStyle.selectedStyle);        }else{            indicator.children().eq(0).addClass(bannerStyle.selectedStyle).siblings().removeClass(bannerStyle.selectedStyle);        }       }        if(bannerStyle.showButton){        buttonBox.css("visibility","visible");     }else{    buttonBox.css("visibility","hidden");     }    if(bannerStyle.automaticSwitch)   setTime();       function setTime(){          methodId=setInterval(function(){               index++;                move();            },2000);         }            box.hover(function(){                clearInterval(methodId);            if(!bannerStyle.showButton)            buttonBox.css("visibility","visible");            },            function(){      if(bannerStyle.automaticSwitch)            setTime();              if(!bannerStyle.showButton)            buttonBox.css("visibility","hidden");            });     }

css代码：

div,ul,li{                  margin: 0px;                  padding: 0px;              }                  .box{                           overflow: hidden;                    width: 100%;                 height: auto;                         display: inline-block;                      position: relative;                  }                  .box>ul>li{                      float: left;                              position: relative;                     }                  .box>ul{                           width: 99999px;                          list-style: none;                position: absolute;                       }                  /*按钮盒子风格*/            .buttonBoxStyle{                        top: 50%;                      position: relative;                      width: 100%;                          z-index: 1;               }                 /*buttonStyle*/             .bannerButtonStyle{                     border-radius: 50%;                     color: white;                         position: absolute;                      font-size: 26px;                      border-style: none;                      width: 50px;                      height: 50px;                      background: rgba(0,0,0,0.4);                  }                    /*指示器盒子风格*/             .indicatorBoxStyle{                  left: 0px;                   bottom: 5px;                      position: absolute;             }            /*指示器圆点的基础风格*/                 .dotStyle{                    display: inline-block;                    width: 8px;                    height: 8px;                    margin-right: 10px;                    background: orangered;                    border-radius: 50%;                    border: 1px solid white;                }             /*选中圆点的颜色*/            .selectedStyle{background: #333333;}

效果图：

（功能）

1，可以点击左右或点击圆点切换。

2，鼠标放上去停止滚动。

初学web不久，如有写的不好或者不规范的地方，望不吝赐教，感谢！

1 0