首页新闻找找看学习计划

图片轮播时 加载会出现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>

Nopen的主页 Nopen | 初学一级 | 园豆:165
提问于:2015-05-22 22:18
< >
分享
最佳答案
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
女孩,加油 | 小虾三级 |园豆:1093 | 2015-05-23 08:55

我是新手啊!你的代码我并不能完全看懂哦!不过还是谢谢你了,感谢你愿意用你宝贵的时间来解答我的问题,感激不尽!

Nopen | 园豆:165 (初学一级) | 2015-05-23 11:04

@mainmenu: 嗯

女孩,加油 | 园豆:1093 (小虾三级) | 2015-05-23 11:19

@女孩,加油: 我可以加你QQ好友吗?

Nopen | 园豆:165 (初学一级) | 2015-05-23 22:51

@mainmenu: 可以的

女孩,加油 | 园豆:1093 (小虾三级) | 2015-05-24 10:13

@女孩,加油: 你加我吧  617982199 免得暴露你信息了! 谢谢

Nopen | 园豆:165 (初学一级) | 2015-05-24 23:31
其他回答(1)
-1

将最后一个脚本:  setTimeout("PicNumClick()",5000);

修改为:  PicNumClick();

幻天芒 | 园豆:36594 (高人七级) | 2015-05-23 09:37

好了,我想问下为什么会出现这个情况呢?源代码也是这样写的,并没有问题?

支持(0) 反对(0) Nopen | 园豆:165 (初学一级) | 2015-05-23 11:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册