您的位置：首页 > 其它

无缝轮播切换

2016-06-28 17:00 363 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝轮播切换</title>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
*{
margin:0;
padding:0;
list-style-type:none;
}
.bannerBg{
width:1080px;
height:400px;
margin:0 auto;
border:1px solid #CCC;
overflow:hidden;
position:relative;
}

#bannerImg{
width:6000px;
position:absolute;
left:0;
top:0;
}
#bannerImg li{
width:1080px;
float:left;
}
.bannerBg .pointBg{
width:50%;
position:absolute;
left:0;
bottom:10px;
text-align:center;
margin-left:50%;
}
.bannerBg .pointBg li{
width:10px;
height:10px;
border-radius:50%;
background:#eee;
margin-left:3px;
float:left;
}
.bannerBg .pointBg li.on{
background:#F60;
}
.pre{
width:40px;
height:50px;
position:absolute;
left:0;
top:50%;
color:#FFF;
font-size:35px;
background:#000;
font-family:"宋体";
text-align:center;
line-height:50px;
cursor:pointer;

}
.nex{
width:50px;
height:50px;
position:absolute;
right:0;
top:50%;
color:#FFF;
font-size:35px;
background:#000;
font-family:"宋体";
text-align:center;
line-height:50px;
cursor:pointer;

}
</style>
</head>

<body>
<!--整个banner的容器-->
<div class="bannerBg">
<!--banner图的容器-->
<ul id="bannerImg">
<li><a href="#"><img src="images/banner-1.jpg" /></a></li>
<li><a href="#"><img src="images/banner-2.jpg" /></a></li>
<li><a href="#"><img src="images/banner-3.jpg" /></a></li>
<li><a href="#"><img src="images/banner-4.jpg" /></a></li>
</ul>
<!--banner图的容器 结束-->
<!--banner底部圆点容器-->
<ul class="pointBg"></ul>
<!--banner前进后退容器-->
<div class="pre"><</div>
<div class="nex">></div>
</div>
<!--整个banner的容器 结束-->
<script>
$(function(){
$(".pre").hide();//隐藏前进后退按钮，鼠标划入banner容器时显示
$(".nex").hide();
var i=0;//定义i变量
var clone=$("#bannerImg li").first().clone();//查找#bannerImg li的第一个元素并复制。
$("#bannerImg").append(clone);//把复制的图添加到banner最后
var size = $("#bannerImg li").size();//查找banner图的数量并赋值给变量size
for(var j=0;j<size-1;j++){          //动态添加圆点
$(".pointBg").append("<li></li>")
}
$(".pointBg li").first().addClass("on");

//左
$(".pre").click(function(){
moveL()
})
function moveL(){    //封装向左滑动函数
i++
if(i==size){
$("#bannerImg").css({left:0});
i=1;
}
$("#bannerImg").animate({left:-i*1080},500);
if(i==size-1){
$(".pointBg li").eq(0).addClass("on").siblings().removeClass("on");
}
else{
$(".pointBg li").eq(i).addClass("on").siblings().removeClass("on");
}

}

//圆点,鼠标滑过圆点，banner变为对应的图。
$(".pointBg li").hover(function(){
var index=$(this).index();
i=index;
$("#bannerImg").animate({left:-index*1080});
$(this).addClass("on").siblings().removeClass("on");
})
//定时器，banner自动滚动
var t=setInterval(moveL
,2000)
$(".bannerBg").hover(function(){//鼠标进入，停止计时器，鼠标滑出，开始执行滑动函数
clearInterval(t);
},function(){
moveL()
})
//右
$(".nex").click(function(){
moveR()
})
function moveR(){  //封装向右滑动函数
i--
if(i==-1){

$("#bannerImg").css({left:-(size-1)*1080});
i=size-2
}
$("#bannerImg").animate({left:-i*1080},500);
$(".pointBg li").eq(i).addClass("on").siblings().removeClass("on");
}
//前进后退按钮隐藏显示
$(".bannerBg").mouseenter(function(){
$(".pre").show();
$(".nex").show();
})
$(".bannerBg").mouseleave(function(){
$(".pre").hide();
$(".nex").hide();
})
})

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航