图片轮播时 加载会出现5张图片 要点击或者自动轮播后才会正常！！！
0
悬赏园豆：50
[已解决问题]
解决于 2015-05-23 22:51
我是新手，才学js，不是很理解，代码也是网上看的，半懂！请大神帮我解决问题，尽量通俗点。感激不尽！也可以给我一点写好网页的建议。谢谢
这是代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style>
*{padding:0;margin:0}
body,html{width:100%;height:100%;}
a{text-decoration:none;}
.fl{float:left;}
.fr{float:right;}
.fc{clear:both;}
/*顶部*/
#box{width:100%;}
.headTop{background:url(img/7.png) repeat-x;background:#ccc;height:55px;}
.icoMenu {width:55px;height:55px;background:url(img/6.gif);position:relative;}
.headTopC{margin:20px 100px;}
.headTopR{margin-top:10px;float:right;margin-right:150px;}
#menuson {background:#f0f;position:absolute;top:55px;left:0px;z-index:9999;width:500px;}
#menuson ul{list-style:none;}
#menuson ul li{float:left;line-height:30px;margin-left:15px;}
#menuson ul li a{color:#33cc00;}
#menuson ul li:hover{background:#000;display:block;}
.show {display:block;}
.hide {display:none;}
/*图片轮播样式*/
.LunBo{position:relative;list-style-type: none;}
.lunBo ul li{position:absolute;left:0px;top:0px;display:none;}
.LunBo ul li.CurrentPic {display: block;}
.pic{width:100%;}
.LunBoNum{
position: absolute;
left: 374px;
bottom: 11px;
width: 83px;
text-align: right;
background-color: #999;
padding-left: 10px;
}
.LunBoNum span{height: 20px;
width: 15px;
display: block;
line-height: 20px;
text-align: center;
float: left;
cursor: pointer;
}
.LunBoNum span a:hover{background:#f0f;}
</style>
<script>
window.onload = function(){
var m = document.getElementById("menu");
var t = document.getElementById("menuson");
m.onmouseover = function(){
t.className="show";
}
m.onmouseout = function(){
t.className="hide";
}
}
</script>
<body>
<div id="box">
<div class="headTop">
<div class="fl icoMenu" id="menu">
<div id="menuson" class="hide">
<ul>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
<li><a href="">菜单一</a></li>
</ul>
</div>
</div>
<img class="headTopC" src="img/logo1.gif">
<img class="headTopR" src="img/logo2.gif">
</div>
<div class="LunBo">
<ul>
<li><img src="img/1.jpg"class="pic CurrentPic"></li>
<li><img src="img/2.jpg"class="pic"></li>
<li><img src="img/3.jpg"class="pic"></li>
<li><img src="img/4.jpg"class="pic"></li>
<li><img src="img/5.jpg"class="pic"></li>
</ul>
<div class="LunBoNum">
<span><a href="#">1</a></span>
<span><a href="#">2</a></span>
<span><a href="#">3</a></span>
<span><a href="#">4</a></span>
<span><a href="#">5</a></span>
</div>
</div>
</div>
</body>
<script>
//定义有几张图片
var pohto = 5;
var CurrentIndex;
//默认显示第几张图
var ToDisplayPic = 0;
$(".LunBoNum span").click(DisplayPic);
//定义函数 显示图片
function DisplayPic() {
// 测试是父亲的第几个儿子
CurrentIndex = $(this).index();
// 隐藏全部图片
var t = $(this).parent().parent().children("ul");
$(t).children().hide();
// 显示指定图片
$(t).children("li").eq(CurrentIndex).show();
}
function PicNumClick(){
$(".LunBoNum span").eq(ToDisplayPic).trigger("click");
ToDisplayPic = (ToDisplayPic + 1) % pohto;
setTimeout("PicNumClick()",5000);
}
setTimeout("PicNumClick()",5000);
</script>
</html>
最佳答案
1
<div class="scroll_div"><ul class="pic"><li><img src="img/pic_1.jpg" /></li><li><img src="img/pic_2.jpg" /></li><li><img src="img/pic_3.jpg" /></li><li><img src="img/pic_4.jpg" /></li><li><img src="img/pic_5.jpg" /></li></ul><ul class="btn"><li>项目一</li><li>项目二</li><li>项目三</li><li>项目四</li><li>项目五</li></ul></div>html
|
1
2
3
4
5
6
7
8
|
.scroll_div{width:1000px; height:370px; margin:0 auto; padding:10px;}.scroll_div .pic{width:820px; height:370px; overflow:hidden; position:relative; float:left;}.scroll_div .pic li{width:820px; height:370px; position:absolute; top:0; left:0; display:none;}.scroll_div .btn{float:right; width:173px;}.scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% "微软雅黑"; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;}.scroll_div .btn li.on{background:#d73737;}li {list-style:none;} |
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
$(function(){var listLen = $(".pic li").length, i=0,setInter,speen = 3000;/*图片轮播*/$(".btn li:last").css({"margin":"0px 0px 0px 0px"});$(".btn li:first").addClass("on");$(".pic li:first").show();$(".btn li").each(function(index,element){$(element).click(function(){i = index;$(this).addClass("on").siblings().removeClass("on");$(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);})$(element).hover(function(){clearInterval(setInter);},function(){outPlay();});})out_fun = function(){if(i < listLen){i++;}else{i=0;};$(".btn li").eq(i).addClass("on").siblings().removeClass("on");$(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);}outPlay = function(){setInter = setInterval("out_fun()",speen);}outPlay();}) |
收获园豆：50
我是新手啊！你的代码我并不能完全看懂哦！不过还是谢谢你了，感谢你愿意用你宝贵的时间来解答我的问题，感激不尽！
@mainmenu: 嗯
@女孩，加油: 我可以加你QQ好友吗？
@mainmenu: 可以的
@女孩，加油: 你加我吧 617982199 免得暴露你信息了！ 谢谢
其他回答(1)
-1
将最后一个脚本： setTimeout("PicNumClick()",5000);
修改为： PicNumClick();
好了，我想问下为什么会出现这个情况呢？源代码也是这样写的，并没有问题？
