原生js仿京东商城首页带箭头banner图片切换特效（2020版最新版）

本文链接：https://blog.csdn.net/fengzhizi520m/article/details/112184077
原生js仿京东商城首页带箭头banner图片切换特效（2020版最新版）

效果截图：
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿京东图片切换特效</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            margin: 0 auto;
            text-align: center;
        }
        h1{
            margin: 20px 0;
        }
        a{
            text-decoration: none;
        }
        ul{}
        li{
            list-style: none;
            }
        img{
            transition:all 1s ease-in-out;
        }
        .slider{
            margin: 25px auto;
            width: 590px;
            height: 470px;
            overflow: hidden;
            background-color: cyan;
            position: relative;
        }
        .slider_icon{
            position: absolute;
            left: 30px;
            bottom: 20px;
            line-height: 25px;
            height: 25px;
        }
        .slider_icon i{
            display:inline-block;
            width: 8px;
            height: 8px;
            border: 1px solid rgba(0,0,0,.05);
            background: rgba(255,255,255,.4);
            border-radius: 50%;
            transition: background .2s ease;
            }
        .slider_icon i.act{
            width: 9px;
            height: 9px;
            background: rgba(255,255,255);
            border: 2px solid rgba(0,0,0,.1);
        }
        .arrow{
            width:25px;
            height:35px;
            background-color:rgba(0,0,0,.2);
            position:absolute;
            top:50%;
            margin-top:-30px;
            line-height: 35px;
            color:rgba(255, 255, 255);
            font-size: 18px;
            font-weight: bolder;
            text-align: center;
        }
        .arrow span{
            display:block;
            width:5px;
            height:5px;
            border-bottom:2px solid #fff;
            border-left:2px solid #fff;
        }
        .prve{
            left:0;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }
        .next{
            right:0;
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }
        .slider_left{
            margin:15px 0 0 10px;
            transform:rotate(45deg);
        }
        .slider_right{
            margin:15px 0 0 10px;
            transform:rotate(-135deg);
        }

    </style>
</head>
<body>
    <h1>仿京东图片切换特效</h1>
    <div id="slider" class="slider">
        <ul id="slider_list" class="slider_list">
            <li><a href="#"><img src="./images/1.jpg"></a></li>
            <li><a href="#"><img src="./images/2.jpg"></a></li>
            <li><a href="#"><img src="./images/3.jpg"></a></li>
            <li><a href="#"><img src="./images/4.jpg"></a></li>
            <li><a href="#"><img src="./images/5.jpg"></a></li>
            <li><a href="#"><img src="./images/6.jpg"></a></li>
            <li><a href="#"><img src="./images/7.jpg"></a></li>
            <li><a href="#"><img src="./images/8.jpg"></a></li>
        </ul>
        <div id="slider_icon" class="slider_icon">
            <i class="act"></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>  
        </div>
        <a href="javascript:;" id ="prve" class="arrow prve"><span class="slider_left"></span></a>
        <a href="javascript:;" id ="next" class="arrow next"><span class="slider_right"></span></a>
    </div>
    <script>
        var slider = document.getElementById("slider");
        var slider_list = document.getElementById("slider_list").getElementsByTagName("li");
        var slider_icon = document.getElementById("slider_icon").getElementsByTagName("i");
        var prve = document.getElementById("prve");
        var next = document.getElementById("next");
        var index=0,mytime=null;
        

        //设置自动播放函数
        function autoPlay () {
            if (++index >= slider_list.length) {
                index = 0;
                }
            changeImg(index);
        }
        // 鼠标划过整个容器时停止自动播放
        slider.onmouseover = function () {
            clearInterval(mytime);
        }
        // 鼠标离开整个容器时继续播放至下一张
        slider.onmouseout=function(){
            mytime=setInterval(autoPlay,3000);
        }
        //向左箭头操作
        //向左箭头鼠标移入效果
        prve.onmouseover=function(){
            this.style.backgroundColor = "rgba(0,0,0,.4)";
        }
        //向左箭头鼠标移出效果
        prve.onmouseout=function(){
            this.style.backgroundColor = "rgba(0,0,0,.2)";
        }
        //向左箭头点击效果
        prve.onclick=function(){
            if(index<=0){
                index=slider_icon.length-1;
            }else{
                index-=1;
            }
            changeImg(index);
        }
        //向右箭头操作
        //向右箭头鼠标移入效果
        next.onmouseover=function(){
            this.style.backgroundColor = "rgba(0,0,0,.4)";
        }
        //向右箭头鼠标移出效果
        next.onmouseout=function(){
            this.style.backgroundColor = "rgba(0,0,0,.2)";
        }
        //向右箭头点击效果
        next.onclick=function(){
            if(index>=slider_icon.length-1){
                index=0;
            }else{
                index+=1;
            }
            changeImg(index);
        }
         //鼠标滑过小图标切换图片
        for (var k = 0; k < slider_icon.length; k++) {
            (function(k){
                slider_icon[k].onmouseover = function(){
                index=k;
                changeImg (index)
               }
            })(k);
            
        }

        // 定义并调用自动播放函数
        mytime = setInterval(autoPlay, 3000);
        // 定义图片切换函数
        function changeImg (curIndex) {
            for (var i = 0; i < slider_list.length; i++) {
                slider_list[i].style.display = "none";
                slider_icon[i].className = "";
            }
            slider_list[curIndex].style.display = "block";
            slider_icon[curIndex].className = "act";
        }
    </script>
</body>
</html>