大多数新手前端总会遇到bannner轮播的问题，网上的资源也可以，如superslide.com。不过如果能自己写一遍bannner轮播，能很好的将jQuery的基础知识点串联起来，复习并加深印象。这里是我自己整理编写的代码，如果你了解了jQuery的基本方法事件，能够很容易看明白。这里分三步来实现。注：bannner轮播有N多种实现方法，先学会一种，能够融会贯通即可，不必纠结简易。
先上HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>banner slide演示</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
var Run=true
var Num=$('#slideWrap .slide>li').length //定义bannner的数量，$('#slideWrap .slide>li').length也可以直接用阿拉伯数字代替，这里使用“.length”会显得专业。
var NumHTML='<ul class="num">'
for(var i=1;i<=Num;i++){
NumHTML+='<li>'+i+'</li>'
} //使用一个for循环，将bannner上的页码动态添加到bannner代码后
NumHTML+='</ul>'
$('.slide').after(NumHTML) //使用after()方法，第一步页码动态生成结束
//css中给bannner设置display：none；z-index：0 在<li>标签后面模拟添加style="display:block;z-index:1"，就可以控制哪张图片出现
function showSlide(i){
if(i==$(".num>li").index($('.num>li.current'))){ //加判断，避免同一张出现重复效果，注意index用法
return null
}
$(".slide>li").finish().filter(':visible').css({'z-index':'0'}).fadeOut().end() 使用filter(':visible')方法“过滤”筛选出目标。finish()方法结束动画延迟
.eq(i).css({'z-index':'1'}).fadeIn();
$(".num>li").finish().filter('.current').finish().removeClass().end()
.eq(i).addClass('current');
}
showSlide(0)
$(".num>li").mouseenter(function(){
showSlide($(".num>li").index(this))
})
//发动机准备就绪：基本效果已经达到。
$('.slide>li').hover(function(){ //实现鼠标hover停止轮播
Run=false
},function(){
Run=true
})
setInterval(function(){
if(Run){ //这行注意Run的true判断
if($(".num>li.current").next().length==0){
$(".num>li").eq(0).triggerHandler('mouseenter')
}else{
$(".num>li.current").next().triggerHandler('mouseenter')
}
}
},1000)
/* var j=1
setInterval(function(){
if(j=='3'){j=0}
showSlide(j)
j++
},1000)
*/ //一种简单的定时器代码，实现同样效果
})
</script>
<link rel="stylesheet" type="text/css" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="slideWrap">
<ul class="slide">
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</body>
</html>
简单的CSS样式
#slideWrap{width: 980px;height: 460px;margin: 0 auto;overflow: hidden;position: relative;}
#slideWrap .slide>li{position: absolute;top: 0;display: none;z-index: 0;}
.num{position: absolute;width: 100px;height: 20px;bottom: 20px;margin-left:450px;z-index: 2;}
.num>li{float: left;width: 20px;height: 20px;border-radius: 20px;background: #eee;margin-left: 10px;line-height: 20px;text-align: center;}
.current{color: red;font-weight: bold;}
网友评论