<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
<meta charset="utf-8"> | |
<script type="text/jscript" src="js/jquery-1.11.3.js"></script> | |
<style type="text/css"> | |
*{margin: 0;padding: 0} | |
.fl{float: left;} | |
.fr{float: right;} | |
.cb{clear: both;} | |
ul{list-style: none;} | |
.lunbo{width: 730px;height: 458px;overflow: hidden;position: relative;margin: 0 auto;left: -30px;top: 188px;} | |
.lunbo img{float: left;} | |
.box{width: 5110px} | |
.btn{width: 100%;height: 100px;position: absolute;top: 40%;display: none;} | |
.lunbo .btn-l,.lunbo .btn-r{background-color: rgba(249,38,114,0.5);width: 50px;height: 100px;font-size: 82px;color: #ccc;border-radius: 10px;} | |
.list-li{position: absolute;bottom: 10px;left: 20%} | |
.list-li li{float: left;width: 50px;height: 50px;background-color: #F9263E;line-height: 50px;text-align: center;border-radius: 50%;margin-left: 10px;color: #fff;font-size: 22px;} | |
/* 点缀 */ | |
.dianzui{width: 100%;height: 4px;background-color: #ccc;position: absolute;bottom: 0px} | |
.dian{width: 1px;height:4px;background-color: red } | |
/* 遮罩层 */ | |
.fugai{position: absolute;left: 0;top: 0;height: 100%;width: 730px; | |
} | |
.fugai1,.fugai2,.fugai3{width: 243px;height: 730px;float: left;z-index: 999;overflow: hidden;} | |
.btn-con-l,.btn-con-r{width: 150px;height: 100px;} | |
.btn-con-l img,.btn-con-r img{width: 100%;height: 100%} | |
</style> | |
</head> | |
<body> | |
<div class="lunbo"> | |
<div class="fugai"> | |
<div class="fugai1"></div> | |
<div class="fugai2"></div> | |
<div class="fugai3"></div> | |
<div class="cb"></div> | |
</div> | |
<div class="dianzui"> | |
<div class="dian"></div> | |
</div> | |
<div class="box"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo1.jpg"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo2.jpg"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo3.jpg"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo4.jpg"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo5.jpg"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo6.jpg"> | |
<img src="http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo1.jpg"> | |
</div> | |
<div class="btn"> | |
<div class="btn-l fl"><</div> | |
<div class="btn-con-l fl"></div> | |
<div class="btn-r fr">></div> | |
<div class="btn-con-r fr">r</div> | |
</div> | |
<ul class="list-li"> | |
<li>1</li> | |
<li>2</li> | |
<li>3</li> | |
<li>4</li> | |
<li>5</li> | |
<li>6</li> | |
</ul> | |
</div> | |
<script type="text/javascript" src="jquery.js"></script> | |
<script type="text/javascript"> | |
var i=0; | |
var stop; | |
/* 每隔2秒运行一次轮播*/ | |
stop=setInterval(function(){ | |
i++; | |
if(i>6){ | |
i=1; | |
} | |
xiaoguo2(i); | |
xiaoguo(i); | |
},4000) | |
/* 动作函数*/ | |
function xiaoguo2(n){ | |
/* 块一*/ | |
$('.fugai1') | |
.css({"background-p_w_picpath":"url(http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'}) | |
.animate({"backgroundPosition-x":-730+'px'},3000) | |
.css({'display':'none'}) | |
//块二 | |
$('.fugai2') | |
.css({"background-p_w_picpath":"url(http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":-200+'px'}) | |
.animate({"backgroundPosition-x":-730*2+'px'},3000) | |
.animate({'display':'none'}) | |
//块三 | |
$('.fugai3') | |
.css({"background-p_w_picpath":"url(http://www.17sucai.com/preview/566324/2016-07-01/%E8%BD%AE%E6%92%AD/p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'}) | |
.animate({"backgroundPosition-x":-730*3+'px'},3000) | |
.animate({'display':'none'}) | |
/* $('.fugai') | |
.css({"background-p_w_picpath":"url(p_w_picpath/lunbo"+n+".jpg)",'background-repeat':'no-repeat','display':'block',"backgroundPosition-x":0+'px'}) | |
.deplay(3000).animate({"backgroundPosition-x":-730*3+'px'},3000) | |
.animate({'display':'none'},10) */ | |
} | |
$('.list-li>li').eq(0).css({'background-color':'orange'}) | |
function xiaoguo(n){ | |
var b=n-1; | |
$('.list-li>li').css({'background-color':'#F9263E'}) | |
$('.list-li>li').eq(b).css({'background-color':'orange'}) | |
$('.dian').animate({'width':730+'px'},2000) | |
$('.dian').animate({'width':0+'px'},100) | |
$('.box').animate({'margin-left':-n*730+'px'},2000,function(){ | |
if(n==6){ | |
$('.box').css({'margin-left':0+'px'}) | |
} | |
}) | |
} | |
/* 左右按钮*/ | |
function huan(n){ | |
var j=i; | |
i=i+n; | |
if(i>6){ | |
i=1; | |
} | |
if(i<0){ | |
i=5; | |
} | |
xiaoguo(i); | |
} | |
//左箭头 | |
$('.btn-l').click(function(){ | |
clearInterval(stop); | |
stop=null; | |
huan(-1); | |
if(i==0){ | |
$('.btn-con-l').html('<img src="p_w_picpath/lunbo'+parseInt(6)+'.jpg">') | |
}else{ | |
$('.btn-con-l').html('<img src="p_w_picpath/lunbo'+parseInt(i)+'.jpg">') | |
} | |
$('.box').stop(true,true); | |
$('.dian').stop(true,true); | |
}); | |
//右箭头 | |
$('.btn-r').click(function(){ | |
clearInterval(stop); | |
stop=null; | |
huan(1); | |
if(i==5){ | |
$('.btn-con-r').html('<img src="p_w_picpath/lunbo'+parseInt(1)+'.jpg">') | |
}else if (i==6) { | |
$('.btn-con-r').html('<img src="p_w_picpath/lunbo'+parseInt(2)+'.jpg">') | |
}else{ | |
$('.btn-con-r').html('<img src="p_w_picpath/lunbo'+parseInt(i+2)+'.jpg">') | |
} | |
$('.box').stop(true,true); | |
$('.dian').stop(true,true); | |
}); | |
//$('.btn-l').click(function(){huan(-1);}); | |
//$('.btn-r').click(function(){huan(1);}); | |
/* 鼠标放上大块*/ | |
$('.lunbo').mouseover(function(){ | |
clearInterval(stop); | |
stop=null; | |
$('.btn').show(); | |
}) | |
/* 鼠标离开大块*/ | |
$('.lunbo').mouseout(function(){ | |
if(stop==null){ | |
stop=setInterval(function(){ | |
i++; | |
if(i>6){ | |
i=1; | |
} | |
xiaoguo(i); | |
xiaoguo2(i); | |
},4000) | |
} | |
$('.btn').hide(); | |
$('.btn-con-l').text(''); | |
$('.btn-con-r').text(''); | |
}) | |
/*按钮小标题*/ | |
$('.list-li>li').mouseover(function(){ | |
clearInterval(stop); | |
stop=null; | |
i= Number($(this).text()); | |
xiaoguo($(this).text()) | |
$('.box').stop(true,true); | |
$('.dian').stop(true,true); | |
}) | |
</script> | |
</body> | |
</html> |
转载于:https://blog.51cto.com/warmdoll/1878322