点击图片切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .wrap{
            position: relative;
            width:500px;
            height: 350px;
            margin:50px auto;
        }
        .wrap ul li{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:350px;
            font-size: 100px;
            line-height: 350px;
            text-align:center;
            display: none;
        }
        .wrap span{
            position: absolute;
            top:50%;
            display: inline-block;
            width:30px;
            height:50px;
            font-size: 30px;
            text-align: center;
            line-height:50px;
            background-color: #ccc;
            cursor: pointer;
            margin-top: -25px;
        }
        .wrap span:first-child{
            left:0;
        }
        .wrap span:last-child{
            right:0;
        }
        .wrap ul li.on{
            display: block;
        }

    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li class="on" style="background-color: pink;">一</li>
        <li style="background-color: blue;">二</li>
        <li style="background-color: red;">三</li>
        <li style="background-color: yellow;">四</li>
        <li style="background-color: green;">五</li>
    </ul>
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
</div>
<script type="text/javascript">
    var oLi = document.querySelectorAll("li");
    console.log(oLi)
    var oL = document.getElementById("left");
    var oR = document.getElementById("right");
    var length = oLi.length;
    var index = 0;
        oR.onclick = function(){
            // oL[i].index = i;
            oLi[index].className = "";//上一张隐藏       
            index++;
            if(index>4){
                index = 0;
            }
            oLi[index].className = "on";//下一张显示
        };
        oL.onclick = function(){
            oLi[index].className = "";//上一张隐藏       
            index--;
            if(index<0){
                index = 4;
            }
            oLi[index].className = "on";//下一张显示
        }
    
    
</script>
</body>
</html>
点击图片切换

推荐阅读更多精彩内容
