javascript实现轮播图效果

r囧r小猫 2022-04-14 06:26 307阅读 0赞

实现效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

CSS与HTML就不讲了，比较简单，大家用 笔画一下图就懂了，主要说js代码

(建议大家先把css中\#container的overflow:hidden;注释掉，这样可以看得直观一点)

<!DOCTYPE html>
    <html>
    <head>
    <title>js轮播图</title>
    <style type="text/css">
    #container{
    width: 600px;
    height: 400px;
    position: relative;
    left: 30%;
    top: 100px;
    border: 1px solid #000;
    overflow: hidden ;/*可以先将这句注释掉*/
    }
    #list{
    width: 4200px;
    height: 400px;
    position: absolute;
    }
    #list img{
    width: 600px;
    height:400px;
    float: left;
    }
    #buttons{
    height: 15px;
    width: 250px;
    position: absolute;
    bottom: 20px;
    left: 200px;
    }
    #buttons span{
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #333;
    float: left;
    margin-right:25px;
    cursor: pointer;
    }
    #buttons .on{
    background: orange;
    }
    .arrow {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 180px;
    left: 20px;
    width: 40px;
    height: 40px;
    font-size: 36px;
    font-weight: bold;
    line-height: 39px;
    text-align: center;
    background-color: RGBA(0, 0, 0, .4);
    color: #fff;
    }
    .arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
    }
    #container:hover .arrow {
    display: block;
    }
    #next{
    left: 540px;}
    </style>
    <script>
    window.onload = function() {
    var container = document.getElementById("container");
    var list = document.getElementById("list");
    var buttons = document.getElementById("buttons").getElementsByTagName("span");
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var timer;
    
    //animate 函数，在当前left值得基础上向右移动 offset px,如果向左移动距离超过图六位置就变为图一位置，向右移动距离超过图二位置就变为图七位置
    function animate(offset) {
    var newLeft = parseInt(list.style.left) + offset;
    list.style.left = newLeft + 'px';
    if (newLeft > -600) {
    list.style.left = -3000 + 'px';
    }
    if (newLeft < -3000) {
    list.style.left = -600 + 'px';
    }
    }
    
    //将当前显示图片对应的小圆点样式改变
    function buttonsShow() {
    //将所有的小圆点的样式清除
    for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].className == "on") {
    buttons[i].className = "";
    }
    }
    //数组从0开始，故index需要-1
    buttons[index - 1].className = "on";
    }
    
    //点击产生查看前一张效果，animate移动距离改变，小圆点显示改变，当index=1时还要查看前一张时，index变为5
    prev.onclick = function () {
    index -= 1;
    if (index < 1) {
    index = 5
    }
    buttonsShow();
    animate(600);
    };
    
    //点击产生查看后一张效果，animate移动距离改变，小圆点显示改变
    next.onclick = function () {
    index += 1;
    if (index > 5) {
    index = 1
    }
    animate(-600);
    buttonsShow();
    };
    
    //通过定时器调用next.onclick（）实现每两秒滚动一次
    function play() {
    //重复执行的定时器
    timer = setInterval(function () {
    next.onclick();
    }, 2000)
    }
    
    //清除定时器实现停止滚动
    function stop() {
    clearInterval(timer);
    }
    container.onmouseover = stop; //在鼠标进入onmouseover时，停止每两秒滚动一次
    container.onmouseout = play; //在鼠标离开onmouseover时，开始每两秒滚动一次
    play(); //在onload后就调用play()
    
    //为每个小按钮添加onclick事件，当点击按钮时会跳动到按钮对应的图片
    for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {
    //当前图片点击当前的小圆点不执行以下代码。
    if (this.className == "on") {
    return;
    }
    /* 这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上 */
    /* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
    var clickIndex = parseInt(this.getAttribute('index'));
    var offset = 600 * (clickIndex - index); //这个index是当前图片停留时的index
    animate(-offset);
    index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
    buttonsShow();
    }
    }
    }
    </script>
    </head>
    <body>
    <div id="container">
    <div id="list" style="left: -600px;">
    <img src="img2/05.png" alt="">
    <img src="img2/01.png" alt="">
    <img src="img2/02.png" alt="">
    <img src="img2/03.png" alt="">
    <img src="img2/04.png" alt="">
    <img src="img2/05.png" alt="">
    <img src="img2/01.png" alt="">
    </div>
    <div id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
    </div>
    <em id="prev" class="arrow"><</em>
    <em id="next" class="arrow">></em>
    </div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220414/12ff3453977a4496b5689cf800974b4c.png