您的位置:88bifa必发唯一官网 > 必发88首页 > 支付进度中必要用到图片轮播的插件

支付进度中必要用到图片轮播的插件

发布时间:2019-06-11 01:24编辑:必发88首页浏览(88)

    开发过程中需要用到图片轮播的插件,在网上找了几个插件之后还是决定自己码一个,比较简洁的功能,以后说不定还会有用。

    ps:

    功能比较简单,整个框并不能根据图片的大小自动调节,这里所用的图片是1170*500的,如果需要改成其他大小的图片,自行修改.pic-list下img的宽度。

    .pic-list中的宽度为整个横幅的宽度,如果需要轮播的图片数量很多,.pic-list的宽度应大于数量*单张宽度,

    html

    <div class="banner">
        <!--第一张图片为最后一张,用来做轮播连接使用,所以一开始显示的第一章,应是第二张图片,这里图片的宽度为1170px,所以一开始left为-1170px,同理最后一张图也为第一张图。-->
      <div class="pic-list" style="left: -1170px">
        <img src="/static/img/4.jpg" alt="图片 1">
        <img src="/static/img/1.jpg" alt="图片 2">
        <img src="/static/img/2.jpg" alt="图片 3">
        <img src="/static/img/3.jpg" alt="图片 4">
        <img src="/static/img/4.jpg" alt="图片 5">
        <img src="/static/img/1.jpg" alt="图片 6">
      </div>
      <div id="buttons">
        <!-- 确保span的数量跟img数量一样多,不包括第一张img和最后一张img-->
    
    
    
    
      </div>
      <a href="javascript:;" class="arrow" id="prev"><</a>
      <a href="javascript:;" class="arrow" id="next">></a>
    </div>
    

    css

    .banner{
      width: 100%;
      height: 500px;
      overflow: hidden;
      position: relative;
    
    }
    .banner a{
      text-decoration: none;
    }
    .banner .pic-list{
      width: 10000px;
      height: 500px;
      position: absolute;
      z-index: 1;
    }
    .banner .pic-list img{
      width: 1170px;
      float: left;
    }
    #buttons{
      position: absolute;
      z-index: 2;
      height: 10px;
      bottom: 20px;
      left: 550px;
    
    }
    #buttons span{
      cursor: pointer;
      float: left;
      border: 1px solid #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #333;
      margin-right: 5px;
    }
    #buttons .on{
      background: orange;
    }
    .arrow{
      cursor: pointer;
      line-height: 36px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 2;
      top: 200px;
      background: rgba(0,0,0,0.5);
      color: #fff;
      display: none;
    }
    .banner:hover .arrow{display: block;}
    
    #prev{
      left: 20px;
    }
    #next{
      right:20px;
    }
    

    js

    $(document).ready(function(){
      var picNum = 4;//图片数量,根据实际修改
      var picWidth = 1170;//图片的宽度,根据实际修改
      var picMaxWidth = -1 * picNum * picWidth;
      var currentPic = 1;
      var next = $('#next');
      var prev = $('#prev');
      var flag = false;
    
      prev.on('click',function(){
        if(!flag){
          calPx(1170);
          currentPic--;
          if (currentPic < 1) {
            currentPic = picNum;
          }
          $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
        }
      });
    
      next.on('click',function(){
        if(!flag){
          calPx(-1170);
          currentPic  ;
          if (currentPic > picNum) {
            currentPic = 1;
          }
          $('#buttons span').eq(currentPic-1).addClass('on').siblings().removeClass('on');
        }
    
    
      });
      $('.banner').on('mouseover',function(){
        stop();
      }).on('mouseout',function(){
        play();
      })
      function nextClick(){
        next.click();
      }
      function play(){
        setInt = setInterval(nextClick,2000);
      }
      function stop(){
        clearInterval(setInt);
      }
    
      function calPx(leftPx){
        flag = true;
        var left = parseInt($('.pic-list').css('left'));
        var newLeft = left leftPx;
        var time = 300;
        var interval = 10;
        var speed = leftPx/(time/interval);
    
        function go(){
          var left = parseInt($('.pic-list').css('left'));
          if((speed < 0 && left > newLeft) || (speed > 0 && left < newLeft)){
            $('.pic-list').css('left', (left   speed)   'px');
            setTimeout(go,interval);
          }else{
            flag = false;
            if( newLeft > -1170){
              newLeft = picMaxWidth;
            }else if (newLeft < picMaxWidth ) {
              newLeft = -1170;
            }
            $('.pic-list').css('left',newLeft   'px');
          }
        }
        go();
    
      }
      play();
    
    });
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:

    • 12款经典的白富美型—jquery图片轮播插件—前端开发必备
    • 原生js和jquery实现图片轮播特效
    • jQuery图片轮播的具体实现
    • Jquery代码实现图片轮播效果(一)
    • 基于JQuery的实现图片轮播效果(焦点图)
    • 原生js和jquery实现图片轮播淡入淡出效果
    • 基于jquery的图片轮播 tab切换组件
    • jQuery插件slicebox实现3D动画图片轮播切换特效
    • jQuery手动点击实现图片轮播特效
    • 基于jQuery实现左右图片轮播(原理通用)

    本文由88bifa必发唯一官网发布于必发88首页,转载请注明出处:支付进度中必要用到图片轮播的插件

    关键词: 必发88首页

上一篇:在原生开发中为了适应更多的场景

下一篇:没有了