MENU

JQ实现无缝轮播加覆盖层特效

• March 29, 2019 • Read: 718 • Web Program

Html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="jquery3.min.js"></script>
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
      }
      body{
        background: orange;
      }
      #container {
        width: 800px;
        height: 200px;
        border: 3px solid #eee;
        position: relative;
        overflow: hidden;
        margin: 20px auto;
        cursor: pointer;
      }

      #list {
        position: absolute;
        width: 3200px;
        height: 200px;
      }
      #list img {
        float: left;
        width: 400px;
        height: 200px;
        transition: 0.3s;
      }
      #buttons {
        position: absolute;
        z-index: 2;
        bottom: 5px;
        left: 50%;
        margin-left: -34px;
      }
      #buttons span {
        display: block;
        width: 10px;
        height: 10px;
        background-color: #333;
        border: 1px solid #fff;
        margin-right: 5px;
        border-radius: 50%;
        float: left;
        cursor: pointer;
      }
      #buttons .on {
        background: orangered;
      }
      .arrow {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 36px;
        text-align: center;
        position: absolute;
        color: #fff;
        z-index: 3;
        top: 50%;
        margin-top: -20px;
      }
      #prev {
        left: 20px;
      }
      #next {
        right: 20px;
      }
      a:hover {
        background-color: #23222259;
      }
      .svip{
        width: 100%;
        height: 100%;
        position: absolute;
        background:rgba(0, 0, 0, 0.5);
        left: 50%;
        transform: translateX(-50%);
        top: 0px;
        
        /* display: none; */
      }
      .zhanshi{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 800px;
        height: 300px;
        background: url('https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg') round;
        display: inline-block;
        top: 30%;
      }
      span{
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        transition: 0.3s;
      }
      span:hover{
        color:orange;
      }
      .prev{
        position: absolute;
        top: 320px;
        left: 237px;
      }
      .next{
        position: absolute;
        top: 320px;
        left: 1096px;
      }
      b{
       width: 50px;
       height: 50px;
       margin-left: 90%;
       margin-top: 5%;
       display: inline-block;
       color: #fff;
       border-radius:50%;
       background: rgba(0, 0, 0, 0.3) ;
       font-size: 20px;
       text-align: center;
       line-height: 50px;
       cursor: pointer;
       transition: 0.3s;
      }
      b:hover{
        background: rgba(255, 255, 255, 0.3);
      }
    </style>
  </head>
  <body>
    
    <div id="container">
      <div id="list" style="left:0px">
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg"
          alt="1"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162ev1d8xj30y20cs0xy.jpg"
          alt="2"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162f7080cj30y20cs79p.jpg"
          alt="3"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162fk1v8bj30y20cswij.jpg"
          alt="4"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg"
          alt="1"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162ev1d8xj30y20cs0xy.jpg"
          alt="2"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162f7080cj30y20cs79p.jpg"
          alt="3"
        />
        <img
          src="https://ww2.sinaimg.cn/large/005BYqpgly1g162fk1v8bj30y20cswij.jpg"
          alt="4"
        />
      </div>
    </div>
    <div class="svip" style="display:none;">
      <span class="prev">&lt;</span>
      <i class="zhanshi"></i>
      <span class="next">&gt;</span>
      <b>X</b>

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

JS部分

<script>
    //四张图片实现无缝轮播 布局需要用到两套图 一共8张
    var score = 0;//全局变量left的值
    var index = 0;//用来接收 全局变量img的下标 
    var jsq = null;//计时器初始化
    function move() {//定义自动播放函数
      score = score - 1;//每次left减掉1px
      $("#list").css("left", score + "px");//执行left变化的语句
      if (score <= -1600) {//如果大于我的四张图片总宽度
        score = 0;//使他回到第一套图的第一张 造成视觉差
      }
    }
    jsq = setInterval(move, 1);//让他自己循环播放
    $("img").hover(//定义鼠标进入图片区域函数
      function () {
        clearInterval(jsq);//让定时器停止
        $(this).css("opacity", "0.7");//鼠标选中的图片透明图发生变化
      },
      function () {//鼠标移出图片区域
        jsq = setInterval(move, 1);//计时器继续
        $("img").css("opacity", "1");//让所有发生透明图改变的图片恢复到初始值
      }
    );
    $('b').click(function () {//定义删除按钮函数
      $(".svip").css('display', 'none');//让弹出的一层none掉
      $('#container').css('filter','');//清除图片部分毛玻璃效果
    })
 
    $('img').click(function () {//定义图片被点击函数
      $('.svip').css("display", 'block');//让覆盖层显示出来
      $('#container').css('filter','blur(10px');//让图片部分呈现毛玻璃效果
      $('.zhanshi').css("background", 'url(' + $(this).attr('src') + ')round');//让覆盖层展示部分图片src地址对应到鼠标点击的图片src
      index = $(this).index();//将鼠标点击的图片的下标返回出去用index接受
    })
    $('.prev').click(function () {//定义上一张按钮函数
      index--;//下标自减
      if (index < 0) {//判断左边界
        index = $('img').length - 5;//满足条件进来让index的值为8张图片的长度减掉5就是3,既最后一张
      }
      $('.zhanshi').css("background", 'url(' + $('img').eq(index).attr('src') + ')round');//覆盖层展示图片的背景图src变化语句
    })
    $('.next').click(function () {//定义下一张按钮
      index++;//下标自加
      if (index > $('img').length - 5) {//$('img').length - 5既第一套图最后一张
        index = 0;//让下标对应第一张
      }
      $('.zhanshi').css("background", 'url(' + $('img').eq(index).attr('src') + ')round');//覆盖层展示图片的背景图src变化语句
    })
  </script>

在线测试

Archives QR Code
QR Code for this page
Tipping QR Code