轮播图(更新版)

程序员奋斗者GO

于 2017-07-06 16:43:22 发布

阅读量288

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_37896260/article/details/74567116

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script type="text/javascript" src="temp/js/jquery-1.11.0.min.js"></script>
        <script>
             $(document).ready(function(){
                var len = $(".indexList li").length;
                var index = 0;
                var startRollOne;
             //index的点击事件
             $(".indexList li").click(function(){
                    index=$(".indexList li").index(this);
                    showImg(index);
              });
           //滑入banner清除定时器，滑出则设定定时器
                $("#banner").hover(function () {
                    clearInterval(startRollOne);
                }, function () {
                    startRollOne=setInterval(function () {
                        showImg(index);
                        index++;
                        if(index==len){
                            index=0;
                        }
                    },2000);
                }).trigger("mouseleave");
              //对animate事件封装
                function showImg(index){
                    $(".imgList").stop(true,false).animate({
                        marginLeft:-1920*index+"px"
                    },200);
                    $(".indexList li").removeClass("indexOn").eq(index).addClass("indexOn");
                }
              //上一张事件
                $("#prev").click(function(){
                   index = (index > 0) ? (--index) : (len - 1);
                   showImg(index);
                });
              //下一张事件
                $("#next").click(function() {
                   index = (index < len - 1) ? (++index) : 0;
                   showImg(index);
               });

            });
             /* $(".num li").click(function(){
             //获取当天月份
             var month_string = $(this).eq(0).text();
             var month = month_string.substring(0,1)
             alert(month);

          }); */
        /* $("#next").click(function(){
            $("#picBox").animate({
                   marginLeft:-1100+"px"
                },1000);
         }); */

        </script>
        <style>
            ul,li {
   position: relative;
   list-style: none;
}

#wrapper {
   margin: 0px auto;
   width: 1920px;
   height: 900px;
}
#banner {
   position: relative;
   width: 1920px;
   height: 900px;
   overflow: hidden;
}

.imgList {
   width: 9600px;
   height: 900px;
   z-index: 10;
   overflow: hidden;
}
.imgList li {
   float: left;
   display: inline;
}
.indexList {
   position: absolute;
   right: 1%;
   bottom: 400px;
   z-index: 30;
}
#prev,#next{
   position: absolute;
   bottom: 400px;
   z-index: 30;
}
#prev{
   left: 2%;
}
#next{
   right: 2%;
}
.indexList li {
   margin:-15px;
   font-size:30px;
   margin-right: 5px;
   /* border: 2px solid black; */
   /* background: grey; */
   cursor: pointer;
}
.indexList .indexOn {
   font-weight: bold;
   color: white;
}
#home1 a{
   cursor:pointer;
   position: absolute;
   left: 432px;
   bottom: 255px;
   color:white;
   z-index: 30;
   text-decoration: none;
}
#home1 a:hover{
   color: #60accf;
}
#home2 a{
   cursor:pointer;
   position: absolute;
   left: 1432px;
   bottom: 262px;
   color:#4c7533;
   z-index: 30;
   text-decoration: none;
}
#home2 a:hover{
   color: #89d15d;
}
#home3 a{
   cursor:pointer;
   position: absolute;
   left: 402px;
   bottom: 287px;
   color:#365e77;
   z-index: 30;
   text-decoration: none;
}
#home3 a:hover{
   color: #6bb9ea;
}
#home4 a{
   cursor:pointer;
   position: absolute;
   left: 1466px;
   bottom: 294px;
   color:white;
   z-index: 30;
   text-decoration: none;
}
#home4 a:hover{
   color: #984724;
}
#home5 a{
   cursor:pointer;
   position: absolute;
   left: 480px;
   bottom: 260px;
   color:#365e77;
   z-index: 30;
   text-decoration: none;
}
#home5 a:hover{
   color: #573e15;
}
        </style>
    </head>
    <body>
    <div id="wrapper">
        
       <div id="banner">
           
           <ul class="imgList">
           
               <li>
                   <img src="temp/images/cooperation1.png" alt="">
                   <div id="home1"><a href="view/index.jsp">进入首页></a></div>
               </li>
               <li>
                   <img src="temp/images/cooperation2.png" alt="">
                   <div id="home2"><a href="view/index.jsp">进入首页></a></div>
               </li>
               <li>
                   <img src="temp/images/cooperation3.png" alt="">
                   <div id="home3"><a href="view/index.jsp">进入首页></a></div>
               </li>
               <li>
                   <img src="temp/images/cooperation4.png" alt="">
                   <div id="home4"><a href="view/index.jsp">进入首页></a></div>
               </li>
               <li>
                   <img src="temp/images/cooperation5.png" alt="">
                   <div id="home5"><a href="view/index.jsp">进入首页></a></div>
               </li>
           </ul>

           <ul class="indexList">
               
               <li class="indexOn">●</li>
               <li>●</li>
               <li>●</li>
               <li>●</li>
               <li>●</li>
           </ul>
           <img id="prev" alt="" src="temp/images/prev.png">
           <img id="next" alt="" src="temp/images/next.png">
        </div>

    </div>
    </body>
    </html>