前言:固定宽度的轮播1200px
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.banner2{
height: 400px;
width: 1200px;
/*margin: 0 auto;*/
overflow: hidden;
position: relative;
background: #FE0;
z-index: 22;
}
.banner2 .img{
width:5000000px;
position:absolute;
left:0;
top:0;
height: 400px;
}
.banner2 .img li{width: 1200px;height: 500px;float: left;list-style: none;}
.banner2 .num{position:absolute;width:100%;bottom:10px;left:0;text-align:center;font-size:0;}
.banner2 .num li{width:10px;height:10px;background:#888;border-radius:50%;display:inline-block;
margin:0 3px;cursor:pointer;}
.banner2 .num .on{background:#f60;}
.banner2 .btnn{width:30px;height:50px;background:rgba(0,0,0,0.5);
position:absolute;top:50%;margin-top:-25px;cursor:pointer; text-align:center;line-height:50px;
color:#fff;font-size:40px;font-family:"SimSun";
display:none;
}
.banner2:hover .btnn{display:block;}
.banner2 .btn_l{left:0;}
.banner2 .btn_r{right:0;}
.banner2 .img li a{display: inline-block;width: 100%;height: 100%;}
.banner2 .img li img{
width:100%;
height: 400px;
}
.banner2 .bannernum{
position: absolute;
left: 50%;
transform: translate(-50%);
font-size:20px;
bottom: 15px;
/*display: none;*/
}
.banner2>.computertxt{
width: 230px;
font-size: 46px;
color: #333;
font-weight: bold;
position: absolute;
bottom:13px;
right: 40px;
}
.banner2>.computertxt img{width: 100%;}
</style>
</head>
<body>
<div class=" banner2">
<ul class="img">
<li>
<a target="_blank" href="##">这里放图片1</a>
</li><li>
<a target="_blank" href="##" >这里放图片2</a>
</li>
</ul>
<ul class="num">
</ul>
<div class="btnn btn_l"><</div>
<div class="btnn btn_r">></div>
</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
var i=0;
var clone=$(".banner2 .img li").first().clone();
$(".banner2 .img").append(clone);
var size=$(".banner2 .img li").size();
for(var j=0;j<size-1;j++){
$(".banner2 .num").append("<li></li>");
}
// 鼠标滑入原点
$(".banner2 .num li").hover(function(){
var index=$(this).index();
i=index;
$(".banner2 .img").stop().animate({left:-index*1200},500);
$(this).addClass("on").siblings().removeClass("on");
});
// 自动轮播
var t=setInterval(moveL,2000);
// 对banner2的定时器操作
$(".banner2").hover(function(){
clearInterval(t);
},function(){
t=setInterval(moveL,2000);
});
//第一个li样式
$(".banner2 .num li").first().addClass("on");
// 左
$(".banner2 .btn_l").click(function(){
moveL();
});
// 右
$(".banner2 .btn_r").click(function(){
moveR();
});
// 封装的动画函数
function moveL(){
i++;
if(i==size){
// i=0;
$(".banner2 .img").css({left:0});
i=1;
}
$(".banner2 .img").stop().animate({left:-i*1200},500);
if(i==size-1){
$(".banner2 .num li").eq(0).addClass("on").siblings().removeClass("on");
}else{
$(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
}
}
function moveR(){
i--;
if(i==-1){
$(".banner2 .img").css({left:-(size-1)*1200});
i=size-2;
}
$(".banner2 .img").stop().animate({left:-i*1200},500);
$(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
}
});
</script>
</body>
</html>
效果: