自写轮播

最新推荐文章于 2020-12-17 20:54:34 发布

fcjboke

最新推荐文章于 2020-12-17 20:54:34 发布

阅读量197

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/qq_35835160/article/details/52698809

版权

php 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>轮播</title>
    
    <script src="jquery.1.12.js"></script>
      
   <style>
   /* 调整间距*/
   *{
      padding: 0;
      margin: 0;
   }

   body{
      /*调整左边距*/
      margin: 30px;
   }
   /*去除左边点*/
   li{
      list-style:none;
   }
   /*构造可视区域（容器）*/
      .warp{
       width:500px;
       height:285px;
       border:3px solid gray;
       position: absolute;
       overflow: hidden;/*这是最后一步，将未在可视区内的图片隐藏*/
      }
      /*将图片横向排列*/
      /*1、横向容器*/
      .warp ul{
       width:3500px;
       position: absolute;/*定位图片*/

      }
      .warp ul li{
       width:500px;
       height:285px;
       float:left;/*浮动*/
      }
      /*调整数字*/
      /*定义数字容器*/
      .warp ol{
       width:210px;/*全部数字容器的宽*/
       /* border:2px solid red;/*边框*/
        position: absolute;/**将数字容器定位到父级元素div内*/
        bottom:10px;/*距离底部*/
        right: 10px;/*距离底部*/

      }
      /*浮动数字为横向*/
       .warp ol li{
         float:left;/*左浮*/
         width:25px;/*每个数字容器的宽*/
       height:25px;/*每个数字容器的高*/
       background: #abc;/*字的背景颜色*/
       color:#fff;/*字的颜色*/
       margin-left: 4px;/*字的背景颜色间隔*/
       line-height: 25px;/*字上下居中*/
       text-align: center;/*字左右居中*/
       cursor: pointer;/*光标变为小手*/

       }
       /*li的样式*/
      .warp .current{
       background: #000;

       }

   </style>
</head>
<body>

<div class="warp">
   <ul>
       <li><img src="./images/1.jpg" alt="" width="500"></li>
       <li><img src="./images/2.jpg" alt="" width="500"></li>
       <li><img src="./images/3.jpg" alt="" width="500"></li>
       <li><img src="./images/4.jpg" alt="" width="500"></li>
       <li><img src="./images/5.jpg" alt="" width="500"></li>
       <li><img src="./images/6.jpg" alt="" width="500"></li>
       <li><img src="./images/7.jpg" alt="" width="500"></li>
   </ul>
   <ol>
       <li class="current">1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
   </ol>
</div>

</body>
<script>
   $(function(){//加载函数
       //添加文字效果
       var olist = $(".warp ol li");
       var uul=$(".warp ul");
       var _now=0;//计时器的eq值
          olist.click(function(){
          $(this).addClass("current").siblings().removeClass("current");//给当前对象添加样式，同时兄弟元素移除class
          var _index=$(this).index();
             //alert(_index)
          var offset=_index * -500;
          //图片滚动
          uul.animate({left:offset},'slow');

          })
          //定时器,每2000毫秒执行1次
       var timer= setInterval(zdlb,2000);
          function zdlb(){
           // alert(1)
           // 设置eq中的值0-6
               if(_now < 7){
                              // olist对象，定位到第2个,加上li的样式，并将其他兄弟元素的样式去掉
                           olist.eq(_now).addClass("current").siblings().removeClass("current");

                              //图片定时滚动，每次滚动500，
                           uul.animate({left:_now*-500},'slow');
                                 _now++;
                              }else{
                                 _now=0;
                                 olist.eq(_now).addClass("current").siblings().removeClass("current");
                                     //图片定时滚动，每次滚动500，
                              uul.animate({left:_now*-500},'slow');
                           }
               }
               //在div上加鼠标移上事件，
               $(".warp").mouseenter(function(){
                  clearInterval(timer);//鼠标移上停止定时器
               }).mouseleave(function(){
                     timer= setInterval(zdlb,2000);//鼠标移出启动定时器,不能再var(否则会越来越快，清除不了)
                  //alert(4)
               })



   })
</script>
</html>