原生js实现轮播图

作者: kalrase | 来源:发表于2018-11-15 21:09 被阅读0次

用js原生实现轮播图
JavaScript | 365笔记第87天 | 原生JS做轮播
原生Js实现轮播图
原生JS实现轮播图
原生js实现轮播图
原生JS实现轮播图
原生js制作轮播图
轮播图（2）——基于JQ的左右滑动轮播
小记setTimeout
js原生—— 无缝轮播

今天练习一下DOM操作，顺便熟悉熟悉函数，做了一个轮播图，经过测试，效果还不错！
直接放上源码，供大家参考！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        div{
            position: relative;
            width: 800px;
            height: 400px;
            margin: 100px auto 0 auto;
        }
        #view{
            width: 800px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #000;

        }
        img{
            width: 800px;
            display: none;

        }
        #dote{
            position: absolute;
            bottom:40px;
            left:350px;
            
        }
        #dote li{
            list-style: none;
            margin: 0 5px;

            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #dedede;
            float: left;
        }
        #left{
            position: absolute;
            background-color: #333333;
            color: white;
            font-size: 60px;
            top:180px;
            left:10px;
            padding: 10px 10px;
            opacity: 0.5;
            border: none;

        }
        #right{
            position: absolute;
            background-color: #333333;
            color: white;
            font-size: 60px;
            top:180px;
            right:10px;
            padding: 10px 10px;
            opacity: 0.5;
            border: none;
        }
        #right:hover{
            background-color: #999999;
        }
        #left:hover{
            background-color: #999999;
        }
    
    </style>
</head>
<body>
   <div>
        <main id="view">
                <img src="0.jpg" alt="#">
                <img src="1.jpg" alt="#">
                <img src="2.jpg" alt="#">
                <img src="3.jpg" alt="#">
                <img src="4.jpg" alt="#">
                <img src="5.jpg" alt="#">
            </main>
            <ul id="dote">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <button id="left" onclick="prev()">&lt;</button>
            <button id="right" onclick="nex()">&gt;</button>
   </div>
</body>
<script>
    var view=document.getElementById('view');
    var dote=document.getElementById('dote');    
    var x=0;    
    view.children[x].style.display='block';
    dote.children[x].style.backgroundColor='green';

   function prev(){
       view.children[x].style.display='none';
       dote.children[x].style.backgroundColor='#dedede';       
       x==0?x=dote.children.length :null;
        x--;
       view.children[x].style.display='block'
       dote.children[x].style.backgroundColor='green';
    }
    function nex(){
       view.children[x].style.display='none';
       dote.children[x].style.backgroundColor='#dedede';    
        x==dote.children.length-1?x=-1:null;                                 
        x++;
       view.children[x].style.display='block';
       dote.children[x].style.backgroundColor='green';
    }

    //tab 切换

    for(var j=0;j<dote.children.length;j++){
        dote.children[j].index=j                //为每个圆点添加索引值，以便获取调用
        dote.children[j].onclick=function (){
            view.children[x].style.display='none';
            dote.children[x].style.backgroundColor='#dedede';         
            x=this.index;                       //当前圆点索引值付给x
            view.children[x].style.display='block';       
            this.style.backgroundColor='green'; 
        }
    }
    setInterval(nex,1000)
</script>
</html>