JS 轮播图(无缝连接的轮播图实现,含代码供参考)

Posted kindmonster

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 轮播图(无缝连接的轮播图实现,含代码供参考)相关的知识,希望对你有一定的参考价值。

需求:实现轮播图,图片无缝切换,自动播放。

  实现效果:

技术图片技术图片

 

   思考一下:在图片列表后面多加一张图片,这张图片是第一张图片(为了确保无缝衔接)。图片就是平铺放在一个pic里面的,每次移动就是改变的pic的left值。

        技术图片

  来撸代码~~。所有的代码放在最后面,这里只讲一些重要的方法:

 为防止懵逼:先贴出封装函数move()的代码供参考

function move(ele, attr, speed, target, callback){
   //获取当前的位置
   //从左往右进行移动 --- current<target speed
   //从右往左进行移动 --- current>target -speed
   var current = parseInt(getStyle(ele, attr));
   //   810 > 800
   if(current>target){
	   speed = -speed;
   }
   
   //定时器累加问题 --- 先清除再开启
   clearInterval(ele.timer);

   ele.timer = setInterval(function(){
	   //获取元素的现在位置
	   var begin = parseInt(getStyle(ele, attr));
	   //步长
	   var step = begin + speed;
	   
	   //判断当step>800, 让step = 800
	   //从左往右进行移动 --- speed>0 正值
	   //从右往左进行移动 --- speed<0 负值
	   //   -10              0            10           超过800直接变成  800
	   if(speed<0 && step<target || speed>0 && step>target){
		   step = target;
	   }
	   
	   //赋值元素
	   ele.style[attr] = step + "px";
	   
	   //让元素到达目标值时停止 800px
	   if(step == target){
		   clearInterval(ele.timer);
		   //当move函数执行完毕后, 就执行它了
		   //当条件都满足时才执行callback回调函数
		   callback && callback();
	   }

   },30)//步长是30
}

 

  第一步:我们先来实现那个圆形按钮的点击事件。 //说明一下,setBtn();是设置按钮的背景跟随。技术图片像这样。

          技术图片

 

 

 第二步:实现左右两个按钮的点击事件

先做右边的点击事件,实现

//onNext
            function Next(){
                index ++;
         //len 指的是图片的数组的个数 - 2 因为span按钮只有5个,索引从0到4
if(index > len) { index = 0; } // - 移动单张图片的宽度 * index 回调函数 move(pic,"left",20,-index * lis[0].offsetWidth,setBtn); }

做左边的点击事件,实现

function Pre(){
                //全局的索引值 减1 
                index --;
                if(index < 0 )
                {
                    index = len - 1;
                    pic.style.left = -len * lis[0].offsetWidth + "px";
                    
                }
                //没有使用回调函数 是为了做一个返回去的效果.
                move(pic,"left",20,-index * lis[0].offsetWidth);
                //按钮背景跟随
                setBtn();
            }

 

自动轮播,实现:

//自动轮播
            function autoPlay(){
                timer = setInterval(function(){
                    Next();
                },3000);
            }

 

所有代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .slider{
                width: 500px;
                height: 300px;
                border: 1px solid;
                margin: 50px auto;
                position: relative;
                /* overflow: hidden; */
            }
            .slider .pic{
                /* width: 500px; */
                /* width: calc(500px*6); */
                height: 300px;
                position: absolute;
                left: 0;
            }
            .slider .pic li{
                width: 500px;
                height: 300px;
                list-style: none;
                float: left;
            }
            .slider .pic li img{
                width: 100%;
                height: 100%;
            }
            .slider .btn{
                width: 150px;
                height: 20px;
                position: relative;
                margin: 0 auto;
                top: 260px;
            }
            .slider .btn span{
                float: left;
                width: 20px;
                height: 20px;
                background-color: #000000;
                color: #fff;
                border-radius:50%;
                font-size: 12px;
                text-align: center;
                line-height: 20px;
                margin: 0 5px;
                cursor: pointer;
            }
            .bigBtn{
                width: 100%;
                height: 50px;
                position: absolute;
                top: 50%;
                margin-top: -25px;
            }
            .bigBtn div{
                width: 50px;
                height: 50px;
                background-color: #000000;
                color: #fff;
                font-size: 30px;
                text-align: center;
                line-height: 50px;
                cursor: pointer;
            }
            .bigBtn div:nth-child(1){
                float: left;
            }
            .bigBtn div:nth-child(2){
                float: right;
            }
            .bg{
                background-color: greenyellow !important;
            }
            #sliderBox{
                margin: 0 auto;
                width: 500px;
                height: 300px;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="slider">
            <div id="sliderBox">
                <div class="pic">
                    <ul>
                        <li><img src="img/pic1.jpg" ></li>
                        <li><img src="img/pic2.jpg" ></li>
                        <li><img src="img/pic3.jpg" ></li>
                        <li><img src="img/pic4.jpg" ></li>
                        <li><img src="img/pic5.jpg" ></li>
                        <li><img src="img/pic1.jpg" ></li>
                    </ul>
                </div>
            </div>
            <div class="btn">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
            <div class="bigBtn">
                <div class="previous">&lt;</div>
                <div class="next">&gt;</div>
            </div>
        </div>
        <script src="js/move.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //获取所有元素
            let slider = document.querySelector(".slider")
            let lis = document.querySelectorAll("li");
            let spanBtns = document.querySelectorAll(".btn span");
            let previous = document.querySelector(".previous");
            let next = document.querySelector(".next");
            let pic = document.querySelector(".pic");
            //设置元素的索引值 全局索引
            var index = 0;
            //图片数组的长度  4
            let len = lis.length - 1 ;
            //设置初始pic长度.
            pic.style.width = (len + 2)*parseInt(getStyle(lis[0],"width"))+ "px";
            //设置定时器
            let timer = null;
            // 圆形按钮点击事件 使用的是let变量,即不会发生先循环完毕,再执行事件
            for(let j = 0 ; j < len ; j++)
            {
                //spanBtns就是存圆形按钮元素的数组.  index是全局的一个值,用来作为索引值.
                spanBtns[j].onclick = function(){
                    index = j; 
                    //这里使用了一个封装的移动函数. 
                    //第一个参数值是需要改变的元素,第二个是属性
                    //第三个是步长. 第四个是目标位置. 第五个参数是回调函数.
                    move(pic,"left",20,-index*lis[0].offsetWidth,function(){
                        setBtn();
                    });
                }
            }
            function setBtn(){
                if(index >= len)
                {
                    index = 0;
                    pic.style.left = 0;
                }
                for(var i = 0 ; i < len ; i++)
                {
                    spanBtns[i].className = "";
                }
                spanBtns[index].className = "bg";
            }
            //onNext
            function Next(){
                index ++;
                if(index > len)
                {
                    index = 0;
                }
                //                   - 移动单张图片的宽度 * index   回调函数
                move(pic,"left",20,-index * lis[0].offsetWidth,setBtn);
            }
            function Pre(){
                //全局的索引值 减1 
                index --;
                if(index < 0 )
                {
                    index = len - 1;
                    pic.style.left = -len * lis[0].offsetWidth + "px";
                    
                }
                //没有使用回调函数 是为了做一个返回去的效果.
                move(pic,"left",20,-index * lis[0].offsetWidth);
                //按钮背景跟随
                setBtn();
            }
            //绑定点击事件
            previous.onclick = Pre;
            next.onclick = Next;
            
            slider.onmouseover = function(){
                clearInterval(timer);
            }
            slider.onmouseout = function(){
                autoPlay();
            }
            //自动轮播
            function autoPlay(){
                timer = setInterval(function(){
                    Next();
                },3000);
            }
            setBtn();
            autoPlay();
        </script>
    </body>
</html>

引用的js文件:

/*
    封装move函数
    
    ele 要传递的元素
    
    attr 属性 --- 字符串
    
    speed  速度  正负值
    
    target 目标值(结束位置)
    
    callback 回调函数 --- 当这个函数执行完毕后,再去调用它
*/
function move(ele, attr, speed, target, callback){
   //获取当前的位置
   //从左往右进行移动 --- current<target speed
   //从右往左进行移动 --- current>target -speed
   var current = parseInt(getStyle(ele, attr));
   //   810 > 800
   if(current>target){
       speed = -speed;
   }
   
   //定时器累加问题 --- 先清除再开启
   clearInterval(ele.timer);

   ele.timer = setInterval(function(){
       //获取元素的现在位置
       var begin = parseInt(getStyle(ele, attr));
       //步长
       var step = begin + speed;
       
       //判断当step>800, 让step = 800
       //从左往右进行移动 --- speed>0 正值
       //从右往左进行移动 --- speed<0 负值
       //   -10              0            10           超过800直接变成  800
       if(speed<0 && step<target || speed>0 && step>target){
           step = target;
       }
       
       //赋值元素
       ele.style[attr] = step + "px";
       
       //让元素到达目标值时停止 800px
       if(step == target){
           clearInterval(ele.timer);
           //当move函数执行完毕后, 就执行它了
           //当条件都满足时才执行callback回调函数
           callback && callback();
       }

   },30)
}

//获取元素的方式 --- 注意点:如果在IE浏览器下, 要指定默认的值, 如果不指定获取的是auto
function getStyle(obj, name){
   if(window.getComputedStyle){
       return getComputedStyle(obj, null)[name];
   }else{
       return obj.currentStyle[name];
   }
}

 

要移植使用的话,新建一个move.js 将最下面的代码拷进去 放在js文件夹下。 

技术图片 类似这样的目录即可。

 

下次的博客一定会写更好的。加油。

 

以上是关于JS 轮播图(无缝连接的轮播图实现,含代码供参考)的主要内容,如果未能解决你的问题,请参考以下文章

带无缝滚动的轮播图(含JS运动框架)-简洁版

js实现效果:循环轮播图

JavaScript实现的轮播图

js实现左右切换轮播图思路

手机的轮播图可以用jquery来做吗

简单轮播图的实现及原理讲解(js)