用jq实现的轮播图
总结了一下所学 用jq写了个轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播jq</title>
<script type="text/javascript" src="jquery.min.js" ></script>
</head>
<style>
*{margin:0;padding:0}
ul,li{list-style: none;}
.wraper{
margin:100px 200px;
position: relative;
}
.banner{
position: relative;
overflow: hidden;
}
.banner .lunbo{
position: relative;
overflow: hidden;
z-index: 10;
}
.lunbo li{
float: left;
display: inline
}
.btn{
position: absolute;
left: 250px;
bottom: 35px;
z-index: 10;
}
.btn li{
float: left;
width:20px;
height: 20px;
background-color: darkgray ;
margin-left: 5px;
line-height: 20px;
text-align: center;
color: white;
cursor: default;
}
.wraper .btn .active{
background-color:tomato ;
}
.prev{
position: absolute;
left: 15px;
top: 50%;
z-index: 10;
opacity: .5;
}
.next{
position: absolute;
left: 485px;
top: 50%;
z-index: 10;
opacity: .5;
}
</style>
<body>
<div class="wraper">
<div class='banner'>
<ul class="lunbo">
<li>
<img src="img/1.jpg">
</li>
<li>
<img src="img/2.jpg">
</li>
<li>
<img src="img/3.jpg">
</li>
</ul>
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>
<ul class='btn'>
</ul>
</div>
</div>
</body>
</html>
<script>
//获取图片的高度和宽度 和轮播的个数
var w=$(".lunbo img").width();
var h=$(".lunbo img").height()
var leng=$('.lunbo li').length
//声明一个常量
var auto//定时器
var i=0
//设置外层轮播宽高 为一张图片大小 做隐藏处理
$('.banner').css({'width':w,'height':h})
//设置轮播的ul宽度为所有图片的宽度 便于后辈元素浮动
$('.lunbo').css({'width':w*leng,'height':h})
//生成btn
for(var j=0;j<leng;j++){
$('.btn').append('<li>'+(j+1)+'</li>')
}
$('.btn li').eq(0).addClass('active')
//按钮点击切换
$('.btn li').each(function(n){
$(this).click(function(){
i=n
play(i)
})
})
//自动播放
autoPlay()
$(".btn").hover(function(){
//滑入清除定时器
clearInterval(auto)
},function(){
//滑出则重置定时器
autoPlay();
});
$(".next").hover(function(){
//滑入清除定时器
clearInterval(auto)
},function(){
//滑出则重置定时器
autoPlay();
});
$(".prev").hover(function(){
//滑入清除定时器
clearInterval(auto)
},function(){
//滑出则重置定时器
autoPlay();
});
//点击下一张 i自增 切换
$('.next').click(function(){
(i<leng-1) ? (i++) : (leng-1);
play(i)
/* if(i<leng-1){
i++
play(i)
}else{
//点击到最后一张时 定格在最后一张
i=leng-1
//点击到最后一张时 继续轮播 到下一张（即第一张）
//i=0
play(i)
}*/
})
//点击上一张 i自减 切换
$('.prev').click(function(){
(i>0) ? (i--) : 0;
play(i)
/* if(i>0){
i--
play(i)
}else{
//回溯到第一张时 定格在第一张
i=0
//回溯到第一张时 继续轮播到上一张（即最后一张）
//i=leng-1
play(i)
}*/
})
//轮播方法
function play(i){
$('.banner .lunbo').animate({right:w*i},500)
$('.btn li').removeClass('active').eq(i).addClass('active')
}
//自动播放
function autoPlay(){
auto=setInterval(function(){
if(i<leng-1){
i++
}else{
i=0
}
//调用变换处理函数
play(i)
},2000)
}
</script>
轮播图本身的原理不难理解 主要是要结构上组织要合理
