怎么用jquery实现图片上一张下一张效果？ 注：图片有自动切换功能 15
<body><!--btn--><divid="prev"><imgsrc="left.png"></div><divid="next"><imgsrc="right.p...
<body>
<!--btn-->
<div id="prev">
<img src="left.png">
</div>
<div id="next">
<img src="right.png">
</div>
<!--pic-->
<div id="box">
<img src="bg1.jpg" class="scroll img center"><!--显示的图片-->
<img src="bg2.jpg" class="scroll img left"><!--更换的图片-->
</div>
<script>
var speed = 500;//切换速度
var stay = 3000;//间隔时间
var pics = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg'];//用到的图片
var i = 1;//记录图片在数组中的位置
var time=new Date().getTime();
$(function () {
var scroll = setInterval(scrollpic, stay);//定时器
//鼠标停留时停止动画
$('#box').hover(
function () {
clearInterval(scroll);//清除定时器
jQuery.fx.off = true;//禁用所有动画
},
function () {
jQuery.fx.off = false;
t = new Date().getTime() - time;//获取悬停时间
time = new Date().getTime();
if (t > stay) {//如果悬停时间大于间隔时间则马上切换
scrollpic();
}
scroll= setInterval(scrollpic, stay);
}
);
});
//滚动图片
var scrollpic = function () {
if (i < pics.length-1)//如果小于图片数组长度
i++;
else
i = 0;
$('#box .scroll.img.center').animate({
'top': -55,
'left': 480
}, speed, function () {
$(this).css({
'top': '55px',//图片的空白部分的高度
'left':'-480px'
}).removeClass('center')
.addClass('left').attr({//更改left样式的属性
'src': pics[i],//图片更换的路径
});
});
$('#box .scroll.img.left').animate({
'top': 0,
'left': 0
}, speed, function () {
$(this).removeClass('left')
.addClass('center');
});
}
</script>
</body> 展开
<!--btn-->
<div id="prev">
<img src="left.png">
</div>
<div id="next">
<img src="right.png">
</div>
<!--pic-->
<div id="box">
<img src="bg1.jpg" class="scroll img center"><!--显示的图片-->
<img src="bg2.jpg" class="scroll img left"><!--更换的图片-->
</div>
<script>
var speed = 500;//切换速度
var stay = 3000;//间隔时间
var pics = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg'];//用到的图片
var i = 1;//记录图片在数组中的位置
var time=new Date().getTime();
$(function () {
var scroll = setInterval(scrollpic, stay);//定时器
//鼠标停留时停止动画
$('#box').hover(
function () {
clearInterval(scroll);//清除定时器
jQuery.fx.off = true;//禁用所有动画
},
function () {
jQuery.fx.off = false;
t = new Date().getTime() - time;//获取悬停时间
time = new Date().getTime();
if (t > stay) {//如果悬停时间大于间隔时间则马上切换
scrollpic();
}
scroll= setInterval(scrollpic, stay);
}
);
});
//滚动图片
var scrollpic = function () {
if (i < pics.length-1)//如果小于图片数组长度
i++;
else
i = 0;
$('#box .scroll.img.center').animate({
'top': -55,
'left': 480
}, speed, function () {
$(this).css({
'top': '55px',//图片的空白部分的高度
'left':'-480px'
}).removeClass('center')
.addClass('left').attr({//更改left样式的属性
'src': pics[i],//图片更换的路径
});
});
$('#box .scroll.img.left').animate({
'top': 0,
'left': 0
}, speed, function () {
$(this).removeClass('left')
.addClass('center');
});
}
</script>
</body> 展开
2个回答
展开全部
给你个思路哈
1,定义一个function
2,点击的时候触发这个function，获取当前img名称
3,因为你的img名称都是有规律可循的，所以自己可拼接下一个的img名称
4,将拼接完成的img名称加上路径，替换现在显示的img路径即可
1,定义一个function
2,点击的时候触发这个function，获取当前img名称
3,因为你的img名称都是有规律可循的，所以自己可拼接下一个的img名称
4,将拼接完成的img名称加上路径，替换现在显示的img路径即可
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
上一张下一张，做个按钮，点击后判断当前图片。然后加载下一张图片。
自动切换就写个时钟，到了时间就和按下一张的按钮一样处理
自动切换就写个时钟，到了时间就和按下一张的按钮一样处理
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
