js 自定义轮播 和 多想选项卡 在运行的时候 出现错误

徐小栗 发布于 2017/12/22 10:21
阅读 53
收藏 0

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/Untitled-5.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="regis.js"></script>
    <script type="text/javascript" src="duoxiang.js"></script>

</head>

<body>
<div class="box">
<div class="shang">
    <div class="s1">
      <h3>Chestnut</h3> 
    <ul class="con">
        <li>
            <a href="#" class="one" >首页</a>
            <ul onmousemove="over()" id="yiru">
                <li><a href="#" class="two" >海外酒店</a></li>
                <li><a href="#" class="two">国际租车</a></li>
            </ul>
        </li>
        
        <li>
            <a href="#" class="one">机票</a>
            <ul>
                <li><a href="#" class="two">国际机票</a></li>
                <li><a href="#" class="two">国内机票</a></li>
                <li><a href="#" class="two">特价机票</a></li>
                <li><a href="#" class="two">机+酒店</a></li>
            </ul>
        </li>
        
        <li>
            <a href="#" class="one">火车票</a>
            <ul>
                <li><a href="#" class="two">国内火车票</a></li>
                <li><a href="#" class="two">国际火车票</a></li>
            </ul>
        </li>
        
        <li>
            <a href="#" class="one">度假</a>
            <ul>
                <li><a href="#" class="two">旅游</a></li>
                <li><a href="#" class="two">美食</a></li>
            </ul>
        </li>
        
        <li>
            <a href="#" class="one">攻略</a>
<!--
            <ul>
                <li><a href="#" class="two">1</a></li>
                <li><a href="#" class="two">1</a></li>
                <li><a href="#" class="two">1</a></li>
                <li><a href="#" class="two">1</a></li>
            </ul>
-->
        </li>
         <li>
            <a href="#" class="one">全球购</a>
            <ul>
                <li><a href="#" class="two">名店购</a></li>
                <li><a href="#" class="two">退税</a></li>
                <li><a href="#" class="two">外币兑换</a></li>
                <li><a href="#" class="two">银联特惠</a></li>
            </ul>
        </li>
    </ul>
    </div>
</div>
<div class="zhong">
<div class="zuo">
    <!--用户登录 -->
     <img class="content-logo" src="form_logo.png" alt="logo" width="70px" height="70px">
        <div class="denglu">
            
     <h2>登陆</h2>
    <div class="input_box">
                  <input id="uname" type="text" name="user" placeholder="请输入用户名">
     </div>
     <div class="input_box">
                 <input id="upass" type="password" name="psw" placeholder="请输入密码">
     </div>
         <div id="error_box"><br></div>
         <div class="input_box">
            <button type="button" class="btn-primary" onclick="fnLogin()">登陆</button> 
          <a href="regist.html"><input type="button" class="btn-info" name="regist" value="注册"></a>
 </div>

</div>

    <!-- 左边第二个盒子    -->
    <div class="lefto">
        <p class="tr">旅游</p>
        <ul>
            <li>
                <img src="login.png" />
                    <a href="#" style="text-decoration:none;">英国攻略</a>
                </li>
                   <li>
                        <img src="login.png" />
                            <a href="#" style="text-decoration:none;">瑞士攻略</a>
                        </li>
                <li>
                  <img src="login.png" />
                    <a >北京攻略</a>
                    </li>
                <li>
                    <img src="login.png" />
                        <a >香港攻略</a>
                    </li>
                        </ul>
                    </div>
    
</div>
<div class="you" >
      <div class="banner">
    <div id="img">
        <img src="images/1.jpg" alt="" width="750px" height="350px">
        <div id="desc">
            <ul>
                <li style="display:block;">这是第一张图片</li>
                <li>这是第二张图片</li>
                <li>这是第三张图片</li>
                <li>这是第四张图片</li>
                <li>这是第五张图片</li>
                <li>这是第六张图片</li>
                <li>这是第七张图片</li>
                <li>这是第八张图片</li>
                <li>这是第九张图片</li>
                <li>这是第十张图片</li>
            </ul>
        </div>
        <div id="list">
            <ul>
                <li style="border-left:1px solid #C0DCC0; margin-left: 100px;" onmouseover="over(0)" onmouseout="out(0)">1</li>
                <li onmouseover="over(1)" onmouseout="out(1)">2</li>
                <li onmouseover="over(2)" onmouseout="out(2)">3</li>
                <li onmouseover="over(3)" onmouseout="out(3)">4</li>
                <li onmouseover="over(4)" onmouseout="out(4)">5</li>
                <li onmouseover="over(5)" onmouseout="out(5)">6</li>
                <li onmouseover="over(6)" onmouseout="out(6)">7</li>
                <li onmouseover="over(7)" onmouseout="out(7)">8</li>
                <li onmouseover="over(8)" onmouseout="out(8)">9</li>
                <li onmouseover="over(9)" onmouseout="out(9)">10</li>
            </ul>
        </div>
    </div>
          
          <!--图片轮播 -->
      <script>
          window.onload=function(){
            var imgs=['0','1','2','3','4','5','6','7','8','9'];
            n=0;
            obj=document.getElementById('img').getElementsByTagName('img')[0];
            word=document.getElementById('desc').getElementsByTagName('li');
            list=document.getElementById('list').getElementsByTagName('li');
            function showImge(){
                for(var i=0;i<list.length;i++){
                    list[i].style.background="";
                }
                for(var i=0;i<word.length;i++){
                    word[i].style.display='none';
                }
                word[n].style.display="block";
                list[n].style.background="#C0DCC0";
                n++;
                n=n%imgs.length;
                obj.src="images/"+n+".jpg";
            }
            new_showImg=showImge;
            timer=setInterval(new_showImg,1000);
        }
        function over(n){
            for(var i=0;i<word.length;i++){
                word[i].style.display="none";
            }
            word[n].style.display="block";
            obj.src="images/"+n+".jpg";
            for(var i=0;i<list.length;i++){
                list[i].style.background="";
            }
            list[n].style.background="#C0DCC0";
            clearInterval(timer);
        }
        function out(t){
            n=t+1;
            clearInterval(timer);
            timer=setInterval(new_showImg,1000);
        }
          
  
          
    
    </script>
  
<!--         多个选项卡的切换-->
        <div class="you-x">
            <div id="tDiv" class="tab-div">  
    <ul id="tab-list" class="tab">  
        <li class="tab-active">海外酒店</li>  
        <li>租车</li>  
        <li>风景</li>  
    </ul>  
    <div class="tab-content tab-content-show">  
        <ul>  
            <li><a href="#"><img src="choice/1.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 英国 </h5>
            </li>  
            <li><a href="#"><img src="choice/2.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 瑞士 </h5>
            </li>  
            <li><a href="#"><img src="choice/3.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 巴厘岛 </h5>
            </li>  
            <li><a href="#"><img src="choice/4.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 香港 </h5>
            </li>  
        </ul>  
    </div>  
    <div class="tab-content tab-content-hide">  
        <ul>  
            <li><a href="#"><img src="choice/5.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
            <li><a href="#"><img src="choice/6.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
            <li><a href="#"><img src="choice/7.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
            <li><a href="#"><img src="choice/8.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
        </ul>  
    </div>  
    <div class="tab-content tab-content-hide">  
        <ul>  
            <li>
              <a href="#"><img src="choice/9.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
            <li><a href="#"><img src="choice/10.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
            <li><a href="#"><img src="choice/11.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
            <li><a href="#"><img src="choice/12.jpg" style="width: 300px;height: 180px;"></a>
               <h5> 12345 </h5>
            </li>  
        </ul>  
    </div>  
</div>  
            
<!--
多项切换js  
 JS实现选项卡切换 
-->
<script>
 
    window.onload = function(){  
            var tabList = document.getElementById("tab-list");  
            var aLis = tabList.getElementsByTagName("li");  
            var tDiv = document.getElementById("tDiv");  
            var contents = tDiv.getElementsByTagName("div");  
  
            for(var i = 0; i < aLis.length; i++) {  
                aLis[i].index = i;  
                aLis[i].onclick = function() {  
                    for(var j = 0; j < aLis.length; j++) {  
                        aLis[j].className = '';  
                    }  
                    this.className = "tab-active";  
  
                    for(var j = 0; j < contents.length; j++) {  
                        contents[j].className = "tab-content tab-content-hide";  
                    }  
                    contents[this.index].className = "tab-content tab-content-show";  
                };  
            }  
        };  
  
            </script>
            
    
        </div>
      </div>
    </div>


    </div>
    

    </div>
</body>
</html>
 

加载中
0
vikon
vikon

没有错误信息, 没有可以完整运行的代码,  这是一个看代码猜错误的游戏.

徐小栗
徐小栗
哈哈哈哈。。
0
没文化不开心
没文化不开心

看的脑仁疼,第二次绑定window.onload会把第一次覆盖吧?

徐小栗
徐小栗
已解决,谢谢
返回顶部
顶部