使用JS实现轮播图的效果

Posted 2020-08-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JS实现轮播图的效果相关的知识，希望对你有一定的参考价值。

其中的一些css样式代码就省略了，下面只把结构层html、行为层js的代码展示出来，看代码说事。

一、简单的轮播图

<div class="box" id="box">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>

<script>
    //获得要操作的对象
    var box = document.getElementById("box");
    var inner = box.children[0];
    var ul = inner.children[0];
    var square = inner.children[1];
    var spans = square.children;     //所有的字级元素
    var imgWidth = inner.offsetWidth;


    //循环遍历span标签
    for(var i=0;i<spans.length;i++){
        spans[i].index = i;
        spans[i].onmouseover = function(){
            for(var j=0;j<spans.length;j++){
                spans[j].className = "";
            }
            this.className = "current";
            var target = -imgWidth*this.index;
            sports(ul,target);
        }
    }



    //运动函数的封装
    function sports(obj,target){
        clearInterval(obj.timeId);  //，每次点击时先清空计时器
        obj.timeId =  setInterval(function(){
            var step =10;
            var leader = obj.offsetLeft;  //先获得当前的距离左侧的位置
//
            step = leader<target?step:-step;

            if(Math.abs(leader-target) > Math.abs(step)){
                leader = leader+step;
                obj.style.left = leader + "px";
            }else{
                clearInterval(obj.timeId);  //清除计时器
                obj.style.left = target+"px";
            }
        },10);
    }
</script>

二、左右焦点轮播图

<div id="box" class="all">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" alt=""/></li>
            <li><img src="images/2.jpg" alt=""/></li>
            <li><img src="images/3.jpg" alt=""/></li>
            <li><img src="images/4.jpg" alt=""/></li>
            <li><img src="images/5.jpg" alt=""/></li>
        </ul>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

<script>
    //获取要操作对象
    var box = document.getElementById("box");
    var ad  = box.children[0];
    var ul = document.getElementById("imgs");
    var arr = document.getElementById("arr");
    var arrLeft = document.getElementById("left");
    var arrRight = document.getElementById("right");
    var imgWidth = ad.offsetWidth;
    var lis = ul.children;

    //鼠标移入大盒子时显示按钮
    box.onmouseover = function(){
        arr.style.display ="block";
    }
    box.onmouseout = function(){
        arr.style.display = "none";  //鼠标离开大盒子时隐藏按钮
    }

    //给左右按钮注册单击事件
    var pic=0;  //重新定义一个变量，来标识图片的个数或索引
    arrRight.onclick = function(){
        if(pic<lis.length-1){
            pic++;
        }
        var target = -imgWidth*pic;
        sports(ul,target);
    }
    arrLeft.onclick =function(){
        if(pic>0){
            pic--;
        }
        var target = -imgWidth*pic;
        sports(ul,target);
    }



    //运动函数的封装
    function sports(obj,target){
        clearInterval(obj.timeId);  //，每次点击时先清空计时器
        obj.timeId =  setInterval(function(){
            var step =10;
            var leader = obj.offsetLeft;  //先获得当前的距离左侧的位置
//
            step = leader<target?step:-step;

            if(Math.abs(leader-target) > Math.abs(step)){
                leader = leader+step;
                obj.style.left = leader + "px";
            }else{
                clearInterval(obj.timeId);  //清除计时器
                obj.style.left = target+"px";
            }
        },10);
    }
</script>

三、无缝滚动原理轮播图

<div class="box" id="screen">
    <ul>
        <li><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="images/01.jpg" alt=""/></li>
    </ul>
</div>

<script>
    //获得要操作的对象
    var box = document.getElementById("screen");
    var ul = box.children[0];
    var lis = ul.children;
    var imgWidth = ul.offsetWidth;
    var timeId =null;

//    timeId = setInterval(function(){
//        var leader = ul.offsetLeft;
//        var step = -10;
//        if(leader>-1200){
//            leader = leader + step;
//            ul.style.left = leader + ‘px‘;
//        }else{
//            ul.style.left = "0px";
//        }
//    },60)
    timeId = setInterval(play,60);

    //鼠标移入大盒子时，清除计时器
    box.onmouseover = function(){
        clearInterval(timeId);
    }
    //鼠标离开大盒子时，重新开启计时器
    box.onmouseout = function(){
//        timeId = setInterval(function(){
//            var leader = ul.offsetLeft;
//            var step = -10;
//            leader = leader + step;
//            ul.style.left = leader + ‘px‘;
//        },60)
        timeId = setInterval(play,60);
    }

    //封装函数
    function play(){
        var leader = ul.offsetLeft;
        var step = -10;
        if(leader>-1200){
            leader= leader + step;
            ul.style.left = leader + ‘px‘;
        }else{
            ul.style.left = "0px";
        }
    }


</script>

四、完整的轮播图

<div id="box" class="all" >
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/2.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/3.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/4.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/5.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
        </ul>
        <ol></ol>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>

/**
 * Created by Administrator on 2016/8/25.
 */
/**
 * 封装了一个匀速运动函数
 * @param obj
 * @param target
 */
function animate(obj,target){
    clearInterval(obj.timerId);
    obj.timerId = setInterval(function(){
        var leader = obj.offsetLeft;
        var step = 10;
        step = leader<target?step:-step;
        if(Math.abs(leader-target) > Math.abs(step)){
            leader = leader + step;
            obj.style.left = leader + ‘px‘;
        }else{
            clearInterval(obj.timerId);
            obj.style.left = target + ‘px‘;
        }
    },15)
}


/**
 * 封装了一个滚动函数
 */
function play(){
    var leader = ul.offsetLeft;
    var step = -10;
    if(leader>=-1200){
        leader = leader + step;
        ul.style.left = leader + ‘px‘;
    }else{
        ul.style.left = "0px";
    }
}

<script src="common.js"></script>
<script>
    // 1. 先获取要操作的对象
    var box = document.getElementById("box");
    var ad = box.children[0];
    var ul = document.getElementById("imgs");
    var lis = ul.children;
    var ol = ad.children[1];
    var arr = document.getElementById("arr");
    var arrLeft = document.getElementById("left");
    var arrRight = document.getElementById("right");
    var imgWidth = ad.offsetWidth;

    var timerId = null;
    // 2. 根据图片的个数动态的生成小按钮
    for(var i=0;i<lis.length;i++){
        var li = document.createElement("li");
        li.innerhtml = i+1;
        ol.appendChild(li);
    }

    // 3. 获得所有的ol下的li，然后让第一个变成黄色
    var olLis = ol.children;
    olLis[0].className = "current";

    // 4. 当鼠标移入的时候，对应的小方块显示出来
    for(var j=0;j<olLis.length;j++){
        olLis[j].index = j;
        olLis[j].onmouseover = function(){
            for(var k=0; k<olLis.length;k++){
                olLis[k].className = "";
            }
            this.className = "current";
            var target = -imgWidth*this.index;// 5. 让图片移动对应的小方块索引的图片宽度的距离  如果小方块的索引为0，则让ul移动0个图片的距离
            animate(ul,target);                //如果小方块的索引为1，就让ul移动1个图片宽度的距离
            //让三者的显示状态同步或是统一起来
            pic = square=this.index;   //让三者的索引值统一起来
        }
    }

    // 6. 鼠标移入的时候，显示左右按钮并注册点击事件
    box.onmouseover = function(){
        arr.style.display = "block";
        clearInterval(timerId);   //清除定时器
    }
    box.onmouseout = function(){
        arr.style.display = "";
        timerId = setInterval(playNext,1000);
    }

    // 8. 动态添加第一张图片到最后的位置
    var imgFirst = lis[0].cloneNode(true);
    ul.appendChild(imgFirst);


    // 7. 给左右按钮注册点击事件
    var pic=0;   //定义一个变量来表示移动的图片个数 也相当于索引
    var square =0;   //默认显示的小方块的索引
    arrRight.onclick = function(){
//        if(pic==lis.length-1){
//            pic=0;   //迅速的让索引编号 等于0
//            ul.style.left = "0px";  // 让ul快速的恢复成原来的位置
//        }
//        pic++;
//        var target = -imgWidth*pic;
//        sports(ul,target);
//
//        if(square<olLis.length-1){
//            square++;
//        }else{
//            square=0;
//        }
//        for(var i=0;i<olLis.length;i++){
//            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
//        }
//        olLis[square].className = "current";
        playNext();
    }

    arrLeft.onclick =function(){
        if(pic==0){
            pic=lis.length-1;
            ul.style.left = -imgWidth*pic + "px";
        }
        pic--;
        var target = -imgWidth*pic;
        animate(ul,target);
        if(square>0){
            square--;
        }else{
            square = olLis.length-1
        }
        for(var i=0;i<olLis.length;i++){
            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
        }
        olLis[square].className = "current";
    }


    //添加自动轮播功能
    timerId = setInterval(playNext,1000);

    function playNext(){
        if(pic==lis.length-1){
            pic=0;   //迅速的让索引编号 等于0
            ul.style.left = "0px";  // 让ul快速的恢复成原来的位置
        }
        pic++;
        var target = -imgWidth*pic;
        animate(ul,target);
        if(square<olLis.length-1){
            square++;
        }else{
            square=0;
        }
        for(var i=0;i<olLis.length;i++){
            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
        }
        olLis[square].className = "current";
    }

</script>

以上是关于使用JS实现轮播图的效果的主要内容，如果未能解决你的问题，请参考以下文章

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

简单轮播图的实现及原理讲解（js）

CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）

Vue实现轮播图

Android使用ViewPager实现轮播图（自动和手动）

原生JS实现过渡效果的轮播图