原生 js 左右切换轮播图

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生 js 左右切换轮播图相关的知识，希望对你有一定的参考价值。

使用方法：
可能很多人对轮播图感兴趣，下面奉上本人的 原生 js 轮播代码
复制 js 到页面的最底部，样式在 css 里改，js 基本不用动，有什么不懂的可以 加本人 QQ172360937 咨询 或者留言都可以，这个是用 原生写的 轮播图，样式可以写自己喜欢的样式，什么都不用改，只改变样式就行，页面结构的id 要与js的相对应li随便加。li 随便加的意思就是说你可以加无数个图片。每个li 里装一个图片，或者是其他什么元素，

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{padding:0;margin:0;}
        div{
            width:200px;/*必须有*/
            height:50px;/*必须有*/
            position:relative;/*必须有===*/
            overflow:hidden;/*必须有===*/
            -webkit-user-select: none;/*必须有*/
            -moz-user-select: none;/*必须有*/
            -ms-user-select: none;/*必须有*/
            user-select: none;/*必须有*/
            margin:20px;
        }
        ul{
            position:absolute;/*必须有*/
            left:0;/*必须有*/
            font-size:0;/*必须有*/

        }
        li{list-style: none;/*必须有*/
            font-size:16px;/*必须有*/
            height:50px;/*必须有*/
            width:200px;/*必须有*/
            float:left;/*必须有*/
        }
        #parent{
            width:50%;
            height:200px;
            border:1px solid red;
            margin:0 auto;
        }
        .span{
            display:inline-block;/*必须有*/
            width:20px;
            height:20px;
            line-height:20px;
            text-align: center;
            border-radius:50%;
            color:white;
            cursor:pointer;/*必须有*/
        }
    </style>
</head>
<body>
<div id="parent">
    <div>
        <ul id=‘ul‘>
            <li style=‘background:red;‘>第一个</li>
            <li style=‘background:yellow;‘>第二个</li>
            <li style=‘background:pink;‘>第三个</li>
            <li style=‘background:green;‘>第四个</li>
            <li style=‘background:blue;‘>第五个</li>
            <li style=‘background:blue;‘>第6个</li>
            <li style=‘background:green;‘>第7个</li>
            <li style=‘background:blue;‘>第8个</li>
            <li style=‘background:green;‘>第9个</li>
            <li style=‘background:blue;‘>第10个</li>
        </ul>
    </div>
    <a href="#" id="prev">向左</a>
    <a href="#" id="next">向右</a>
</div>
<script>
    var prev = document.getElementById(‘prev‘);
    var next = document.getElementById(‘next‘);
    var parent = document.getElementById(‘parent‘);
    var ttt;
    var type = true;
    var t;
    var span;
    var ul = document.getElementById(‘ul‘);
    var li = ul.getElementsByTagName(‘li‘);
    var color1 = ‘#cccccc‘;//小圆点的背景颜色 灰色
    var color2 = ‘red‘;//小圆点的背景颜色，红色
    var liWidth = li[0].offsetWidth;
    ul.style.width = liWidth*li.length+‘px‘;
    //        点点
    for(var i = 0;i<li.length;i++){
        li[i].index = i;
        span = document.createElement(‘span‘);
        span.className = ‘span‘;
        span.style.background = color1;
        span.innerHTML = i+1;
        parent.appendChild(span);
    }
    var span_span = parent.getElementsByTagName(‘span‘);
    for(var n = 0;n<span_span.length;n++){
        span_span[n].index = n;
        //所有的小圆点的事件
        span_span[n].onmouseover = function(){
            if(type){
                ul_ul(this.index);
                for(var s = 0;s<span_span.length;s++){
                    span_span[s].style.background = color1;
                    span_span[this.index].style.background = color2;
                }
                type = true;
            }
        }
    }
    function ul_ul(inde){
        var this_li = li[0].index;
        if(inde>this_li){
            var x = inde-this_li;
            for(var y = 0;y<x;y++){
                ul.appendChild(li[0]);
            }
        }
        if(inde<this_li){
            var x_x = this_li-inde;
            for(var g = 0;g<x_x;g++){
                ul.insertBefore(li[li.length-1],li[li.length-li.length]);
            }
        }
    }
    span_span[0].style.background = color2;
    prev.onclick = function(){
        if(type){
            clearInterval(t);
            ul.insertBefore(li[li.length-1],li[li.length-li.length]);
            liWidth = li[0].offsetWidth;
            ul.style.left = ‘-‘+liWidth+‘px‘;
            t = setInterval(rem,5);//动画速度修改
            type = false;
            background(0);
        }
    };
    next.onclick = function(){
        if(type){
            liWidth = 0;
            clearInterval(ttt);
            ttt = setInterval(nex,5);//动画速度修改
            type = false;
            background(1);
        }
    };
    function background(number){
        for(var j = 0;j<span_span.length;j++){
            span_span[j].style.background = color1;
        }
        span_span[li[number].index].style.background = color2;
    }
    function nex(){
        ul.style.left = ‘-‘+liWidth+ ‘px‘;
        liWidth += 3 ;
        if(liWidth == li[0].offsetWidth+1){
            clearInterval(ttt);
            ul.appendChild(li[li.length-li.length]);
            liWidth = 0;
            ul.style.left = liWidth+‘px‘;
            type = true;
        }
    }
    function rem(){
        ul.style.left = ‘-‘+liWidth+‘px‘;
        liWidth -= 3 ;
        if(liWidth == -1){
            clearInterval(t);
            type = true;
        }
    }
    var parent_t = setInterval(next.onclick,1500);
    parent.onmouseover = function(){
        clearInterval(parent_t);
    };
    parent.onmouseout = function(){
        parent_t = setInterval(next.onclick,1500);
    };
</script>
</body>
</html>

 

以上是关于原生 js 左右切换轮播图的主要内容，如果未能解决你的问题，请参考以下文章

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

原生js封装轮播图

JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)

JavaScript：100%原生js实现左右切换的轮播图(有延迟加载)

用原生JS 写Web首页轮播图

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