Query图片新闻组图幻灯切换代码是一款带左右箭头跟缩略图的幻灯片切换特效。
滚动看图js代码如下：
<script>
$(document).ready(function(){
var index=0;
var length=$("#img img").length;
var i=1;
//关键函数：通过控制i ，来显示图片
function showImg(i){
$("#img img")
.eq(i).stop(true,true).fadeIn(800)
.siblings("img").hide();
$("#cbtn li")
.eq(i).addClass("hov")
.siblings().removeClass("hov");
}
function slideNext(){
if(index >= 0 && index < length-1) {
++index;
showImg(index);
}else{
if(confirm("已经是最后一张,点击确定重新浏览！")){
showImg(0);
index=0;
aniPx=(length-5)*142+'px'; //所有图片数 - 可见图片数 * 每张的距离 = 最后一张滚动到第一张的距离
$("#cSlideUl ul").animate({ "left": "+="+aniPx },200);
i=1;
}
return false;
}
if(i<0 || i>length-5) {return false;}
$("#cSlideUl ul").animate({ "left": "-=142px" },200)
i++;
}
function slideFront(){
if(index >= 1 ) {
--index;
showImg(index);
}
if(i<2 || i>length+5) {return false;}
$("#cSlideUl ul").animate({ "left": "+=142px" },200)
i--;
}
$("#img img").eq(0).show();
$("#cbtn li").eq(0).addClass("hov");
$("#cbtn tt").each(function(e){
var str=(e+1)+""+length;
$(this).html(str)
})
$(".picSildeRight,#next").click(function(){
slideNext();
})
$(".picSildeLeft,#front").click(function(){
slideFront();
})
$("#cbtn li").click(function(){
index = $("#cbtn li").index(this);
showImg(index);
});
$("#next,#front").hover(function(){
$(this).children("a").fadeIn();
},function(){
$(this).children("a").fadeOut();
})
})
</script>
本站资源仅限于学习研究，严禁从事商业或者非法活动!
源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！
焦点图下载排行
-
2017-03-24
-
2019-06-28
-
2014-03-13
-
2018-07-11
-
2015-02-05
-
2017-03-24
-
2013-08-27
-
2017-03-24
最新文章
-
JQuery手风琴式相册图片特效是一款只需点击图片缩略图即可展开当前的图片
2022-03-15
-
-
Jquery带进度条提示焦点图是一款带进度条提示的图片淡出淡进切换效果代码
2022-03-15
-
2019-06-28
-
2018-07-11
-
2018-05-14
-
2017-03-24
-
2017-03-24
热门源码
