轮播图：京东为例-蒲公英云

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小小争520</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!--相框-->
<div class="Photo-frame">
    <!--照片条-->
    <ul class="picBox clearFix" style="left: 0">
        <li><a href="#"><img src="zhutu1.jpg" alt=""></a></li>
        <li><a href="#"><img src="zhutu3.jpg" alt=""></a></li>
        <li><a href="#"><img src="zhutu4.jpg" alt=""></a></li>
        <li><a href="#"><img src="zhutu5.jpg" alt=""></a></li>
        <li><a href="#"><img src="zhutu6.jpg" alt=""></a></li>
    </ul>
    <!--指示  小圆圈-->
    <div class="circles">
        <span in="0" style=" box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset"></span>
        <span in="1"></span>
        <span in="2"></span>
        <span in="3"></span>
        <span in="4"></span>
    </div>
    <!--箭头  next 右箭头-->
    <div class="arrow" id="next"> > </div>
    <!--左箭头-->
    <div class="arrow" id="prev"> < </div>
</div>
<!--不能互换顺序-->
<script src="获取元素.js"></script>
<script src="index.js"></script>
</body>
</html>
    /*获取元素  ---》 一个 */
    function my$(selector ) {
        /*判断？ #   */
        return document.querySelector(selector)
    }
    function my$All(selector ) {
        /*判断？ #   */
        return document.querySelectorAll(selector)
    }
window.onload = function () {
    // ☆☆☆☆☆  如果你是先加后判断 判断条件应该是下标+1
    //1:手动播放
    /*
    * (1)当用户点击右箭头  下一张    照片盒子向左移动   left-=590px
    * (2)当用户点击左箭头  上一张    照片盒子向右移动
    * left+=590px
    *
    * */
    //相框
    var Photo_frame = my$('.Photo-frame')
    //照片盒子
    var picBox = my$('.picBox')
    //箭头
    var next = my$('#next') //右
    var prev = my$('#prev') //左
    var circles = my$('.circles')
    var circlesSpans = my$All('.circles span') //bug  my$() ===>my$All()
    console.log(circlesSpans)
    var index  = 0 ;// 标记当前有光圈的小圆点的下标
    /***********照片盒子运动函数  picBoxAnimation()
     * 参数：偏移量 +590 向右 上一张
     *            -590 向左  下一张
     * 返回值 无
     * ************/
    function picBoxAnimation(offset){
        var leftValue = parseInt(picBox.style.left); //数值类型
        var newLeft =  leftValue + offset    //照片盒子要运动的距离
        if(newLeft < -2360 ){ //向左走的趋势 当前已经展示的是第5张
            newLeft = 0;
        }
        if(newLeft > 0 ){
            newLeft = -2360
        }
        picBox.style.left = newLeft + 'px';
        console.log(picBox.style.left)  //只能获取行内样式
    }
    //右箭头
    next.onclick = function () {
        picBoxAnimation(-590)
        //右箭头朝右移动 加+
        index++; //4
        if(index === 5){
            index = 0;
        }
        buttonShow();
    }
    prev.onclick = function () {
        picBoxAnimation(+590)
        index--;
        if(index === -1){
            index = 4;
        }
        buttonShow();
    }
    //2:自动播放  定时器
    function play() {
        timer = setInterval(function () {
            next.onclick();
        },1000)
    }
    play();
    //s鼠标移入不动 清定时器
    Photo_frame.onmouseover = function () {
        clearInterval(timer) //清除定时器 停止自动轮播
    }
    //鼠标移开 重新自动轮播 play()
    Photo_frame. function () {
        play()
    }
    /*********小圆点
     * 1：随着图片移动
     * 2：鼠标切换相应（自定义属性 ）图片
     * **********/
//小圆点移动函数  buttonShow()  参数 无 返回值 无
    function  buttonShow() {
        for(var i =0;i<circlesSpans.length ;i++){
            circlesSpans[i].style.boxShadow = '';//清除样式
        }
        circlesSpans[index].style.boxShadow = "0 0 10px 5px rgba(255,255,255,.7)  inset"
    }
    //鼠标移入哪个小圆圈 哪张图就显示
    //图片盒子运动偏移量 = (旧下标 index -新下标 )*590
    for(var i =0;i<circlesSpans.length ;i++){
        //给小圆圈绑定鼠标移入事件
        circlesSpans[i]. function () {
            //获取当前鼠标移入的那个小圆圈的下标 ===》 新下标
            var newIndex = this.getAttribute('in')
            console.log(newIndex)
            //根据产生的新下标和旧下标的差的到了照片移动的偏移量
            var currentOffset = (index-newIndex)*590
            //调用运动函数 ===》图片已经切换
            picBoxAnimation(currentOffset)
            //新旧更替 旧下标保存新下标
            index = newIndex ;
            //调用小圆圈展示的函数 为什么在这调用？ 能不能拿到前面? 为什么？
            buttonShow()
        }
    }
}
@charset "UTF-8";
* {
    padding: 0;
    margin: 0;
}
img {
    display: block; /*转换块级元素*/
}
ul li {
    list-style: none;
}
/*清浮动的衣服*/
.clearFix::after,.clearFix::before {
    content: '';
    display: block;
    line-height: 0;
    clear: both;
}
.Photo-frame {
    position: relative;
    width: 590px;
    height: 470px;
    border: 1px solid #ccc;
    margin: 100px auto;
    /*溢出隐藏*/
    overflow: hidden;
}
/*照片条*/
.picBox {
    /*定位*/
    position: absolute;
    width: 2950px;
    height: 470px;
    top:0;
}
.picBox > li {
    float: left;
}
.arrow {
    position: absolute;
    top:50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background-color: rgba(45,45,45,.3);
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 25px;
    cursor: pointer;/*鼠标小手样式*/
}
#next {
    right: 0;
}
#prev {
    left: 0;
}
.arrow:hover {
    background-color: rgba(45,45,45,.7);
}
/*小圆点*/
.circles {
    position: absolute;
    bottom:20px;
    left: 50%;
    margin-left:-76px ;
    height: auto;
}
.circles span {
    display: inline-block;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    background-color: darkblue;
}
/*
.circles span:hover {
    box-shadow: 0 0 10px 5px rgba(255,255,255,.7)  inset;
}*/