上一张按钮不起作用了，全部都做完了，就是上一张现在按不了了

上一张按钮不起作用了，全部都做完了，就是上一张现在按不了了

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="lbtcss.css">
</head>
<body>
<!--图片轮播-->
<section class="section" id="section1">
   <div class="dh_box">
       <div class="show_box">
           <div class="father_4box show" id="father_box">
           <div class="zshow_box">
               <section class="subject">
                   <header class="subject_header"><a href="#">首页</a></header>
                   <div class="subject_div">
                       <span><a href="#">阿訇</a>&nbsp&nbsp/</span>
                       <a href="#">水电费</a>
                       <a href="#">外套</a>
                   </div>
               </section>
           </div>
           <div class="zshow_box z1">
               <section class="subject">
                   <header class="subject_header"><a href="#">首页</a></header>
                   <div class="subject_div">
                       <span><a href="#">阿訇</a>&nbsp&nbsp/</span>
                       <a href="#">水电费</a>
                       <a href="#">外套</a>
                   </div>
               </section>
           </div>
           <div class="zshow_box z2">
               <section class="subject">
                   <header class="subject_header"><a href="#">首页</a></header>
                   <div class="subject_div">
                       <span><a href="#">阿訇</a>&nbsp&nbsp/</span>
                       <a href="#">水电费</a>
                       <a href="#">外套</a>
                   </div>
               </section>
           </div>
           <div class="zshow_box z3">
               <section class="subject">
                   <header class="subject_header"><a href="#">首页</a></header>
                   <div class="subject_div">
                       <span><a href="#">阿訇</a>&nbsp&nbsp/</span>
                       <a href="#">水电费</a>
                       <a href="#">外套</a>
                   </div>
               </section>
           </div>
           </div>
       </div>
<!---->
<div class="cai_box" id="cai_js">
           <div class="zcai_box">
               <a href=""><span>手机配件</span></a>
           </div>
           <div class="zcai_box">
               <a href=""><span>电脑配件</span></a>
           </div>
           <div class="zcai_box">
               <a href=""><span>相机配件</span></a>
           </div>
           <div class="zcai_box">
               <a href=""><span>智能配件</span></a>
           </div>
       </div>
   </div>
   <div class="sec" id="secpo">
       <a href="">
           <div class="sec_s s1 s_action"></div>
       </a>
       <a href="">
       <div class="sec_s s2"></div>
       </a>
       <a href="">
       <div class="sec_s s3"></div>
       </a>
   </div>
   <a href="javascript:void(0)" class="bottom pre" id="pre" ></a>
   <a href="javascript:void(0)" class="bottom text" id="text"></a>
   <div class="dots" id="dop">
       <span class="dot"></span>
       <span></span>
       <span></span>
   </div>
</section>
<script src="lbtjs.js"></script>
</body>
</html>



*{
   border:none;
   padding:0;
   margin:0;
}
a{
   text-decoration: none;
}
body{
   font-family: Arial;
}
ul{

}
.section{
   position: relative;
   width:1200px;
   height:460px;
   margin: 30px auto;
}
.sec{
   width:1200px;
   height:460px;
   overflow: hidden;
   background-repeat: no-repeat;
   position: relative;
}
.sec a{
   width: 1200px;
   height:460px;
   position: absolute;
}
.sec_s{
   display: none;
   position:absolute;
   width:1200px;
   height: 460px;
}
.s_action{
   display: block;
}
.s1{
   background-image: url(../lbt_tp/bg1.jpg);
}
.s2{
   background-image: url(../lbt_tp/bg2.jpg);
}
.s3{
   background-image: url(../lbt_tp/bg3.jpg);
}
.bottom{
   width:40px;
   height:80px;
   left:250px;
   top:50%;
   position: absolute;
   margin-top: -40px;
   background: url(../lbt_tp/arrow.png) no-repeat center;
}
.text{
   left:auto;
   right:0;
}
.pre{
   transform: rotate(180deg);
   z-index: 1;
}
.bottom:hover{
   background-color: darkgrey;
   opacity: 0.8;
}
.dots{
   width:100px;
   height:70px;
   position: absolute;
   right: 0;
   bottom: 0px;
   line-height: 70px;
}
.dots span{
   display: inline-block;
   width: 12px;
   height:12px;
   border-radius: 50%;
   background-color: rgba(7,17,27,.5);
   box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
   margin-left: 5px;
   cursor: pointer;
}
.dots .dot{
   background-color: rgba(255,255,255,.5);
   box-shadow: 0 0 0 2px rgba(7,17,27,.5) inset;
}
/*导航菜单*/
.dh_box{
   width:250px;
   height:100%;
   position: absolute;
   background-color: rgba(7,17,27,.5);
   opacity: 1;
   z-index: 1;
}
.cai_box{
   width: 250px;
   height: 100%;
   position: absolute;
   z-index: 2;
}
.zcai_box{
   width:210px;
   height: 69px;
   margin: 0 auto;
   text-align: center;
   line-height: 69px;
   border-bottom: 1px solid rgba(255,255,255,.2);
}
.show_box{
   width: 750px;
   height:460px;
   left:250px;
   top:0;
   position: absolute;
   z-index: 999;
}
.zshow_box{
   width:100%;
   height:100%;
   background: url(../lbt_tp/fe.png) no-repeat;
   background-size:100%;
   box-shadow: 0 0 0 2px rgba(215, 57, 95, .5) inset;
}
.subject{
   width: 750px;
   height: 460px;
}
.subject_header{
   height: 60px;
   color: sienna;
}
.subject_header a{
   color: sienna;
   margin-left: 70px;
   line-height: 60px;
   font-size: 24px;
}
.subject_div{
   height: 400px;
}
.subject_div span a{
   color: chocolate;
   margin-left: 70px;
   line-height: 400px;
   font-size: 18px;
}
.subject_div a{
   color: #ff5ccb;
   font-size: 18px;
}
.z1{
   background: url(../lbt_tp/bg3.jpg) no-repeat;
   position: absolute;
   top:0;
}
.z2{
   background: url(../lbt_tp/bg2.jpg) no-repeat;
   position: absolute;
   top: 0;
}
.z3{
   background: url(../lbt_tp/bg1.jpg) no-repeat;
   position: absolute;
   top:0;
}
.father_4box{
   position: relative;
   width:750px;
   height:460px;
   top:0;
}
.show{
   display: none;
}


function byId(id) {
   return typeof(id)==="string"?document.getElementById(id):id;
}
var index=0,
   times=null,
   so=byId("secpo"),
   pos=byId("secpo").getElementsByTagName("div"),
   dopp=byId("dop"),
   tenspan=byId("dop").getElementsByTagName("span"),
   pre=byId("pre"),
   text=byId("text"),
   father_box=byId("father_box"),
   cai_j=byId("cai_js").getElementsByTagName("div"),
   father_b=byId("father_box").getElementsByTagName("div"),
   cai_po=byId("cai_js"),
   ten=pos.length;
function silimange() {
   /*清除定时器*/
   so.onmouseover=function () {
       if(times) clearInterval(times);
   }
   /*鼠标移开*/
   so.onmouseout=function () {/*调用onmouseout事件*/
       times=setInterval(function () {
           index++;
           if(index>=ten){
               index=0;
           }
           edimage();
       },3000);
   }
   so.onmouseout();/*调用nomouseout方法*/

   /*三远点按钮*/
   for(var p=0;p<ten;p++){
       tenspan[p].id=p;
       tenspan[p].onclick=function () {
           index=this.id;
           edimage();
       }
   }
   /*下一张*/
   text.onclick=function () {
       index++;
       if (index >= ten) index = 0;
       edimage();
   }
   /*上一张*/
   pre.onclick = function(){
       index--;
       if(index<0) index=ten-1;
       edimage();
   }
   /*导航菜单*/

       for(var i=0;i<cai_j.length;i++){
           cai_j[i].setAttribute("me_sir",i);
           cai_j[i].onmouseover=function () {
               var typ=this.getAttribute("me_sir");
               for(var k=0;k<cai_j.length;k++){
                   father_b[k*2].style.display="none";
               }
               father_box.className="father_4box";
               father_b[typ*2].style.display="block";
           }
       }

       cai_po.onmouseout=function () {
           pre.style.zIndex=0;
           father_box.className="father_4box show";
       }
       father_box.onmouseover=function () {
           this.className="father_4box";
       }
       father_box.onmouseout=function () {
           this.className="father_4box show";
       }

}
function edimage() {
   for(var i=0;i<ten;i++){
       pos[i].style.display="none";
       tenspan[i].className="";
   }
   pos[index].style.display="block";
   tenspan[index].className="dot";
}
silimange();
慕粉1470305008 2018-03-26
源自：项目：JavaScript实现轮播特效   5-4 二级菜单的展开与收起
10
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕星星 回答被采纳获得+3积分 2018-03-26 17:26:43

如果不把js脚本中的代码去掉，就算你写了z-index=1，在样式中也是不起作用的呀，styles中显示如下：

http://img1.sycdn.imooc.com//climg/5ab8bc3f0001e7bd02840080.jpg

我又测试了代码，去掉脚本中的显示层级代码之后，鼠标滑过左侧菜单是可以点击上一张按钮的呀！

0
收起回答
好帮手慕星星 2018-03-26 11:35:38

测试了你的代码，是因为你在js脚本中把左侧的按钮显示层级设置成了0，如下：

http://img1.sycdn.imooc.com//climg/5ab86a7b00015dfe04240152.jpg

去掉就可以了，自己再测试下，祝学习愉快~~

0
收起回答
  • 提问者 慕粉1470305008 #1
    试过了的，因为我css写了z-index=1，如果不写上一张按钮就点不到，但是这样写，鼠标滑过菜单就又按不了上一张按钮了
    2018-03-26 17:12:44
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，我这个上一张按钮的代码怎么写
9 1 4
老师，全选按钮的实现可以详细讲讲吗，我目前只能实现全选与全部取消的功能，进一步就不知道怎么办了
108 0 6
左右切换的按钮为什么用a标签做
7 0 3
禁用全部手势
32 0 6
所有代码写完了，法线上一张，下一张这个功能 和图表都没了
0 0 7

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师