纯js实现淘宝商城轮播图

需求：
　　循环无缝自动轮播3张图片，点击左右箭头可以手动切换图片，鼠标点击轮播图下面的小圆点会跳转到对应的第几张图片。鼠标放到轮播图的图片上时不再自动轮播，鼠标移开之后又继续轮播。
效果图：

 

下面是html代码：

    
"box">
        
"imgbox">
            
"img/tu1.jpg" alt="" />
            
"img/tu2.jpg" alt="" />
            
"img/tu3.jpg" alt="" />
        
        
class="yuandian">
            "#" class="xiaoyuan">
            "#" class="xiaoyuan">
            "#" class="xiaoyuan">
        
        
"jiantou">
            "jt_left" class="jiant"><
            "jt_right" class="jiant">>
        
    

css代码：

* {
    margin: 0;
    padding: 0;
}
#box {
    position: relative;
    width: 520px;
    height: 280px;
    /*background-color: pink;*/
    margin:100px auto;
    overflow: hidden;
}
#imgbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 99999px;
    cursor: pointer;
    height: 100%;
}
#imgbox img {
    float: left;
}
.yuandian {
    position: absolute;
    left: 230px;
    bottom: 20px;
    width: 60px;
    height: 15px;
    border-radius: 20px;
    background: rgba(255,255,255,.6);
}
.yuandian a {
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: 2px 0 0 7px;
    background-color: white;
}

#jt_left {
    left: 0;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
}
#jt_left,
#jt_right {
    position: absolute;
    top: 140px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    background: rgba(255,255,255,.6);
}
#jt_right {
    right: 0;
    border-top-left-radius:2em;
    border-bottom-left-radius:2em;
}

js代码：

转载于:https://www.cnblogs.com/xiaojuziya/p/11079724.html