本文共 2192 字，大约阅读时间需要 7 分钟。

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