<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jquery带按钮的图片切换效果</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<style type="text/css">
body,ul{ padding:0; margin:0;}
li{ list-style:none;}
.bg{ width:440px; position:relative; margin:20px auto;}
.bg .prev,.bg .next{ width:50px; height:100px; background:#000; color:#FFF; text-align:center; line-height:100px; position:absolute; top:0;}
.bg .prev{ left:0; cursor:pointer;}
.bg .next{ right:0; cursor:pointer;}
.bg .imgbg{ width:320px; height:100px; margin-left:60px; overflow:hidden;}
.bg .imgbg ul{ width:9999px;}
.bg .imgbg ul li{ width:100px; height:100px; float:left; margin-right:10px; background:#f00; line-height:100px; text-align:center;}
</style>
</head>
<body>
<div class="bg">
<span class="prev">prev</span>
<span class="next">next</span>
<div class="imgbg">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="cl"></div>
</div>
<script type="text/javascript">
function DY_scroll(bg,prev,next,imgbg,speed,auto){
var bg = $(bg);
var prev = $(prev);
var next = $(next);
var longdiv = $(imgbg).find(‘ul‘);
var width = longdiv.find(‘li‘).outerWidth(true);
var speed = speed;
var auto = auto;
//next按钮
next.click(function(e) {
longdiv.animate({marginLeft:-width},function(){
longdiv.find(‘li‘).eq(0).appendTo(longdiv);
longdiv.css(‘margin-left‘,0);
});
});
//prev按钮
prev.click(function(e) {
longdiv.find(‘li:last‘).prependTo(longdiv);
longdiv.css(‘margin-left‘,-width);
longdiv.animate({marginLeft:0});
});
//自动播放与鼠标滑动停顿
if(auto == true){
ad = setInterval(function(){
next.click();
},speed*1000);
bg.hover(function(e) {
clearInterval(ad);
},function(e){
ad = setInterval(function(){
next.click();
},speed*1000);
});
}
}
DY_scroll(‘.bg‘,‘.prev‘,‘.next‘,‘.imgbg‘,1,true);
</script>
</body>
</html>
不多说效果如下：以上代码就是完整的切换效果，也是最简单的原理，希望能够学习
时间： 2024-12-24 13:38:00