一个缩略图的幻灯片 之前 缩略图是没有div的 只是一个img元素 因为我想图片等比里缩小 超出div的部分隐藏掉 达到图片在1:1的框里不变形的目的 问题是现在我加上div之后 点击一个个点击缩略图 切换大图是正常的
但是 他自动切换时 到第2图的时候就 不正常运行了 一直是第2图自己本身切换
找不到问题在哪里.indexCon{width:782px;}
.indexCon .flashBanner{width:782px;margin-bottom:12px;}
.flashBanner{position:relative;}
.flashBanner .mask{
position:absolute;left:0;bottom:-32px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;overflow:hidden;}
.flashBanner .mask div img{vertical-align:middle;margin-right:10px;cursor:pointer;}
.flashBanner .mask div img.show{margin-bottom:3px;}
img{border:0 none;}$(function(){
$(".flashBanner").each(function(){
var timer;
$(".flashBanner .mask div img").click(function(){
var index = $(".flashBanner .mask div img").index($(this));
changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom":"0"
},700);
$(".flashBanner").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
var show = $(".flashBanner .mask div img.show").index();
if (show >= $(".flashBanner .mask div img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
function changeImg (index)
{
$(".flashBanner .mask div img").removeClass("show").eq(index).addClass("show");
$(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask div img").eq(index).attr("link"));
$(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask div img").eq(index).attr("uri")).fadeIn("slow");
}
timer = setInterval(function(){
var show = $(".flashBanner .mask div img.show").index();
if (show >= $(".flashBanner .mask div img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
});
<!-- indexCon start -->
<div class="indexCon fl">
<div class="flashBanner">
<a href="http://www.lanrentuku.com/"><img class="bigImg" width="782" height="326" /></a>
<div class="mask">
<div> <img src="images/201109291718425.jpg" uri="images/201109291718425.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201207261743282.jpg" uri="images/201207261743282.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201109291718573.jpg" uri="images/201109291718573.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201109291719040.jpg" uri="images/201109291719040.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201207311057406.jpg" uri="images/201207311057406.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
</div>
</div>
</div>
<!-- indexCon end -->
jquery幻灯
但是 他自动切换时 到第2图的时候就 不正常运行了 一直是第2图自己本身切换
找不到问题在哪里.indexCon{width:782px;}
.indexCon .flashBanner{width:782px;margin-bottom:12px;}
.flashBanner{position:relative;}
.flashBanner .mask{
position:absolute;left:0;bottom:-32px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;overflow:hidden;}
.flashBanner .mask div img{vertical-align:middle;margin-right:10px;cursor:pointer;}
.flashBanner .mask div img.show{margin-bottom:3px;}
img{border:0 none;}$(function(){
$(".flashBanner").each(function(){
var timer;
$(".flashBanner .mask div img").click(function(){
var index = $(".flashBanner .mask div img").index($(this));
changeImg(index);
}).eq(0).click();
$(this).find(".mask").animate({
"bottom":"0"
},700);
$(".flashBanner").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
var show = $(".flashBanner .mask div img.show").index();
if (show >= $(".flashBanner .mask div img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
function changeImg (index)
{
$(".flashBanner .mask div img").removeClass("show").eq(index).addClass("show");
$(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask div img").eq(index).attr("link"));
$(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask div img").eq(index).attr("uri")).fadeIn("slow");
}
timer = setInterval(function(){
var show = $(".flashBanner .mask div img.show").index();
if (show >= $(".flashBanner .mask div img").length-1)
show = 0;
else
show ++;
changeImg(show);
},3000);
});
});
<!-- indexCon start -->
<div class="indexCon fl">
<div class="flashBanner">
<a href="http://www.lanrentuku.com/"><img class="bigImg" width="782" height="326" /></a>
<div class="mask">
<div> <img src="images/201109291718425.jpg" uri="images/201109291718425.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201207261743282.jpg" uri="images/201207261743282.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201109291718573.jpg" uri="images/201109291718573.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201109291719040.jpg" uri="images/201109291719040.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
<div> <img src="images/201207311057406.jpg" uri="images/201207311057406.jpg" link="http://www.lanrentuku.com/" width="60" height="22"/></div>
</div>
</div>
</div>
<!-- indexCon end -->
jquery幻灯
解决方案 »
- 求助各位高手:(简单的js问题) 如何用 <a href="javascript:alert(this.innerText)">得到目标的属性
- webbrowser如何修改javascript语句?
- {0} 在js脚本中,用正则表达式怎么表示? 我想替换string里的{0}
- 求一段能设置显示时间的轮显图片加背景音乐代码
- 高手帮个忙吧~~~~
- 如何让img的src由JAVASCRIPT取得
- 请教关于input框赋值的问题
- 模式对话框显示的静态文本,如何用鼠标选中???
- 怎么获取鼠标在页面上移动时触发的事件呢?
- 请教这样的效果该怎么做比较合适,分不够可以加 现金也行
- javascript
- 新人急请大神帮助我看看我的网页飘浮的图片代码哪错了?
了