在网页浏览中，可以看到轮播图是无处不在的，这是一个前端工程最基本的技巧。首先看看几个网页的呈现的效果。
QQ音乐：
网易云音乐：
天猫：
接下来将从简到难总结几种实现轮播图的方法。
1、样式一：鼠标滑入滑出实现图片切换
当鼠标滑入到小圆点上时，显示当前对应的图片，鼠标移出时回到默认的图片。如果点击了小圆点，显示当前的图片，移出时仍不改变显示。
html+css设置
<!-- 轮播图片 -->
<div class="slider">
<!-- 小圆点 -->
<div class="control">
<!-- 根据图片数量添加小圆点 -->
<ul> </ul>
</div>
<!-- 图片显示 -->
<div class="content">
<img src="./22.jpg" alt="" class="active" />
<img src="./66.jpg" alt="" />
<img src="./33.jpg" alt="" />
<img src="./44.jpg" alt="" />
<img src="./55.jpg" alt="" />
</div>
</div>
/*css样式*/
*{margin: 0;padding: 0;} .slider{
margin: 100px auto;
width: 640px;
height: 400px;
position: relative;
}
.slider .control{
position: absolute;
width: 640px;
height: 20px;
left: 0;
bottom: 30px;
}.slider .control ul{
list-style: none;
width: 150px;
margin: 0 auto;
}.slider .control li{
width: 20px;
height: 20px;
margin: 0 5px;
float: left;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.slider .control li.active{
background-color: red;
}/*默认设置不显示其他图片*/
.slider .content img{
width: 640px;
height: 400px;
display: none;
}
/*只显示第一张图片*/
.slider .content img.active{
display: block;
}
样式展示效果：
javascript设置
//定义一个改变图片函数
function changImage(i) {
var index = i;
var ul = document.getElementsByTagName("ul")[0];
//获取所有的images
var images = document.getElementsByTagName("img"); //数组
//获取所有的li
var lis = ul.getElementsByTagName("li");
for(var j = 0; j < lis.length; j++){
var li = lis[j];
var img = images[j];
//清除li 和 img 默认的active (img的active表示显示这个图片)
li.className = '';
img.className = '';
}
//设置当前的active属性 lis[index].className = 'active';
images[index].className = 'active';
} window.onload = function () {
//根据图片数改变小圆点数
//1获得图片数
var content = document.getElementsByClassName("content")[0];
var images = content.getElementsByTagName("img"); //数组 所有图片
//图片数
var imageCount = images.length;
//根据图片数创建小圆点数,添加到ul中
//遍历图片数
for(var i = 0; i < imageCount; i++){
//1创建小白点
var li = document.createElement("li")
li.index = i;
//3默认的第一个选中
if (i == 0) {
li.className += 'active';
}
//2添加到ul中
var control = document.getElementsByClassName("control")[0];
var ul = control.getElementsByTagName("ul")[0];
ul.appendChild(li)
var select = 0;
li.onclick = function(){
select = this.index;
changImage(this.index); li.onmousemove = function () {
changImage(this.index); li.onmouseout =function () {
changImage(select); //4设置ul宽度 保证居中
ul.style.width = (imageCount*30)+ 'px';
}
2、样式二：实现图片自动切换
展示时，图片在页面中自动切换。鼠标点击小圆点，直接切换显示当前图片。
html+css设置（基本和上面一样）
<body>
<div class="slider">
<div class="control">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="content" id="imag-list">
<ul >
<li><img src="data:images/1.jpg" alt="" /></li>
<li><img src="data:images/5.jpg" alt="" /></li>
<li><img src="data:images/4.jpg" alt="" /></li>
<li><img src="data:images/3.jpg" alt="" /></li>
<li><img src="data:images/2.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
*{padding: 0;margin: 0;}
.slider{
width: 800px;
height: 500px;
position: relative;
overflow: hidden;
margin: 30px auto;
}
.slider img{
width: 800px;
height: 500px;
}
.slider .content{
}
.slider .content ul{
width: 10000px;
list-style: none;
position: absolute;
left:0px;
}
.slider .content li{
float: left;
.slider .control{
position: absolute;
width: 100%;
z-index: 10;
bottom: 50px;
left: 0;
text-align: center;
}
.slider .control span{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.slider .control span.current{
background-color: red;
}
JavaScript设置
//封装移动函数
function animate(element,target){
clearInterval(element.animateTimer);
var left = element.offsetLeft;
var step = (target - left) / 10;
element.animateTimer = setInterval(function(){
left += step;
element.style.left = left + 'px';
if(Math.abs(target - left) <= Math.abs(step)){
clearInterval(element.animateTimer);
element.style.left = target + 'px';
}
},100);
}
window.onload =function(){
var ul = document.getElementsByTagName('ul')[0];
var spanArr = document.getElementsByTagName('span');
//4.最后一张显示后，克隆第一张图片继续显示第一张
ul.appendChild(ul.children[0].cloneNode(true));
var ulLeft = ul.offsetLeft;
console.log(ulLeft);
var ulIndex = 0; //默认第一张图片下标
// console.log(ulLeft);
//开启
var autoPlayTimer = setInterval(function(){
//4.2 从最后一张滚回到第一张(ulIndex == 5)之后 需重置回第一张状态
if(ulIndex == 5){
ulIndex = 0;
ul.style.left = '0';
ulLeft = 0;
}
ulLeft -= 800;
// console.log(ulLeft);
animate(ul, ulLeft);
ulIndex++;
for(var i = 0; i< spanArr.length; i++){
spanArr[i].className = '';
}
//4.3改变页面 第五张图片结束后ulIndex是4
//第六张图片即第一张图片的ulIndex是5 所以求ulIndex % 5恢复ulIndex为0
spanArr[ulIndex % 5].className = 'current';
},3000);
//第二大步 给小圆点span添加点击事件
for(var i = 0; i< spanArr.length; i++){
var span = spanArr[i];
span.index = i;
span.onclick = function(){
//实现点击span后图片移动
var targetLeft = -800 * this.index; //0 - 4
//点击后自动滚动到 当前圆点对应的图片的位置 即左移800*下标
animate(ul, targetLeft);
//记录此时的ulLeft ulIndex 为了继续从当前点击图片向下一张图片移动
ulLeft = targetLeft;
ulIndex = this.index;
//切换当前span选中样式
for(var j = 0; j<spanArr.length; j++){
spanArr[j].className = '';
}
this.className = 'current';
}
}
}
3、样式三：实现带有箭头的录播图
展示时，图片在页面中自动切换，横条随之选中。点击左箭头，图片向左滑动；点击右箭头，图片向右滑动。 鼠标点击小圆点，直接切换显示当前图片。鼠标放入图片中，停止图片滑动，移开时继续滑动。
html+css设置
<body>
<div class="box">
<div class="content">
<div><img src="img/1.jpg" alt="" /></div>
<div><img src="img/2.jpg" alt="" /></div>
<div><img src="img/3.jpg" alt="" /></div>
<div><img src="img/4.jpg" alt="" /></div>
<div><img src="img/5.jpg" alt="" /></div>
<div><img src="img/6.jpg" alt="" /></div>
<div><img src="img/7.jpg" alt="" /></div>
</div>
<div class="control">
<!-- <span class="control-bar current"></span> -->
<!-- <span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span> -->
</div> <span id="pre"></span>
<span id="next"></span>
</div>
</body>
*{margin: 0;padding: 0;}
.box{
width: 310px;
height: 250px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.content{
width: 310px;
height: 220px;
overflow: hidden;
position: relative;
}
.content div{
position: absolute;
top: 0;
left: 0;
}
.content div img{
width: 310px;
height: 220px;
}
.control{
width: 310px;
height: 30px;
background-color: #333;
text-align: center;
}
.control-bar{
display: inline-block;
width: 24px;
height: 5px;
background: url(img/icon.png) no-repeat -24px -790px ;
margin: 12px 2px 0 2px;
cursor: pointer;
}
.control .control-bar:hover{
background: url('img/icon.png') no-repeat -24px -770px;
}
.control .control-bar.current{
background: url('img/icon.png') no-repeat 0 -770px;
}
#pre, #next{
position: absolute;
top: 50%;
margin-top: -35px;
width: 20px;
height: 34px;
background-color: pink;
cursor: pointer;
}
#pre{
left: 3px;
background:url(img/icon.png) no-repeat 0 0;
}
#next{
right: 3px;
background:url(img/icon.png) no-repeat -9px -45px;
}
样式效果如图：
javascript设置
思路：box设置overflow:hidden属性，第一张图片显示在box中，其余图片均隐藏放置在第一张图的右边。当开启动画时，第一张图片向左移动隐藏，下一张图片向左移动显示，依次类推，当显示完最后一张时，继续回到显示第一张图片。
// 前面内容已讲过
// 封装好的获取属性函数
function getStyle(element, styleName){
if(element.currentStyle){
return element.currentStyle[styleName];
}else{
var computedStyle = window.getComputedStyle(element, null);
return computedStyle[styleName];
}
}
//封装好的动画函数
function animate(element,json){
clearInterval(element.timer);
var isStop = false;
element.timer = setInterval(function(){
isStop = true;
for(var key in json){
var current = parseInt(getStyle(element, key));
var target = json[key];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
if(Math.abs(target -current) > Math.abs(step)){
isStop = false;
}else{
current = target;
}
element.style[key] = current + 'px';
}
if(isStop){
clearInterval(element.timer);
}
},30);
} //实现轮播图
window.onload = function(){
var box = document.getElementsByClassName('box')[0];
var contentBox = document.getElementsByClassName('content')[0];
var controlBox = document.getElementsByClassName('control')[0];
var imageDivArr = contentBox.getElementsByTagName('div'); var currentIndex = 0;
var boxWidth = box.offsetWidth;
//1.动态创建横条
for(var i= 0; i < imageDivArr.length; i++){
var span = document.createElement('span');
if(i == 0){
span.className = 'control-bar current';
}else{
span.className = 'control-bar';
}
span.index = i;
controlBox.appendChild(span); //6.设置span点击事件
span.onclick = function(){
//如果当前点击的按钮,就是当前的按钮则不作操作
if(currentIndex != this.index){ //点击的图片，在当前图片的右边
if(this.index > currentIndex){
//当前的图片向左移 移除当前位置
animate(imageDivArr[currentIndex],{left:-boxWidth}); //此时被点击对应的图片放在显示框右边 再进行向左移
currentIndex = this.index;
imageDivArr[currentIndex].style.left = boxWidth; }else{ //点击的图片，在当前图片的右边
animate(imageDivArr[currentIndex],{left:boxWidth}); currentIndex = this.index;
imageDivArr[currentIndex].style.left = boxWidth;
} //
animate(imageDivArr[currentIndex], {left : 0})
//刷新控制条
refresh();
}
}
} //2.放置图片位置
// var boxWidth = box.offsetWidth;
for(var i= 0; i < imageDivArr.length; i++){
var imgDiv = imageDivArr[i];
imgDiv.style.left = boxWidth + 'px';
}
imageDivArr[0].style.left = '0'; //3.从左边划入
// var currentIndex = 0;
function nextImage(){
animate(imageDivArr[currentIndex],{left:-boxWidth}); currentIndex++; if(currentIndex >= imageDivArr.length){
currentIndex = 0;
}
imageDivArr[currentIndex].style.left = boxWidth + 'px'; animate(imageDivArr[currentIndex],{left:0});
refresh();
} //3.1从右边划入
function prevImage(){
animate(imageDivArr[currentIndex],{left:boxWidth}); //最后一张currentIndex = 6 currentIndex--; if(currentIndex < 0){
currentIndex = imageDivArr.length - 1; //返回到最后一张
}
imageDivArr[currentIndex].style.left = (-boxWidth) + 'px'; animate(imageDivArr[currentIndex],{left:0});
refresh();
} //4.刷新横条显示
function refresh(){
for(var i = 0; i < controlBox.children.length; i++ ){
// console.log(controlBox.children[i]);
var bar = controlBox.children[i];
bar.className = 'control-bar'
// console.log(bar);
}
controlBox.children[currentIndex].className = 'control-bar current';
} //点击箭头切换
document.getElementById('next').onclick = nextImage;
document.getElementById('pre').onclick = prevImage; //自动播放
var timer = setInterval(nextImage,2000); box.onmouseover = function (){
clearInterval(timer);
}
//移出时，重新开始定时器
box.onmouseout = function (){
timer = setInterval(nextImage ,2000);
}
}
4、“旋转木马”轮播图
html+css样式设置
<body>
<div class="box"> <!-- 图片设置 -->
<div class="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!-- 左右箭头设置 -->
<div class="control">
<a href="javascript:;" id="prev"></a>
<a href="javascript:;" id="next"></a>
</div>
</div>
</body>
*{margin: 0;padding: 0;}
ul{list-style: none;}
/*大盒子*/
.box{
width: 1000px;
margin: 5px auto;
position: relative;
background-color: pink;
}
/*左右箭头*/
#next, #prev{
position: absolute;
width: 76px;
height: 112px;
top: 0;
background: url(../images/next_1.png) no-repeat 0 0;
z-index: 5;
}
#next{
right: 10px;
}
#prev{
left: 10px;
background: url(../images/prev_1.png) no-repeat 0 0;
}
.box .content li{
position: absolute;
}
.box .content li img{
width: 100%;
}
/*可以通过css设置定位
.box .content li.li1{
width: 300px;
opacity: 0.4;
top: 30px;
left: 50px;
z-index: 1;
}
.box .content li.li2{
width: 400px;
opacity: 0.7;
top: 100px;
left: 0;
z-index: 2;
}
.box .content .li3{
width: 600px;
opacity: 1;
top: 200px;
left: 200px;
z-index: 3;
}
.box .content .li4{
width: 400px;
opacity: 0.7;
right: 0;
top: 100px;
z-index: 2;
}
.box .content .li5{
width: 300px;
opacity: 0.4;
top: 30px;
right: 50px;
z-index: 1;
}
*/
javascript设置
window.onload =function () {
//定位置 五个位置对应五个json对象,放入数组中,可以灵活的获取这些json对象
var json = [{
width: 300,
opacity: 0.4,
top: 30,
left: 50,
zIndex: 1
},{
width: 400,
opacity: 0.7,
top: 100,
left: 20,
zIndex: 2
},{
width: 700,
opacity: 1,
top: 200,
left: 150,
zIndex: 3
},{
width: 400,
opacity: 0.7,
top: 100,
left: 580,
zIndex: 2
},{
width: 300,
opacity: 0.4,
top: 30,
left: 650,
zIndex: 1
}];
refreshImageLocation(0);
function refreshImageLocation(index){
//默认情况下 第i个对应i-index个位置
var liArr = $('li');
console.log(liArr);
for(var i = 0; i < liArr.length; i++){
var li = liArr[i];
var locationIndex = i - index;
if(locationIndex < 0){
locationIndex += 5;
}
var locationDate = json[locationIndex];
console.log(locationDate);
animate(li, locationDate, null);
}
}
var index = 0;
//设置点击箭头事件
$('#next').onclick = function(){
// console.log('#next');
index++;
if(index == 5){
index = 0;
}
refreshImageLocation(index);
}
$('#prev').onclick = function(){
index--;
if(index < 0){
index = 4;
}
refreshImageLocation(index);
}
}