先把要写的轮播图框架简单的写一下。要实现自动轮播,点击切换图片和点击跳转指定的图片。
<div id="box">
<div class="inner">
<ul class="swiper">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol class="pagination">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div class="control">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</div>
简单的写一下css的样式,方便我们使用,修饰轮播图的基本结构
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
height: 200px;
padding: 5px;
border: 1px solid #000;
margin: 50px auto;
}
.inner {
width: 500px;
height: 200px;
position: relative;
overflow: hidden;
}
ul {
list-style: none;
width: 3000px;
height: 200px;
position: absolute;
}
ul > li {
width: 500px;
height: 200px;
float: left;
}
ol {
list-style: none;
position: absolute;
right: 20px;
bottom: 20px;
}
ol > li {
float: left;
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 25px;
margin-right: 20px;
text-align: center;
line-height: 25px;
cursor: pointer;
}
ol > li.current {
background-color: orange;
color: #fff;
}
.control > span {
position: absolute;
top: 50%;
margin-top: -20px;
display: inline-block;
width: 25px;
height: 40px;
background-color: rgba(0, 0, 0, 0.31);
color: white;
font-size: 20px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.right {
right: 0px;
}
.control {
display: none;
}
#box:hover .control {
display: block;
}
/* 背景颜色版*/
ul > li {
font-size: 60px;
color: #fff;
text-align: center;
line-height: 200px;
}
ul > li:nth-child(1) {
background-color: red;
}
ul > li:nth-child(2) {
background-color: orange;
}
ul > li:nth-child(3) {
background-color: purple;
}
ul > li:nth-child(4) {
background-color: hotpink;
}
ul > li:nth-child(5) {
background-color: blue;
}
ul > li:nth-child(6) {
background-color: red;
}
</style>
这里我们使用的是jQuery的方法写的,首先别忘记引入我们的jQuery文件。
然后编写我们要实现的步骤,每一步代码都有详细的注释,无缝轮播的重点就是给客户视觉上看不出图片切换了,原理就是在最后面克隆第一张图片,然后迅速回到第一张,然后在接着循环第二张图片。这样视觉上看不到直接切换到第一张的。
$.fn.lunbo=function(focusClass){
// 通过this找到几个重要的元素
var $swiper=this.find('.swiper')
var $pagination=this.find('.pagination')
var $control=this.find('.control')
// 每次轮播滑动的宽度
var moveWidth=$swiper.children()[0].offsetWidth;
// 克隆第一个元素拼接到最后
$swiper.append($swiper.children().eq(0).clone(true));
// 添加一种图之后给父元素的宽度变宽
$swiper.width(($swiper.children().length+1)*moveWidth)
// 用来轮播的索引值
var index=0;
// 焦点图轮播的索引
var focusIndex=0;
// 定义开闭原则 决定是否启用焦点图代码功能
var isFocus=$pagination.length!==0
// 定义开闭原则 决定是否启用轮播图代码功能
var isControl=$control.length!==0
// 页面加载的时候启动定时器自动轮播
var timer=setInterval(autoPlay,2000)
// 鼠标移入移出开始以及停止定时器
this.hover(function(){
clearInterval(timer)
},function(){
timer=setInterval(autoPlay,2000)
})
// 焦点图点击 焦点功能实现
if(isFocus){
$pagination.children().click(function(){
// 让索引值保持一致
index=focusIndex=$(this).index()
$swiper.stop().animate({
left:-index*moveWidth
},500)
$(this).addClass(focusClass).siblings().removeClass(focusClass)
})
}
if(isControl){
$control.on('click','.left',function(){
index--;
if(index<0){
$swiper.css('left',-($swiper.children().length-1)*moveWidth)
index=$swiper.children().length-2
}
$swiper.stop().animate({
left:-index*moveWidth
},500)
// 下面的轮播焦点图
focusIndex--;
if(focusIndex<0){
focusIndex=$pagination.children().length-1
}
$pagination.children().eq(focusIndex).addClass(focusClass).siblings().removeClass(focusClass)
}).on('click','.right',function(){
autoPlay()
})
}
function autoPlay(){
index++;
// 如果超过假一号的索引 我们就闪现到真一号
if(index>$swiper.children().length-1){
$swiper.css('left',0)
// 真2号图片的索引
index=1
}
$swiper.stop().animate({
left:-index*moveWidth
},500)
// 下面的小圆点的轮播
focusIndex++;
if(focusIndex>$pagination.children().length-1){
focusIndex=0
}
$pagination.children().eq(focusIndex).addClass(focusClass).siblings().removeClass(focusClass)
}
}
$('#box').lunbo('current')