这是一款jquery图片左右滚动的插件，可选图片是否自动滚动，是否显示左右箭头，图片显示的数量、滚动的时间都可以用参数配置，是一款最简单好用的图片左右滚动代码。

jQuery图片左右自动滚动插件可选箭头



bxCarousel参数说明

move：每次滚动移动图片的数量，默认为4。

display_num：展示图片的数量，默认为4。

speed：图片滚动速度，默认为500毫秒。

margin：图片间的间距，默认为0。

auto：是否自动滚动，默认为false。

auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。

auto_dir：自动滚动的方向，默认为next，你可以试下prev。

next_image：向右滚方向按钮图片，可以用CSS设置。

prev_image：向左滚方向按钮图片，可以用CSS设置。

auto_hover：滚动时，鼠标滑上图片时是否停止滚动，默认为false。

controls：是否显示左右滚动按钮图片，默认为true。 


这是目前青岛星网觉得最好用的一个图片左右滚动插件了，配置也超简单，使用超方便哦。

一 效果图



需求是我自己要自定义左右切换的箭头图片，每个页面里面显示6组数据。

二 上代码

:autoplay="false" 不需要自动轮播

arrow="never"  不需要自带的箭头

indicator-position="none"  不需要底部的指示器

重点在于 ref=“cardShow”调用方法



<div class="leftArrow">
      <img src="@/assets/img/survey/boardItem/left.png" v-if="currentPage" @click="arrowClick('left')" />
    </div>

<el-carousel  :autoplay="false" height="72px" arrow="never" indicator-position="none" ref="cardShow" >
       <el-carousel-item v-for="itemPage in pageLength" :key="itemPage">
          <el-row>
            <el-col :span="4" v-for="(item, index) in list" :key="index">
              <img :src="item.carImg" style="width: 70px; height: 40px"/>
              <!-- <div> {{ item.carName +  itemPage }} </div>  -->
            </el-col>
          </el-row>
        </el-carousel-item>
</el-carousel>

    <div class="rightArrow">
      <img src="@/assets/img/survey/boardItem/right.png" @click="arrowClick('right')" v-if="pageLength !== currentPage + 1"/>
    </div>

arrowClick(val) {
      if(val === 'right') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
    },

上面有个pageLength方法，就是需要前端自己处理一下分页，比如6条一页前端自己处理一下分页。

flex布局处理

具体可以参考我这篇文章https://blog.csdn.net/sunnyboysix/article/details/105946134有前端自己处理分页方法，自己处理一下数据结构就ok了。

 

加油加油加油

实现效果: 

1.图片能够自动轮播. 

2.移入图片时自动轮播停止,并且有左右两个箭头. 

3.图片下方有一排按钮,可以点击进行切换，并且按钮的样式也随之切换.

代码如下: 

html+css:



*{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
        }
        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 800px;
            height: 500px;
            overflow: hidden;
        }
        .list{
            position: absolute;
            width: 5600px;
            height: 500px;
            z-index: 1;
        }
        .list img{
            float: left;
            width: 800px;
            height: 500px;
        }
        .buttons{
            position: absolute;
            left: 50%;
            bottom: 20px;
            margin-left: -90px;
            width: 180px;
            text-align: center;
            cursor: pointer;
            z-index: 2;
        }
        .buttons span{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border-radius: 50%;
            background: #aaa;
            border: 1px solid #fff;
        }
        .buttons span:last-child{
            margin-right: 0;
        }
        .buttons .on{
            background: #000;
        }
        .arrow{
            display: none;
            position: absolute;
            top: 230px;
            width: 40px;
            height: 40px;
            background: rgba(0,0,0,0.4);
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            color: #fff;
            z-index: 2;
        }
        .container:hover .arrow{
            display: block;
        }
        #pre{
            left: 0;
        }
        #next{
            right: 0;
        }

js:



(function shuff(){
        function $(id) {
            return document.getElementById(id);
        }
        /*index是为了确定当前图层坐标,animated是为了使运动过程中的点击失效*/
        var list=$("list"),
            pre=$("pre"),
            next=$("next"),
            index=1,
            animated=true,
            timer,
            button=$("buttons"),
            buttons=$("buttons").getElementsByTagName("span"),
            container=$("container");
         /*
         *运动函数
         *time为图层转换一次的时间
         */
        function animate(len) {
            animated=false; 
            var newLeft=parseInt(list.style.left)+len;
            var time=300;
            var interval=10;
            var speed=len/(time/interval);
            (function move(){
                if ((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)) {
                    list.style.left=parseInt(list.style.left)+speed+"px";
                    setTimeout(move,interval);
                }else{
                    list.style.left=newLeft+"px";
                    if (newLeft>-800) {
                        list.style.left=-4000+"px";
                    }
                    if (newLeft<-4000) {
                        list.style.left=-800+"px";
                    }
                    animated=true;
                }
            })();
        }
        /*按钮点击样式变化*/
        function showButton(){
            for(var i=0;i<buttons.length;i++){
                buttons[i].className="";
            }
            buttons[index-1].className="on";
        }
        /*按钮点击函数*/
        function buttonListen(){
            if (!animated) {
                return;
            }
            var spanIndex=parseInt(this.getAttribute("index"));
            var diff=spanIndex-index;
            animate(diff*(-800));
            index=spanIndex;
            showButton();
        }
        /*自动轮播函数*/
        function play(){
            timer=setInterval(function(){
                nextListen();
            },3000);
        }
        /*暂停轮播函数*/
        function suspend(){
            clearInterval(timer);
        }
        /*左箭头点击函数*/
        function preListen(){
            if (!animated) {
                return;
            }
            if (index==1) {
                index=5;
            }else{
                index--;
            }
            animate(800);
            showButton();
        }
        /*右箭头点击函数*/
        function nextListen(){
            if (!animated) {
                return;
            }
            if(index==5){
                index=1;
            }else{
                index++;
            }
            animate(-800);
            showButton();
        }
        function start(){
            container.addEventListener('mouseenter',suspend,false);
            container.addEventListener('mouseleave',play,false);
            button.addEventListener('click',function(event){
                if (event.target&&event.target.tagName.toLowerCase()=="span") {
                        buttonListen.call(event.target);
                }
            },false);
            pre.addEventListener('click',preListen,false);
            next.addEventListener('click',nextListen,false);
            play();
        }   
        start();
    })();

思路： 

1.为了左右移动轮播顺畅，所以第一张图前插上最后一张图,最后一张图插上第一张图.让所有图片float:left;每张图片的宽度设置为800;最外层为一个id为container的容器,设置它的宽为800,overflow:hidden;水平垂直居中.

2.animate(len)是运动函数,先计算出当前list的left值,time为滑过一张图总共所需的时间,interval是滑过一张图时每次滑动的时间,speed为每次移动的距离,当移动的距离小于len时，setTimeout(move,interval);当left距离小于4000时,图片回到原位.

function animate(len) {
            animated=false; 
            var newLeft=parseInt(list.style.left)+len;
            var time=300;
            var interval=10;
            var speed=len/(time/interval);
            (function move(){
                if ((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)) {
                    list.style.left=parseInt(list.style.left)+speed+"px";
                    setTimeout(move,interval);
                }else{
                    list.style.left=newLeft+"px";
                    if (newLeft>-800) {
                        list.style.left=-4000+"px";
                    }
                    if (newLeft<-4000) {
                        list.style.left=-800+"px";
                    }
                    animated=true;
                }
            })();
        }

3.创建animated的目的是当图片移动时,点击下方按钮和左右移动按钮无效.index是为了记录当前图片的索引,在每一个span按钮上也设置了index属性.在buttonListen函数中写入showButton()来渲染按钮.

function buttonListen(){
            if (!animated) {
                return;
            }
            var spanIndex=parseInt(this.getAttribute("index"));
            var diff=spanIndex-index;
            animate(diff*(-800));
            index=spanIndex;
            showButton();
        }

4.nextListen()为右箭头点击事件,每调用一次,index++,animate(-800),向右移动800,当index=5时,将index重置为1,并且也要调用showButton()对按钮进行渲染. 

5.play()函数内创建一个setInterval,不间断调用nextListen,达到无限向右自动轮播的效果.

给大家分享下常见 的左右切换式轮播图； 
一、页面结构 

对于左右切换式的轮播图的结构主要分为以下几个部分： 

1、首先是个外围部分（其实也就是最外边的整体wrapper) 

2、其次就是你设置图片轮播的地方（也就是一个container吧） 

3、然后是一个图片组（可以用新的div 也可以直接使用 ul–>li形式） 

4、然后是图片两端的左箭头和右箭头 

7、然后是一个按钮层，用来定位图片组的index吧,一般放在图片的下方(div 或 ul–>li)



<div id="warpper">
        <div class="container">
            <!-- 图片区域 -->
            <ul class="imgList">
                <li><img src="./images/img1.jpg" alt=""></li>
                <li><img src="./images/img2.jpg" alt=""></li>
                <li><img src="./images/img3.jpg" alt=""></li>
                <li><img src="./images/img4.jpg" alt=""></li>
                <li><img src="./images/img5.jpg" alt=""></li>
                <li><img src="./images/img6.jpg" alt=""></li>
            </ul>
            <!-- 左右切换图标 -->
            <img src="./images/pre.png" width="40px" height="60px" class="pre">
            <img src="./images/next.png" width="40px" height="60px" class="next">
            <!-- 下方控制图片按钮 -->       
            <ul class="dollList">
                <li class="sec"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div> 
    </div>

二、CSS样式 

左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限container宽度下隐藏超出宽度的部分;然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现 

比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-800px 处理;;



<style>
        *{ margin: 0; padding: 0; }
        ul{ list-style: none; }
        a{ text-decoration: none; }

        #warpper{ width: 800px; height: 600px; margin: 20px auto;}
        .container{ width: 100%; height: 100%; overflow: hidden; position: relative; }

        .imgList{ width: 4800px; position: absolute; z-index: 5; }
        .imgList>li{ float: left; width: 800px; height: 600px; }
        .imgList>li>img{ width: 100%; height: 100%; }

        .pre,.next{ position: absolute; top: 275px; background: rgba(220,220,220,0.7); padding: 10px 0; z-index: 100; opacity: 0.6; filter: alpha(opacity=60); }
        .pre:hover,.next:hover{ cursor: pointer; opacity: 1; filter: alpha(opacity=100); }
        .pre{ left: 10px; }
        .next{ right: 10px; }

        .dollList{ width:180px;  position: absolute; z-index: 10; bottom: 20px; left: 310px ; }
        .dollList li{ float: left; margin-right: 10px; }
        .dollList li.sec a{ background: orange; }
        .dollList li a{ width: 15px; height: 15px; background: rgba(230,230,230,0.6); border-radius: 50%; display: inline-block;  }
</style>

三、JS处理 
（1）jquery处理：



    <script>
        $(function(){
            //设置全局变量
            var cur = 0;    //当前的图片序号
                imgLen = $(".imgList li").length;  //获取图片的数量
                timer = null;   //设置定时定时器的名字，方便后面关闭

            //当鼠标移到向左和向右的图标上关闭定时器，离开时则重置定时器
            $(".pre,.next").hover(function(){
                clearInterval( timer );
            },function(){
                changeImg( );
            });

            //当鼠标移到图片上关闭定时器，离开时则重置定时器
            $(".imgList").hover(function(){
                clearInterval( timer );
            },function(){
                changeImg( );
            });

            //点击向左图标根据cur进行上一个图片处理
            $(".pre").click(function(){
                cur = cur>0 ? (--cur) : (imgLen-1);
                changeTo( cur );
            });

            //点击向右图标根据cur进行上一个图片处理
            $(".next").click(function(){
                cur = cur<( imgLen-1 ) ? (++cur) : 0;
                changeTo( cur );
            });

            //为下方的圆点按钮绑定事件
            $(".dollList li").hover(function(){
                clearInterval(timer);
                var index = $(this).index();
                cur = index
                changeTo(cur);
            },function(){
                changeImg();
            });

            //封装图片自动播放函数
            function changeImg(){

                timer = setInterval(function(){
                    if( cur<imgLen-1 ){
                        cur++;
                    }else{
                        cur=0;
                    }
                    changeTo( cur );
                },2000);        
            }

            //调用函数
            changeImg();

            //图片切换函数
            function changeTo( num ){
                var go = num*800;
                $(".imgList").animate({ "left" : -go },500);
                $(".dollList").find("li").removeClass("sec").eq(num).addClass("sec");

            }

        });
    </script>

jquery这样就能实现左右切换式轮播图了，简便，原生JS代码量就有些多了； 
（2）原生JS处理：



<script>
    var cur = 0, //当前的图片序号
      imgLis = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //获取图片组
      imgLen = imgLis.length,   //获取图片的数量
      timer = null; //设置定时定时器的名字，方便后面关闭
      dollLis = getElementsByClassName("dollList")[0].getElementsByTagName("li"); //获取下方圆点

  //封装图片自动播放函数
  function changeImg(){ 
      timer = setInterval(function(){ 
        if(cur < imgLen -1){ 
          cur ++;
        }else{ 
        cur = 0;
        }
        //调用变换处理函数
        changeTo(cur); 
      },2500);
  }
  changeImg();


  //调用添加事件处理
  addEvent();

  //给左右箭头和右下角的图片index添加事件处理
 function addEvent(){
  for(var i=0;i<imgLen;i++){ 
    //闭包防止作用域内活动对象item的影响
    (function(_i){ 
    //鼠标滑过则清除定时器，并作变换处理
    dollLis[_i].onmouseover = function(){ 
      clearTimeout(timer);
      changeTo(_i);
      cur = _i;
    };
    //鼠标滑出则重置定时器处理
    dollLis[_i].onmouseout = function(){ 
      changeImg();
    };
     })(i);
  }

  //给左箭头prev添加上一个事件
  var pre = getElementsByClassName("pre")[0];
  pre.onmouseover = function(){ 
    //滑入清除定时器
    clearIntervcural(timer);
  };
  pre.onclick = function(){ 
    //根据curIndex进行上一个图片处理
    cur = (cur > 0) ? (--cur) : (imgLen - 1);
    changeTo(cur);
  };
  pre.onmouseout = function(){ 
    //滑出则重置定时器
    changeImg();
  };

   //给右箭头next添加下一个事件
  var next = getElementsByClassName("next")[0];
  next.onmouseover = function(){ 
    clearInterval(timercur);
  };
  next.onclick = function(){ 
    cur = (cur < imgLen - 1) ? (++cur) : 0;
    changeTo(cur);
  };
  next.onmouseout = function(){ 
    changeImg();
  };
}

  //左右切换处理函数
  function changeTo(num){ 
    //设置image
    var imgList = getElementsByClassName("imgList")[0];
    goLeft(imgList,num*800); //左移一定距离

    //设置image的控制下标 index
    var _curIndex = getElementsByClassName("sec")[0];
    removeClass(_curIndex,"sec");
    addClass(dollLis[num],"sec");
  }


  //图片组相对原始左移dist px距离
  function goLeft(elem,dist){ 
    if(dist == 800){ //第一次时设置left为0px 或者直接使用内嵌法 style="left:0;"
      elem.style.left = "0px";
    }
    var toLeft; //判断图片移动方向是否为左
    dist = dist + parseInt(elem.style.left); //图片组相对当前移动距离
    if(dist<0){  
      toLeft = false;
      dist = Math.abs(dist);
    }else{ 
      toLeft = true;
    }
    for(var i=0;i<= dist/20;i++){ //这里设定缓慢移动，10阶每阶80px
      (function(_i){ 
        var pos = parseInt(elem.style.left); //获取当前left
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根据toLeft值指定图片组位置改变
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每阶间隔50毫秒
      })(i);
    }
  }
</script>


注：getElementsByClassName()是我在另外一个js文件里封装的函数，可以参考我的另一篇博客： JS封装通过className获取元素的函数 

以上就是关于Jquery和纯JS实现轮播图–左右切换式的内容了。