jq banner轮播
jQuery实现的网站banner图片无缝轮播效果完整实例
先看效果图：
Html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>banner轮播</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<style>
body {
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
}
li {
list-style-type: none;
list-style: none;
}
.banner {
overflow: hidden;
width: 100%;
}
.banner_tuli {
width: 100%;
overflow: hidden;
position: relative;
}
.banner_tuli ul {
overflow: auto;
width: 100000px;
}
.banner_tuli ul li {
float: left;
}
.banner_tuli ul li img{
max-height: 600px;
max-width: 1920px;
}
.list {
position: absolute;
width: 400px;
height: 15px;
left: 50%;
margin-left: -200px;
margin-top: -20px;
}
.list ul {
overflow: auto;
}
.list ul li {
list-style-type: none;
float: left;
background: #333333;
margin-right: 33px;
width: 100px;
height: 10px;
cursor: pointer;
}
.list ul li.on{
background: #ff0000;
}
</style>
<body>
<div class="banner">
<div class="banner_tuli">
<ul>
<li><img src="img/banner01.jpg" /></li>
<li><img src="img/banner02.jpg" /></li>
<li><img src="img/banner03.jpg" /></li>
</ul>
</div>
<div class="list">
<ul>
</ul>
</div>
</div>
</body>
<script>
$(function(){
//获取窗口的宽度
var width_win=$(window).width();
//获取li的个数
var ligeshu=$(".banner_tuli ul li").length;
//装banner的ul的宽度=窗口的宽度*li的个数
$(".banner_tuli").css({"width":width_win*ligeshu+"px"});
//li的宽度=窗口的宽度
$(".banner_tuli ul li").css({"width":width_win+"px"});
//定义b=0
var b=0;
//有多少张图片就循环出多少底部的状态
var hemltext="";
for(var i=0;i<ligeshu;i++){
console.log(i)
if(i=="0"){
hemltext+="<li class='on'></li>";
}else{
hemltext+="<li></li>";
}
}
$(".list ul").html(hemltext);
//有多少张图片就循环出多少底部的状态 end
//点击图片的li
$(document).on("click",".list ul li",function(){
//停止还没执行完的动画
$(".banner_tuli").stop();
//获取点击的li
b=$(this).index();
//点击的li添加class，去掉其他的li的class
$(this).addClass("on").siblings("li").removeClass("on");
//装banner的ul的div做动画
$(".banner_tuli").animate({
"left":-b*width_win+"px"
},430);
})
function left(){
b=b+1;
//b等于li的长度时，让b等于0
if(b==ligeshu){
b=0;
}else{
}
//执行动画，
$(".banner_tuli").animate({
"left":-b*width_win+"px"
},430);
//给li添加当前状态
$(".list ul li").eq(b).addClass("on").siblings("li").removeClass("on");
}
//每三秒执行left
var lun = setInterval(left,3000);
//当鼠标在banner上时，不执行left事件
$(".banner").mouseover(function(){
clearInterval(lun);
})
//当鼠标离开banner时，每三秒执行left
$(".banner").mouseout(function(){
lun = setInterval(left,3000);
})
})
</script>
</html>
