老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)

轮播图是前端网页中常用的功能，包括PC端和移动端，都会用到轮播图，像咨讯、电商和个人博客等，首页基本都会有轮播图。

老徐在上一篇文章的基础上【最简单详细的轮播图原理和制作过程】，又扩展了功能，使之成为网站中常用的样子，包括右下角提示钮和左右滚动按钮。如果还不清楚轮播图原理，请先看上一篇文章，先理解了原理，再看这篇文章，效果会更好。

这是一个完整的常用的轮播图，可以说拿去直接用就好，最终效果图如下。

 

老徐先大致介绍一下增加的功能，包括右下角提示钮，鼠标放到哪个圆钮上就滚动到相应的图片上，同时圆钮的颜色也会变化，向前向后都是可以的，还有左右按钮，这个都能理解了，再有把鼠标放到图片上，图片会停止滚动，挪动鼠标后，图片继续滚动，最后是页面自适应，在手机上也是可以的。

下面介绍下增加的代码。

HTML部分增加了圆钮和左右按钮，代码如下：

<div class="box" id="box">
	<ul style="left:0px;">
		<li><a