Warning: date(): Invalid date.timezone value 'HKT', we selected the timezone 'UTC' for now. in /home/mrgcom/public_html/catalog/controller/common/footer.php on line 48 图片无缝轮播

The One 专一

图片无缝轮播

<!doctype html>

<html>

<head><meta charset="utf-8"><title>jquery轮播图</title>

<script type="text/javascript" src="image/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var w=560;

var l=0;

var timer=null;

var len=$("ul li").length*2;

$("ul").append($("ul").html()).css({'width':len*w,'left':-len*w/2});


timer = setInterval(init,3000);

function init(){

$(".scroll .next").trigger('click');

}

$("ul li").hover(function(){

clearInterval(timer);

},function(){

timer=setInterval(init,2000);

});


$(".prev").click(function(){

 l= parseInt($("ul").css("left"))+w;showCurrent(l);

});

$(".next").click(function(){

 l= parseInt($("ul").css("left"))-w;

 showCurrent(l);

});

function showCurrent(l){

 if($("ul").is(':animated')){return false;}

 $("ul").animate({"left":l},500,function(){

    if(l==0){

$("ul").css("left",-len*w/2);

}else if(l==(1-len)*w){

$("ul").css("left",(1-len/2)*w);

}

 });

}

});

</script>

<style type="text/css">

.scroll{margin:0 auto;width:560px;height:500px;position:relative;overflow:scroll;}

.scroll ul{list-style-type:none;padding:0;margin:0;position:absolute;top:50px;left:0;}

.scroll ul li{float:left;width:560px; height:434px;}

.prev{position:absolute;left:20px;top:49%;}

.next{position:absolute;right:20px;top:49%;}

</style>

</head>

<body>

<div class="scroll">

<ul>

<li>123</li>

<li>456</li>

</ul>

<a href="#" class="prev">prev</a>

<a href="#" class="next">next</a>

</div>

</body>

</html>


Powered By 爱你若晴天
身体健康 © 2017 粤ICP备14081548号-1

Article

Shopping

Search

Me