【jQuery】淘宝banner轮播

image.png

思路

1. 通过banner下方的小圆点，控制图片的切换。
2. 给左右箭头添加点击事件（点击时切换图片，并且下方的小圆点跟着切换）。
3. 自动切换（2秒切换一次图片）。
4. 当鼠标移动到banner上时，停止“自动切换”（停止第3步）。
5. 当鼠标移开时，开始继续“自动切换”（继续开始第3步）。

原理

image.png

黑框是容器，要做无缝轮播，头和尾的图片需要一样。
所有图片都放在 ul 里面，通过移动 ul 实现图片的切换。

容器要设置 overflow: hidden，把溢出部分的图片隐藏掉。

HTML代码

    

        

        

        

        

        

        

    
    

        <
        >
    
    

CSS代码

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
}
.banner {
    width: 700px;
    height: 314px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}
.bannerAllPic {
    position: relative;

}
.bannerAllPic>li {
    float: left;
}
.arrow a{
    width: 30px;
    height: 50px;
    background: rgba(0,0,0,.4);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    font-family: '宋体';
    display: none;
}
.banner:hover .arrow a {
    display: block;
}
.aLeft {
    left: 0;
}
.aRight {
    right: 0;
}
.circleAll {
    position: absolute;
    background: rgba(0,0,0,.4);
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 0 5px;
}
.circleAll li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    float: left;
    margin: 3px 5px;
    cursor: pointer;
}
.circleAll .now {
    background: pink;
}

jQuery代码

---

jQuery总目录：jQuery目录

上一篇：【jQuery】阻止链接打开

下一篇：【jQuery】京东banner轮播图