JS轮播图的实现方法2

本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下

需求：

自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图

效果图：

![轮播图]

思路：

将所有需要轮播的图片横向排列，可视区大小设置为只能显示一张图片，给容器设置移出隐藏后，可视区之外的部分被隐藏，这样我们就只能看见一张图片。
轮播实现是改变整个图片画幅的left值或者margin-left 值，当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张。
后面功能实现顺序依旧是写法一里的思路。

戳！写法一地址

HTML部分：

CSS部分：

 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .w {
 width: 1000px;
 height: 600px;
 margin: 100px auto 0;
 position: relative;
 overflow: hidden;
 }
 ul {
 width: 1000%;
 transition: all .5s ease-in-out;
 }
 ul li {
 float: left;
 width: 1000px;
 }
 ul li img {
 width: 100%;
 height: 600px;
 }
 .iconfont {
 color: white;
 position: absolute;
 font-size: 30px;
 top: calc(50% - 15px);
 background-color: rgba(216, 216, 216, 0.23);
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 cursor: pointer;
 }
 .iconfont:hover {
 color: palegreen;
 }
 .icon-zuojiantou {
 left: 0;
 }
 .icon-youjiantou {
 right: 0;
 }
 #circleContainer {
 position: absolute;
 bottom: 10px;
 left: calc(50% - 30px);
 }
 #circleContainer li {
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: white;
 margin-right: 5px;
 }
 #circleContainer .change {
 background-color: palegreen;
 }

JS部分：

精彩专题分享：jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。