设计宽度不要超过轮播图片的总宽度，再加上第一张图片的宽度（加第一张图片的宽度是为了轮播效果看得见）我的是1500宽度和200的高度，再设置溢出隐藏（消除移动出显示区域还在显示）。

实现的效果是：1.图片自动轮播；2.图片序列按钮的点击更改图片事件；3.上、下一张的按钮事件；4.鼠标悬于图片上，不进行轮播。当然，在这些效果之前，我们需要写完我们的html内容和css样式。

轮播图的实现原理：顾名思义，轮播图就是实现图片的轮换播放效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。

本文实例为大家分享了3种方法实现JS轮播图效果的具体代码，供大家参考，具体内容如下。本轮播图的实现，首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示， 通过js代码使用定时器不断调用类active突出显示li标签，同时隐藏兄弟li标签。

项目背景：传说使用纯css实现轮播图在面试中会有所加分，所以今天我们就来实现一下。核心科技：css3中的animation方法,可以帮助我们快速实现动画效果.具体使用方法如下。

最近对轮播图的一些具体实现想说一下。html主要是由盒子，箭头，圆圈组成，这个轮播图的主要布局就是这里图片这里我会使用到动画函数，动画函数的前提就是该元素必须要有定位。