标题:各位大大,我是一名初学者,仿凤凰网图片轮播写了一个程序,到处是BUG,求指 ...
取消只看楼主
windomu
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2018-8-23
 问题点数:0 回复次数:0 
各位大大,我是一名初学者,仿凤凰网图片轮播写了一个程序,到处是BUG,求指教
<!DOCTYPE html>
<html>
    <head>
weixinstyle.rar (1.29 MB)

        <meta charset="utf-8" />
        <title></title>
        <style>
            *{margin:0;padding:0;}
            #box{width:378px;height:250px;margin:10% auto;position:relative;}
            #div1{width:378px;height:30px;margin:0;padding:0;}
            ul{margin:0;padding:0;}
            li{float:left;width:40px;height:30px;list-style-type:none;display:inline-block;margin:0;padding:0;
            line-height:30px;border:1px solid #dedfda;text-align:center;}
            #div2{width:378px;height:220px;}
            img{width:378px;height:220px;}
            p{width:378px;height:30px;position:absolute;bottom:0;background-color:rgba(0,0,0,0.1);
                    text-align:center;line-height:30px;}
            span{width:25px;height:25px;position:absolute;background-color:rgba(0,0,0,0.1);line-height:25px;
            text-align:center;font-size:25px;top:45%;color:#ffffff;}
            span:hover{background-color:rgba(0,0,0,0.6);cursor:pointer;}
            .left{left:10px;}
            .right{right:10px;}
            .avte{background:red;color:#FFFFFF;cursor:pointer;}
            
        </style>
        <script>
            window.onload=function(){
                var oUl=document.getElementById('ul');
                var aLi=oUl.getElementsByTagName('li');
                var oDiv=document.getElementById('div2');
                //var oBox=document.getElementById('box');
                var aSpan=oDiv.getElementsByTagName('span');
                var oP=document.getElementsByTagName('p')[0];
                var aImg=oDiv.getElementsByTagName('img')[0];
                var leaLi=aLi.length;
                var leaSpan=aSpan.length;
                var arrimg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg'];
                var textimg=['图片一','图片二','图片三','图片四','图片五','图片六','图片七','图片八','图片九']
                var num=0;
               
//                }
                //初始化
                oP.innerHTML=textimg[num];
                aImg.src=arrimg[num];
                aLi[num].className='avte';

                    var _this=null;
                    var olde=null;
                for(var i=0;i<arrimg.length;i++){
                    aLi[i].index=i;
                    olde=aLi[num];
                    
                    
                    
                    aLi[i].onmouseover=function(){
                        _this=this;   
                        olde.className='';
                        olde=this;
                        this.className='avte';
                    aImg.src=arrimg[this.index];
                    oP.innerHTML=textimg[this.index];
                    
                    
                }
                    
                aSpan[0].onclick=function(){
                    for (var i=0;i<arrimg.length;i++){
                        aLi[i].className='';
                    }
                    _this.className='avte';
                    _this.index--;
                    if(_this.index==-1){
                    _this.index=arrimg.length-1;
                    }
                oP.innerHTML=textimg[_this.index];
                aImg.src=arrimg[_this.index];
                aLi[_this.index].className='avte';;
                }
                aSpan[1].onclick=function(){
                    for (var i=0;i<arrimg.length;i++){
                    aLi[i].className='';
                    }
                    _this.className='avte';
                    
                    _this.index++;
                    if(_this.index==arrimg.length){
                        _this.index=0;
                    }
                oP.innerHTML=textimg[_this.index];
                aImg.src=arrimg[_this.index];
                aLi[_this.index].className='avte';
                }
                }
            }
        </script>
    </head>
    <body>
        <div id="box">
            <div id="div1">
                <ul id="ul">
                    <li id="0">资讯</li>
                    <li id="1">娱乐</li>
                    <li id="2">体育</li>
                    <li id="3">汽车</li>
                    <li id="4">时尚</li>
                    <li id="5">军事</li>
                    <li id="6">房产</li>
                    <li id="7">视频</li>
                    <li id="8">游戏</li>
                </ul>
            </div>
            <div id="div2">
                <img src="img/加载中.gif">
                <p>图片正在加载中……</p>
                <span class="left"><</span>
                <span class="right">></span>
            </div>
               
        </div>
    </body>
        
搜索更多相关主题的帖子: 图片 img var jpg index 
2018-08-23 17:33



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-489390-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.752144 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved