老师为啥我的代码效果出不来，点击右边按钮

老师为啥我的代码效果出不来，点击右边按钮

都是跟着老师一步一步写的，为啥出不来首页banner大图效果右边点击动不了



(function () {

//得到元素

var carousel_list = document.getElementById('carousel_list');

var left_btn = document.getElementById('left_btn');

var right_btn = document.getElementById('right_btn');

//克隆第一张Li

var clone_li = carousel_list.firstElementChild.cloneNode(true);


//上树

carousel_list.appendChild(clone_li);


//当前正在显示的图片序号，从0开始


var idx = 0;


//右按钮监听事件

right_btn.onclick = function () {

//加过渡

carousel_list.style.transition='transform .5s else 0s';

//idx当然要加1

idx++;

//拉动

carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';

//是否是最后一张，如果是最后一张，那么就要拉回来

if (idx > 4) {

setTimeout(function () {

//去掉过渡

carousel_list.style.transition = 'none';

//删除transform属性

carousel_list.style.transform='none';

//全局图片序号变为0

idx=0;



}, 500);

}

};

})();


<!-- banner -->




<ul id="carousel_list" class="carousel_list">

<li>

<img src="images/banner1.jpg" alt="">

</li>

<li>

<img src="images/banner2.jpg" alt="">

</li>

<li>

<img src="images/banner3.jpg" alt="">

</li>

<li>

<img src="images/banner4.jpg" alt="">

</li>



</ul>

<div class="center-wrap">

<!--按钮点击轮播-->

<a href="javascript:;" id="left_btn" class="left_btn"></a>

<a href="javascript:;" id="right_btn" class="right_btn"></a>

<!--按钮点击轮播-->


/*banner*/

.banner{position: relative; top: 0;

width: 100%;

z-index: 1;

overflow: hidden;

left: 50%;

margin-left: -960px;

width: 1920px;}

.banner .carousel_list{

width: 600%;overflow: hidden;/*transform: translateX(-33.333%);*/

}

.banner .carousel_list li{

float: left;width:16.66%;

}

.banner .carousel_list li img{width: 100%;vertical-align: middle;/*白边处理*/

}


.banner img{/*限制最小值*/

height: 524px;

width: 1920px;

/*图片可能和盒子的底部产生一些缝隙，此时可以使用一个小技巧*/

/*这是一个小技巧，添加上图片就不会有缝隙*/
qq_慕九州8503049 2022-12-27
源自：“仿穷游”首页动态项目   2-2 布局实现
13
收起

正在回答 回答被采纳积分+1

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

1回答
好帮手慕星星 2022-12-28 09:42:17

同学你好， css样式没有粘贴完整，无法测试出效果。这边只将js代码替换源代码中，右侧按钮点击有效果。

建议同学将html以及所有的css代码粘贴上来，便于帮助测试解决。

祝学习愉快！

0
收起回答
  • 提问者 qq_慕九州8503049 #1

    谢谢，这样可以吗




    /*banner*/


    .banner{position: relative; top: 0;


    width: 100%;


    z-index: 1;


    overflow: hidden;


    left: 50%;


    margin-left: -960px;


    width: 1920px;}


    .banner .carousel_list{


    width: 600%;overflow: hidden;/*transform: translateX(-33.333%);*/


    }


    .banner .carousel_list li{


    float: left;width:16.66%;


    }


    .banner .carousel_list li img{width: 100%;vertical-align: middle;/*白边处理*/


    }




    .banner img{/*限制最小值*/


    height: 524px;


    width: 1920px;


    /*图片可能和盒子的底部产生一些缝隙，此时可以使用一个小技巧*/


    /*这是一个小技巧，添加上图片就不会有缝隙*/


    }


    .banner .center-wrap{/*只要有压盖，第一时间就想到绝对定位*/width: 1152px;position: absolute;left: 50%;top:0;


    margin-left: -576px;height: 524px;


    /*这里的100%高度对不能省略，因为如果省略了，它的height就是0*/




    }


    .banner .center-wrap .banner-nav {height: 524px/*这里的100%高度对不能省略，因为如果省略了，它的height就是0*/


    /*那么它的子盒子设置16.%就没有意义了*/


    }


    .banner .center-wrap .banner-nav ul{height: 524px;/*这里的100%高度对不能省略，因为如果省略了，它的height就是0*/


    /*那么它的子盒子设置16.%就没有意义了*/}


    .banner .center-wrap .banner-nav ul li{height: 16.66%;width: 296px;background-color: #20BD9A;}


    .banner .center-wrap .leftbtn{


    position: absolute;width:28px;height: 44px;background:url(../images/icons.png) no-repeat -21px -94px ;


    top:50%;left:-38px;margin-top:-22px ;


    }


    .banner .center-wrap .leftbtn:hover{opacity: 0.6;}


    .banner .center-wrap .rightbtn{


    position: absolute;width:28px;height: 44px;background:url(../images/icons.png) no-repeat -21px -29px ;


    top:50%;right:-38px;margin-top:-22px ;


    }


    .banner .center-wrap .rightbtn:hover{opacity: 0.6;}


    .banner .center-wrap .banner-nav>ul>li{position: relative; background-color: rgba(0, 0, 0, 0.45);


    box-sizing: border-box;color: #ffffff;border-bottom: 1px solid #d6d6d645;padding: 10px;


    /*box-sizing:border-box属性的作用就是让height属性是盒子的总高度，这种情况：在盒子的高度是百分比写的*/


    /*此时就要让盒子的边框涵盖在height里面，就是使用box-sizing属性*/


    }









    <!-- banner -->





    <section class="banner" id="banner">


    <ul id="carousel_list" class="carousel_list">


    <li>


    <img src="images/banner1.jpg" alt="">


    </li>


    <li>


    <img src="images/banner2.jpg" alt="">


    </li>


    <li>


    <img src="images/banner3.jpg" alt="">


    </li>


    <li>


    <img src="images/banner4.jpg" alt="">


    </li>





    </ul>


    <div class="center-wrap">


    <!--按钮点击轮播-->


    <a href="javascript:;" id="left_btn" class="left_btn"></a>


    <a href="javascript:;" id="right_btn" class="right_btn"></a>


    <!--按钮点击轮播-->




    </div>


    </section>   <!-- banner -->


    <script type="text/javascript" src="js/carousel.js"></script>




    <!-- banner -->



    2022-12-28 20:02:31
  • 好帮手慕星星 回复 提问者 qq_慕九州8503049 #2

    问题如下：

    1、.banner宽度为100%即可，如果设置1920px不能适应不同屏幕的分辨率，可能水平方向上出现滚动条或者宽度不够

    https://img1.sycdn.imooc.com//climg/63ad2975090c8cd605480238.jpg

    2、按钮的class值不一致，所以按钮没有样式

    https://img1.sycdn.imooc.com//climg/63ad2e2d098e179b14710329.jpg

    改为一样的即可

    https://img1.sycdn.imooc.com//climg/63ad2e6209416e6b08410188.jpg

    3、html结构中用了四张图片，那么js中判断条件应改为

    https://img1.sycdn.imooc.com//climg/63ad2f7f098cb96906410144.jpg

    否则会出现空白页。自己再测试下。

    2022-12-29 14:11:36
  • 提问者 qq_慕九州8503049 回复 好帮手慕星星 #3 
    改过来了，还是点击无效不行;  您在帮忙看看
<section class="banner" id="banner">
<ul id="carousel_list" class="carousel_list">
<li>
<img src="images/banner1.jpg" alt="">
</li>
<li>
<img src="images/banner2.jpg" alt="">
</li>
<li>
<img src="images/banner3.jpg" alt="">
</li>
<li>
<img src="images/banner4.jpg" alt="">
</li>
</ul>
<div class="center-wrap">
<!--按钮点击轮播-->
<a href="javascript:;" id="left_btn" class="left_btn"></a>
<a href="javascript:;" id="right_btn" class="right_btn"></a>
<!--按钮点击轮播-->
</section>

<style>

/*banner*/
.banner{position: relative; top: 0;
width: 100%;
z-index: 1;
overflow: hidden;
left: 50%;
margin-left: -960px;
}
.banner .carousel_list{
width: 600%;overflow: hidden;/*transform: translateX(-33.333%);*/
}
.banner .carousel_list li{
float: left;width:16.66%;
}
.banner .carousel_list li img{width: 100%;vertical-align: middle;
}
.banner img{
height: 524px;
width: 1920px;

}
.banner .center-wrap{width: 1152px;position: absolute;left: 50%;top:0;
margin-left: -576px;height: 524px;

}
.banner .center-wrap .banner-nav {height: 524px/
}
.banner .center-wrap .banner-nav ul{height: 524px;}
.banner .center-wrap .banner-nav ul li{height: 16.66%;width: 296px;background-color: #20BD9A;}
.banner .center-wrap .left_btn{
position: absolute;width:28px;height: 44px;background:url(../images/icons.png) no-repeat -21px -94px ;
top:50%;left:-38px;margin-top:-22px ;
}
.banner .center-wrap .left_btn:hover{opacity: 0.6;}
.banner .center-wrap .right_btn{
position: absolute;width:28px;height: 44px;background:url(../images/icons.png) no-repeat -21px -29px ;
top:50%;right:-38px;margin-top:-22px ;
}
.banner .center-wrap .right_btn:hover{opacity: 0.6;}
.banner .center-wrap .banner-nav>ul>li{position: relative; background-color: rgba(0, 0, 0, 0.45);
box-sizing: border-box;color: #ffffff;border-bottom: 1px solid #d6d6d645;padding: 10px;

}
</style>
<script>

(function () {

var carousel_list = document.getElementById('carousel_list');
var left_btn = document.getElementById('left_btn');
var right_btn = document.getElementById('right_btn');

var clone_li = carousel_list.firstElementChild.cloneNode(true);


carousel_list.appendChild(clone_li);


var idx = 0;

right_btn.onclick = function () {

carousel_list.style.transition='transform .5s else 0s';

idx++;

carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)';

if (idx > 3) {
setTimeout(function () {

carousel_list.style.transition = 'none';

carousel_list.style.transform='none';55555

idx=0;

}, 500);
}
};
})();
/*轮播图*/

</script>


    2022-12-30 15:15:08
点开查看后面3条评论
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

点击“求累加和”按钮，没有任何反应
0 0 7
请老师看下，关于两个右按钮的问题。
14 0 4
老师。点击答案按钮，如何恢复option按钮，故事版怎么和纯代码结合使用啊
1 0 7
老师，我这个上一张按钮的代码怎么写
9 1 4
老师你好，按钮onclick怎么判断是否被点击？
0 0 3

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

前端工程师
  • 参与学习           人
  • 提交作业       15661    份
  • 解答问题       17891    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

200 5

老师给点提示。

155 1

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

在线咨询

领取优惠

免费试听

领取大纲

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