用JQ实现自动轮播效果,鼠标移入暂停和移出继续轮播效果。

直接上图:

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图效果</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    #banner{
      width:400px;
      height: 376px;
      margin:50px auto;
      position: relative;
    }
    .imgList{
      list-style: none;
    }
    .imgList li{
      position: absolute;
      left:0;
      top:0;
    }
    .leftBtn,.rightBtn{
      width:41px;
      line-height: 69px;
      position: absolute;
      text-align: center;
      top:119px;
      z-index:3;
    }
    .leftBtn{
     left:0;
    }
   .rightBtn{
     right:0;
   }
   .leftBtn:hover,.rightBtn:hover{
     background-color:rgba(0, 0, 0, 0.2);
   }

   /* 小白点 */
   .focusList{
     position: absolute;
     bottom: 95px;
     right:150px;
     z-index:2;/*层级调高*/
   }
   .focusList a{
     float: left;
     width:10px;
     height: 10px;
     border-radius: 50%;
     margin-left:10px;
     background: rgba(0, 0, 0, .4);
   }
   .focusList a.cur{
     background: rgba(255, 255, 255, .6);
   }

  </style>
</head>
<body>
  <div id=banner>
    <ul class="imgList">
      <li style="z-index: 1;"><a href="#"><img src="./img/下载1.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/下载2.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/下载3.gif" alt=""></a></li>
      <li><a href="#"><img src="./img/下载3.jpg" alt=""></a></li>
      <li><a href="#"><img src="./img/下载4.gif" alt=""></a></li>
    </ul>
    <a class="leftBtn" href="javascript:void(0)">&lt;</a>
    <a class="rightBtn" href="javascript:void(0)">&gt;</a>
    <div class="focusList">
      <a href="javascript:void(0)" class="cur"></a>
      <a href="javascript:void(0)"></a>
      <a href="javascript:void(0)"></a>
      <a href="javascript:void(0)"></a>
      <a href="javascript:void(0)"></a>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> 
  <script>
    /*
    1.每隔一段时间切换一张图片（自动）
    2.点击左右按钮切换图片（点左上一张，点右下一张）
    3.点击焦点切换到焦点的索引对应的那一张图片
    4.鼠标移入图片区域暂停自动播放，鼠标移出继续播放 
    */
    //封装一个方法，调用这个方法
    //切换图片
    function changeImg(a){//实参代表图片索引的一个数字
      $('.imgList li').eq(a).fadeIn().siblings().fadeOut();//淡入显示，其它隐藏
      $('.focusList a').eq(a).addClass('cur').siblings().removeClass('cur');//添加class，其它删除
    }
    //自动播放按顺序执行
    var step=0;//用全局变量做一个声明 每隔2s做一个调用
    changeImg(step);//页面刚进入默认第一张显示
    var timer=null;//定义为全局定时器，其它的方法就可以访问到这个定时器
    function autoPlay(){
      //定义一个变量接收定时器
      timer= setInterval(function(){
      step++;
       if(step===5){
         step =0;//从第一张开始轮播
       }
       changeImg(step);
     },2000);
    }
    autoPlay();
    //点击左按钮切换
    $('.leftBtn').click(function(){
      clearInterval(timer);//清除定时器
      step--;//每点击一下就减减
      if(step===-1){
        step=4;//当减到最后一张时，让图片从最后一张开始
      }
      changeImg(step);//图片跟着变化
      autoPlay();//当不点击按钮的时候，在继续执行定时器
    })
    //点击右按钮切换
    $('.rightBtn').click(function(){
      clearInterval(timer);//清除定时器
      step++;//每点击一下就减减
      if(step===5){
        step=0;//当加到最后一张时，让图片从第一张开始
      }
      changeImg(step);//图片跟着变化
      autoPlay();//当不点击按钮的时候，在继续执行定时器
    })
    //点击焦点切换
    $('.focusList a').click(function(){
      clearInterval(timer);//先清除定时器
      step=$(this).index();//赋值给当前索引
      changeImg(step);//执行step图片
      autoPlay();//不点击的时候在执行定时器
    })
    //鼠标移入图片区域暂停自动播放，鼠标移出继续播放
    $('.imgList').mouseover(function(){//mouseiver鼠标移入
      console.log($('.imgList'));
      clearInterval(timer);//先清除定时器
    }).mouseout(function(){//mouseiver鼠标移出
      autoPlay();//继续执行定时器
    })

  </script>
</body>
</html>

总结:如果不想要箭头的切换效果，可以去掉左边和右边的按钮事件，就可以实现效果。
:想要在移动端运行的可以自己改变css样式，把px转变成rem或者百分比

下一篇文章:实现自动轮播图片和手指触屏切换图片效果；

用JQ实现自动轮播效果,鼠标移入暂停和移出继续轮播效果。

猜你喜欢