说明

模仿京东样式

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<!-- css样式 -->
    <style type="text/css">
        /*清除边距*/
        body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        /*首先准备一个放图片的容器*/
        .container{
            width: 590px;
            height: 470px;
            position: relative;
            margin: 0 auto;
        }
        /*图片样式*/
        .container img{
            position: absolute;        /*把所有图片放在同一个位置*/
            width: 100%;
            transition-duration: 1s;    /*设置动画过渡时间*/
            opacity: 0;                /*关键：让图片变透明*/
        }
        /*图片显示开关*/
        .container img.on{
            opacity: 1;                /*关键：让图片变不透明，即：显示图片*/
        }
        /*左右按钮*/
        .left, .right{
            position: absolute;
            top: 217px;
            width: 25px;
            height: 35px;
            line-height: 35px;
            background-color: #666;
            opacity: 0.5; /*半透明*/
            text-align: center;
            font-size: 14px;
            color: #ccc;
            display: none;    /*先隐藏按钮*/
            cursor: pointer;    
        }
        .left{
            left: 0;
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }
        .right{
            right: 0;
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }
        .container:hover .left, .container:hover .right{
            display: block;            /*鼠标悬停才容器范围内时显示按钮*/
        }
        .left:hover, .right:hover{
            color: #fff;
        }
        .container ul{
            position: absolute;
            bottom: 10px;
        }
        /*小圆点默认样式*/
        .container ul li{
            list-style: none;
            float: left;
            background-color: rgb(180, 180, 180);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
            opacity: 0.5;
        }
        /*小圆点激活样式*/
        .container ul li.active{
            background-color: #fff;        /*焦点激活时的样式*/
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 先把第一张图片显示出来 -->
        <img class="on" src="image/1.jpg.webp" />
        <img src="image/2.jpg" />
        <img src="image/3.jpg" />
        <img src="image/4.jpg" />
        <!-- 左右切换按钮 -->
        <div class="left"><</div>
        <div class="right">></div>
        <!-- 小圆点 -->
        <ul>
            <li class="active" index="0"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
        </ul>
    </div>
<!-- js部分 -->
    <script type="text/javascript">
        //1、找到container下的所有img标签,li标签,左右按钮
        var aImgs = document.querySelectorAll('.container img');
        var aLis = document.querySelectorAll('.container li');
        var btnLeft = document.querySelector('.container .left');
        var btnRight = document.querySelector('.container .right');

        var index = 0;        //当前图片的序号，从0开始
        // 点击右侧按钮事件
        btnRight.onclick = function(){
            //清除当前图片的样式
            aImgs[index].className = '';
            aLis[index].className = '';
            index++;//下一张图片
            index %= aImgs.length;    //实现周期性变化
            //设置下一张图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        //点击右侧按钮类似
        btnLeft.onclick = function(){
            //清除当前图片的样式
            aImgs[index].className = '';
            aLis[index].className = '';
            index--;//上一张图片
            if (index < 0) {
                index = aImgs.length - 1;
            }
            //设置上一张图片的样式
            aImgs[index].className = 'on';
            aLis[index].className = 'active';
        }
        var lis = document.querySelectorAll('.container li');
        for(let item of lis){
            item.onmouseover = function(e){
                // 获取鼠标划过li标签的序号
                var tagIndex = e.target.getAttribute('index')
                tagIndex = parseInt(tagIndex)

                //清除当前图片的样式
                aImgs[index].className = '';
                aLis[index].className = '';

                // 赋值给index
                index = tagIndex
                //设置当前图片的样式
                aImgs[index].className = 'on';
                aLis[index].className = 'active';
            }
        }
        // 鼠标移入div就停止轮播图片
        document.getElementsByClassName("container")[0].onmouseover = function(){
            clearInterval(si)
        }
        // 鼠标移出div就开始轮播图片
        document.getElementsByClassName("container")[0].onmouseout = function(){
            si = setInterval(function(){
                btnRight.onclick()
            },2000)
        }
        // 轮播图片
        var si = setInterval(function(){
            btnRight.onclick()
        },2000)
    </script>
</body>
</html>

原文出处：/show_1IX3kTE9s58Z.html