nex-prev使用j-query更改图像程序 [英] nex-prev changes image program using j-query
本文介绍了nex-prev使用j-query更改图像程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在运行此程序但不执行...仅显示最后一张图像而不更改图像...
< ！DOCTYPE HTML >
< html >
< < span class =code-leadattribute> head >
< link rel = 样式表 类型 = text / css href = next-prev.css >
< script src = http://ajax.googleapis.com/ajax/libs/jquery/1.10 .2 / jquery.min.js >
< < span class =code-leadattribute> / script >
< script >
var imgFirst = $（'＃img-grp-wrap .img -wrap img：first-child'）;
$（'＃img-grp-wrap .img-wrap img：gt（0）'）。hide（）;
function slideShow（）{
imgFirst.fadeOut（）。next（'img'）。fadeIn（）。end（）。appendTo（'。img-wrap'）;
}
var rotate = setInterval（function（）{
slideShow（）;
}，4000）;
$（'＃img-grp-wrap .prev，＃img-grp-wrap .next'）。hover（function（）{
clearInterval（rotate）;
}，function（）{
var rotate = setInterval（function（）{
slideShow（）;
}，4000）;
}）;
$（'＃img-grp-wrap .next'）。click（function（）{
imgFirst.stop（）。fadeOut（）。next（）。fadeIn（）。 end（）。appendTo（'。img-wrap'）;
}）;
$（'＃img-grp-wrap .prev'）。click（function（）{
imgFirst.stop（）。fadeOut（）;
$（'＃ img-grp-wrap .img-wrap img：last-child'）。prependTo（'。img-wrap'）。fadeOut（）;
imgFirst.fadeIn（）;
}）;
< / script >
< / head >
< body >
< div id = img -grp-wrap >
< div class = img-wrap >
< ; img src < span class =code-keyword> = 1.jpg / >
< img src = 2.jpg / >
< img src = 3.jpg / >
< / div >
< img src = arrowright.jpg class = next alt = 下一步 / >
< img src = arrowleft.jpg class = prev alt = 上一页 / >
< / div >
< / body >
< / html >
所以plz帮助或一些建议
解决方案
（'＃img-grp-wrap .img-wrap img：first-child' ）;
function slideShow（）{
imgFirst.fadeOut（）。next（'img'）。fadeIn（）。end（）。appendTo（'。img-wrap'）;
}
var rotate = setInterval（function（）{
slideShow（）;
}，4000）;
（'＃img-grp-wrap .prev，＃img-grp-wrap .next'）。hover（function（）{
clearInterval（rotate）;
}，function（）{
var rotate = setInterval（function（）{
slideShow（）;
}，4000）;
}）;
i am run this program but not perform... Only Last image is display and not change the images...
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="next-prev.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var imgFirst = $('#img-grp-wrap .img-wrap img:first-child');
$('#img-grp-wrap .img-wrap img:gt(0)').hide();
function slideShow() {
imgFirst.fadeOut().next('img').fadeIn().end().appendTo('.img-wrap');
}
var rotate = setInterval(function() {
slideShow();
}, 4000);
$('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
clearInterval(rotate);
}, function() {
var rotate = setInterval(function() {
slideShow();
}, 4000);
});
$('#img-grp-wrap .next').click(function() {
imgFirst.stop().fadeOut().next().fadeIn().end().appendTo('.img-wrap');
});
$('#img-grp-wrap .prev').click(function() {
imgFirst.stop().fadeOut();
$('#img-grp-wrap .img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
imgFirst.fadeIn();
});
</script>
</head>
<body>
<div id="img-grp-wrap">
<div class="img-wrap">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
<img src="arrowright.jpg" class="next" alt="Next"/>
<img src="arrowleft.jpg" class="prev" alt="Previous"/>
</div>
</body>
</html>
So plz help or some suggestion
解决方案
('#img-grp-wrap .img-wrap img:first-child');
('#img-grp-wrap .img-wrap img:gt(0)').hide(); function slideShow() { imgFirst.fadeOut().next('img').fadeIn().end().appendTo('.img-wrap'); } var rotate = setInterval(function() { slideShow(); }, 4000);
('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() { clearInterval(rotate); }, function() { var rotate = setInterval(function() { slideShow(); }, 4000); });
这篇关于nex-prev使用j-query更改图像程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
