轮播在网页中是个很常见的效果，表现方式也各式各样，其实轮播最重要的是思想，逻辑对了的话，效果只是换个表现方式而已。
轮播实现的思路
这是一个简易轮播范例，分析一下实现思路。
1. 布局
因为图片的播放其实本质就是固定视窗大小，超出窗口的内容隐藏，在窗口展示一张图片，然后更改父元素的left/top值，造成播放图片的效果，如下代码，HTML部分的代码比较简单,上面的ul的li里面放4张图片，下面的ul里4个li当做按钮，主要是CSS 在写的时候需要注意给轮播的元素定位，这样更改其left/top的值才有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Carousel</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body,ul,li,div{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}
body{
background: #999;
}
.box{
border: 8px solid rgba(255, 255, 255, 0.794);
width: 400px;
height: 300px;
margin: 0 auto;
margin-top: 180px;
border-radius: 6px;
}
.carousel{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel .img-ct{
position: absolute;
overflow: hidden;
}
.carousel .img-ct>li{
float: left;
}
.carousel .img-ct img{
width: 400px;
height: 300px;
}
.carousel .pre{
width: 40px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
color: #fff;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
z-index: 1;
display: inline-block;
top: 50%;
margin-top: -20px;
left: 10px;
}
.carousel .next{
width: 40px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
color: #fff;
border: 1px solid #fff;
border-radius: 50%;
position: absolute;
z-index: 1;
display: inline-block;
top: 50%;
margin-top: -20px;
right: 10px;
}
.carousel .bullet{
position: absolute;
width: 100%;
font-size: 0;
bottom: 10px;
text-align: center;
}
.carousel .bullet>li{
display: inline-block;
width: 40px;
height: 7px;
border: 1px solid #fff;
border-radius: 5px;
margin: 0 5px;
cursor: pointer;
}
.carousel .bullet .active{
background-color: #f60;
}
</style>
</head>
<body>
<div class="box">
<div class="carousel">
<ul class="img-ct">
<li><a href="javascript:;"><img src="http://img04.sogoucdn.com/app/a/100520024/519ec93ed0f0bf853637cb4755e158cc" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img04.sogoucdn.com/app/a/100520024/5e223e791c575337e25a9cb6715f2d5b" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img01.sogoucdn.com/app/a/100520024/b60087abf6ddc225892221a7e80c10dd" alt=""></a></li>
<li><a href="javascript:;"><img src="http://img01.sogoucdn.com/app/a/100520024/5962f248d4b363af862f43bfbeea07e4" alt=""></a></li>
</ul>
<a class="pre" href="javascript:;"><</a>
<a class="next" href="javascript:;">></a>
<ul class="bullet">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
jQuery实现轮播的思路
需要实现的功能是点击>到下一张，点击<到上一张，每个图片对应的按钮样式也随着图片的切换而切换，点击按钮时，则切换到对应的图片上，而在不点击的时候，图片也需要自动播放到下一张，如果用户鼠标移入，也许是对图片上的内容感兴趣，这时候应该停止自动播放，移出的时候再继续播放，先看js代码，如下：
//获取需要操作的元素
var $imgCt = $('.img-ct') //图片容器
var $imgs = $('.carousel .img-ct>li') //所有的图片
var $preBtn = $('.carousel .pre') //上一张按钮
var $nextBtn = $('.carousel .next') //下一张anniu
var $bullet = $('.bullet li') //所有的按钮
var $box = $('.box') //整个轮播的容器
var imgCount = $imgs.length //图片的个数，注意，这里获取的值不会随着个数的增加而改变
var imgWidth = $imgs.width() //图片的宽度
//定义一个变量，用于记录图片当前的下标
var pageIndex = 0
//定义一个按钮锁，防止用户重复点击
var isAnimate = false
//因为在点到最后一张图的时候再往下就没东西了，所以我们克隆一份第一张图片放在轮播的最后，
//如果当前窗口展示的是我们克隆出的第一张图片，就让浏览器跳到第一张图片上；
//同理，克隆最后一张图片放在开头；
//设置容器的宽度，不然浮动元素会因为网页的缩小从而折行，
//因为克隆了最后一张图片放到了第一张，所以当前展示的是最后一张，我们将当前展示的设置成第一张；
$imgCt.append($imgs.first().clone())
$imgCt.prepend($imgs.last().clone())
$imgCt.width((imgCount + 2) * imgWidth)
$imgCt.css({left: -imgWidth})
//点击上一张，执行 playPre()
$preBtn.click(function(){
playPre(1)
})
//点击下一张，执行 playNext()
$nextBtn.click(function(){
playNext(1)
})
//点击下一张绑定的函数，参数len代表跳转几个图片的宽度，
function playNext(len){
//状态锁，点击之后值为reue，如果在函数执行过程中重复点击，则退出，不往下执行
if(isAnimate) return
isAnimate = true
//当按钮被点击，让图片容器的left值-=(传递参数的值*图片的宽度；即跳转到第几张图片)
$imgCt.animate({
left: '-=' + (len * imgWidth)
},function(){
pageIndex += len
if(pageIndex === imgCount){
pageIndex = 0
$imgCt.css({left: -imgWidth})
}
//执行按钮样式切换函数
setBullet()
//点击完毕之后，状态锁恢复成可点击状态
isAnimate= false
})
}
//点击上一张按钮绑定的函数，思路同上
function playPre(len){
if(isAnimate) return
isAnimate = true
$imgCt.animate({
left: '+=' + (len * imgWidth)
},function(){
pageIndex -= len
if(pageIndex < 0){
pageIndex = imgCount - 1
$imgCt.css({left: -imgCount*imgWidth})
}
setBullet()
isAnimate = false
})
}
// 给所有按钮添加点击事件，点击跳转到对应的图片上，
$bullet.click(function(){
//定义一个变量index，存储当前按钮的index
var index = $(this).index()
//判断，如果当前按钮的index小于之前pageIndex，则执行palyNext，反之执行playPre，参数等于两值相减，
if(index > pageIndex){
playNext(index - pageIndex)
}else if(index < pageIndex){
playPre(pageIndex - index)
}
})
//设置按钮的样式，随着图片的改变展示相对应的按钮样式
function setBullet(){
$bullet.removeClass('active')
.eq(pageIndex)
.addClass('active')
}
//打开页面，自动执行图片播放
function autoPlay(){
playNext(1)
}
//设置一个定时器timing，每秒执行一次autoPlay
var timing = setInterval(autoPlay,1000);
//给整个轮播的父元素添加一个鼠标的移入移出，移入停止播放，移出继续播放；
$box.on('mouseover',function(){
clearInterval(timing)
})
$box.on('mouseout',function(){
timing = setInterval(autoPlay,1000);
})
写到这里，一个简单的轮播效果就算实现了，还是那句话，重要的是思路，图片的播放方式都可以根据需求来写。
网友评论