手把手教你用JS写一个图片轮播效果

1、前言

写页面的时候，有些地方经常会用到一些轮播图，比如主页Banner的轮播，或者在页面最下面的小图片轮播，这篇文章就教大家如何写一个小的轮播效果。

2、正文

先放一张效果图。

图片轮播

然后直接看代码吧。看一下代码，在讲里面的原理。

 <div id="content">
        <div id="content_img">
            <div id="content_img1">
                <a href="#"><img src="1.jpg" style="width:100px;height:80px" border="0" /></a>
                <a href="#"><img src="2.jpg" style="width:100px;height:80px" border="0" /></a>
                <a href="#"><img src="3.jpg" style="width:100px;height:80px" border="0" /></a>
                <a href="#"><img src="4.jpg" style="width:100px;height:80px" border="0" /></a>
                <a href="#"><img src="5.jpg" style="width:100px;height:80px" border="0" /></a>
            </div>
            <div id="content_img2" style="border:1px solid red"></div>
        </div>
    </div>
    <script>
        var speed = 10;
        var img = document.getElementById("content");
        var img1 = document.getElementById("content_img1");
        var img2 = document.getElementById("content_img2");
        img2.innerHTML = img1.innerHTML;   //把img1的内容给img2
        function Carousel() {
            if (img2.offsetWidth - img.scrollLeft <= 0)   //如果img2的宽度 减去img滚动条 距离左边的距离小于等于0   也就 img2距离左边的距离小于等于0
                img.scrollLeft -= img1.offsetWidth   //  把img2的位置，继续放到右侧 开始向左滚动
            else {
                img.scrollLeft++;    //向左移动 每次加一
            }
        }
        var MyMar = setInterval(Carousel, speed); //写个定时器
        img.onmouseover = function () {
            clearInterval(MyMar) //鼠标移动进去的时候  停止图片滚动
        };    
        img.onmouseout = function () {   
            MyMar = setInterval(Carousel, speed)   //鼠标一开，继续滚动
        };  
    </script>

这里主要有三点需要解释下。

1.图片为什么会滚动？
答：我先看一下img2这个div的宽度是多少，然后看这个div距离左边的位置有多远，如果位置大于0，那就距离左边的位置-1，代码里写的是img2.offsetWidth - img.scrollLeft <= 0，这里img.scrollLeft是img这个大div里面的滚动条距离左边的距离，其实也就是img2距离左边的距离。然后动起来的关键是setInterval(Carousel, speed);写个定时器，10毫秒执行一次。
2.为什么写两个放图片的div。
答：如果不写两个，那效果是这样的。

Video_2018-10-29_112552.gif
3.写onmouseover和onmouseout的作用？
一般这种轮播图都是可以点击的，所以写onmouseover作用就是鼠标放到图片上的时候，图片静止，然后写onmouseout是鼠标离开的时候，图片在继续滚动。

3.总结

一个小小的轮播里面涉及的知识还是挺多的，学无止境。
Study hard and make progress every day.

想要源码的同学请关注微信公众号“爱游戏爱编程”,然后回复“轮播”即可获取源码。

爱游戏爱编程.jpg