在做一个javascript图片切换练习,可是图片,以及文字什么的都显示不出来是哪里错了呢?
巴扎黑
巴扎黑 2017-04-11 10:18:43
[JavaScript讨论组]

小白刚开始做练习,一个点击图标,图片以及描述性文字会切换的效果,看来看去也不知道是哪里的问题,请大神们帮忙解答

    
    图片切换2
    
    


图片序号正在计算中

图片文字正在加载中

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

巴扎黑
巴扎黑

全部回复(1)
高洛峰

<meta charset="UTF-8">
<title>图片切换2</title>
<style>

*{
    margin:0;
    padding:0;
    list-style:none;
}
#picswitcher{
    width:500px;
    height:400px;
    margin:0 auto;
    position:relative;
    top:100px;
    background:pink url(pics/loader_ico.gif) no-repeat center center;
    border-radius:10px;
}
img{
    width:400px;
    height:300px;
    position:absolute;
    top:50px;
    left:50px;
}
span,p{
    display:block;
    width:500px;
    font-size:16px;
    text-align:center;
    height:20px;
    position:absolute;
    left:0;
}
span{
    top:30px;
}
p{
    bottom:30px;
}
ul{ width:100px;
    height:14px;
    position:absolute;
    left:60px;
    bottom:60px;
}
li{
    width:14px;
    height:14px;
    font-size:10px;
    margin-right:2px;
    border-radius:14px;
    text-align:center;
    background:#F90;
    float:left;
    cursor:pointer;
}
.active{
    background:#fc6061;
}

</style>
<script>

window.onload=function(){
    var op=document.getElementById("picswitcher");*/**/获取id的方式错了,是文档对象(DOM),所以要用document.getElementById("ID名");***
    var oPic=document.getElementById("pic");
    var oText1=document.getElementById("text1");
    var oText2=document.getElementById("text2");
    var aLi=op.getElementsByTagName("li");
    //var aUrl=["pics/pic1.png","pics/pic2.png","pics/pic3.png","pics/pic4.png","pics/pic5.png","pics/pic6.png"]
    var aText2=["图片1","图片2","图片3","图片4","图片5","图片6"]
    for(var i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            oText1.innerHTML=this.index+1+"/"+aLi.length;
            oText2.innerHTML=aText2[this.index];
            oPic.src="pics/pic"+(this.index+1)+".png";
            for(var j=0;j<aLi.length;j++){
                aLi[j].className="";
            }
            this.className="active";
        }
    }
}

</script>
</head>
<body>
<p id="picswitcher">

<img id="pic" src="images/01.jpg">
<span id="text1">图片序号正在计算中</span>
<p id="text2">图片文字正在加载中</p>
<ul id="switcher">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

</p>

</body>

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号