Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。
思路如下:用JavaScript来控制轮播的图片的样式(margin-left)。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。
效果图如下。具有以下功能:1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。在这里插入图片描述
话不多说,代码如下。
首先肯定是HTML代码`这个没什么说的,先插入需要轮播的图片。底下切换图片的按钮,还有左右按键。

<div class="block">
    <div class="box_big ">
        <div class="box"><img src="img/7.jpg" alt=""/></div>
        <div class="box"><img src="img/5.jpg" alt=""/></div>
        <div class="box"><img src="img/6.jpg" alt=""/></div>
        <div class="box"><img src="img/8.jpg" alt=""/></div>
        <div class="box"><img src="img/9.jpg" alt=""/></div>
        <div class="box"><img src="img/7.jpg" alt=""/></div>
    </div>
    <div class="spot">
        <div class="spot_list">1</div>
        <div class="spot_list">2</div>
        <div class="spot_list">3</div>
        <div class="spot_list">4</div>
        <div class="spot_list">5</div>
    </div>
    <div class="btn">
        <div class="left_btn"><span> < </span></div>
        <div class="right_btn"><span> > </span></div>
    </div>
</div>

然后是给代码添加样式。添加好后基本样式就已经完成了。让图片横排列。超出父容器部分隐藏。记得给图片的margin-left添加过渡效果(如图)接下来就是让他动起来!!!在这里插入图片描述

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 700px;
            height: 400px;
            border: 1px solid black;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .box_big {
            position: absolute;
            width: 4200px;
            height: 400px;

        }

        .nav {
            transition: margin-left 0.5s linear;
        }

        .box {
            width: 700px;
            height: 400px;
            float: left;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .spot {
            position: absolute;
            width: 100%;
            text-align: right;
            bottom: 5px;
        }

        .spot_list {

            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            border: 1px solid gray;
            border-radius: 5px;
            line-height: 30px;
            font-weight: bolder;
            margin: 10px;
            display: inline-block;
            background: rgba(255, 255, 255, 0.3);
        }

        .btn {
            width: 100%;
            height: 80px;
            position: absolute;
            margin: 0 auto;
            top: 160px;
        }

        .left_btn, .right_btn {
            width: 30px;
            height: 80px;
            z-index: 15;
            background: rgba(255, 255, 255, 0.3);
            text-align: center;
            line-height: 80px;
            border-radius: 8px;

        }

        .left_btn {
            float: left;
        }

        .right_btn {
            float: right;
        }
    </style>

这块是最重要的的部分,js代码
思路如下,先获取元素,让图片切换下一张,这里我使用count++*元素的marginLeft值。count加一次图片就会切换下一张。然后把这段代码放在计时器中,图片就可以自动切换下一张了。切换的时候底下的小图标的背景色也跟着切换。

ipt>
    var box = document.getElementsByClassName("box_big")[0];
    var spot = document.getElementsByClassName("spot_list");
    var block = document.getElementsByClassName("block")[0];
    var left_btn = document.getElementsByClassName("left_btn")[0];
    var right_btn = document.getElementsByClassName("right_btn")[0];
    var time = null;
    var count = 0;
    
 //计时器
    function showtime() {
        time = setInterval(function () {
            mate();
        }, 1000);
    }
    //正常滚动
    function mate() {
        box.className = "box_big nav";
        spot[count].style.background = "rgba(255, 255, 255, 0.3)";
        count++;
        spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
        box.style.marginLeft = (count * -700) + "px";
        //添加一次性计时器
        setTimeout(function () {
        //判断count的值。如果大于图片长度,就重0开始+
            if (count > box.children.length - 2) {
                count = 0;
                box.className = "box_big";
                box.style.marginLeft = "0px"
            }
        }, 500)
    }

然后设置鼠标进入计时器关闭,鼠标离开计时器打开。

 block.onmouseenter = function () {
        clearInterval(time);
    };
    //鼠标出来计时器打开
    block.onmouseleave = function () {
        showtime();
    };

接下来,来做底下鼠标放在地下图标的时候切换对应的图片。这里我用的是for循环。

 for (var i = 0; i < spot.length; i++) {
        spot[i].index = i;
        spot[i].onmouseenter = function () {
            spot[count].style.background = "rgba(255, 255, 255, 0.3)";
            this.style.background = "rgba(91,91,91,0.8)";
            count = this.index;
            box.style.marginLeft = (count * -700) + "px";
        }

    }

上面大部分功能已经完成,现在剩下最后一步,左右键切换图片的上一张和下一张。用鼠标点击事件。左边很简单,直接执行开始时候的方法即可(切换方向和自动切换方向相同)。右边用count–

 //图片左边划
    left_btn.onclick = function () {
        mate();
    };
        //图片右边划
    right_btn.onclick = function () {
        spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
        count--;
        if (count < 0) {
            box.className = "box_big";
            count = box.children.length - 2;
            box.style.marginLeft = "-3500px";
        }
        //添加一次性计时器
        setTimeout(function () {
            box.className = "box_big nav";
            box.style.marginLeft = (-700 * count) + "px";
            spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
        }, 1);
    };

到这里就已经写完了。

完整js代码如下:

<script>
//首先获取元素,这里获取了所有需要的元素。
    var box = document.getElementsByClassName("box_big")[0];
    var spot = document.getElementsByClassName("spot_list");
    var block = document.getElementsByClassName("block")[0];
    var left_btn = document.getElementsByClassName("left_btn")[0];
    var right_btn = document.getElementsByClassName("right_btn")[0];
    var time = null;
    spot[0].style.background = "rgba(91,91,91,0.8)";
    var count = 0;
    showtime();
    //鼠标进入计时器停止
    block.onmouseenter = function () {
        clearInterval(time);
    };
    //鼠标出来计时器打开
    block.onmouseleave = function () {
        showtime();
    };
    //点的事件
    for (var i = 0; i < spot.length; i++) {
        spot[i].index = i;
        spot[i].onmouseenter = function () {
            spot[count].style.background = "rgba(255, 255, 255, 0.3)";
            this.style.background = "rgba(91,91,91,0.8)";
            count = this.index;
            box.style.marginLeft = (count * -700) + "px";
        }

    }
    //图片左边划
    left_btn.onclick = function () {
        mate();
    };
    //图片右边划
    right_btn.onclick = function () {
        spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
        count--;
        if (count < 0) {
            box.className = "box_big";
            count = box.children.length - 2;
            box.style.marginLeft = "-3500px";
        }
        setTimeout(function () {
            box.className = "box_big nav";
            box.style.marginLeft = (-700 * count) + "px";
            spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
        }, 1);
    };
    //计时器
    function showtime() {
        time = setInterval(function () {
            mate();
        }, 1000);
    }
    //正常滚动
    function mate() {
        box.className = "box_big nav";
        spot[count].style.background = "rgba(255, 255, 255, 0.3)";
        count++;
        spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
        box.style.marginLeft = (count * -700) + "px";
        setTimeout(function () {
            if (count > box.children.length - 2) {
                count = 0;
                box.className = "box_big";
                box.style.marginLeft = "0px"
            }
        }, 500)
    }
</script>
</body>
  • 61
    点赞
  • 316
    收藏
    觉得还不错? 一键收藏
  • 19
    评论
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值