老师我的小圆点的位置出现问题自动切换图片也没有反应
来源：3-2 项目作业
DB1时间的玫瑰
2021-08-12 15:59:00
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕家居</title>
<meta name="description" content="慕家居,触手可及的家居风格!!">
<meta name="keywords" content="慕家居,简洁,自然,人性化,北欧简约风!!!">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!-- top区域 -->
<section class="top">
<div class="topbar">
<div class="center-wrap">
<p>123</p>
</div>
</div>
</section>
<!-- header区域 -->
<section class="header center-wrap clearfix">
<!-- logo -->
<div class="logo">
<h1>慕家居</h1>
</div>
<!-- 导航部分 -->
<nav>
<ul>
<li>
<a href="">
<span class="home-gry"></span>
<span>网站首页</span>
</a>
</li>
<li>
<a href="">
<span class="abouts-gry"></span>
<span>关于我们</span>
</a>
</li>
<li>
<a href="">
<span class="kefu-gry"></span>
<span>服务建设</span>
</a>
</li>
<li>
<a href="">
<span class="chanpin-gry"></span>
<span>产品中心</span>
</a>
</li>
<li>
<a href="">
<span class="fuwu-gry"></span>
<span>服务大厅</span>
</a>
</li>
</ul>
</nav>
<!-- 搜索框 -->
<div class="search">
<div class="searchBox">
<div class="searchText">
<input type="text" placeholder="请输入搜索内容">
</div>
<div class="searchBtn">
<button><img src="images/search.png" alt=""></button>
</div>
</div>
</div>
</section>
<!-- banner区域 -->
<section class="banner" id="banner">
<!-- 轮播图 -->
<ul class="carousel_list" id="carousel_list">
<li><img src="images/banner01.png" alt=""></li>
<li><img src="images/banner02.png" alt=""></li>
<li><img src="images/banner03.png" alt=""></li>
</ul>
<!-- 小圆点 -->
<ol class="circles" id="circles_ol">
<li data-t="0" class="current"></li>
<li data-t="1"></li>
<li data-t="2"></li>
</ol>
</section>
<script src="js/carousel.js"></script>
<!-- 商品区域 -->
<section class="goods center-wrap clearfix">
<!-- 左右按钮 -->
<a class="left-btn"></a>
<a class="right-btn"></a>
<!-- 商品图 -->
<ul>
<li>
<div class="picbox">
<img src="images/product01.png" alt="">
</div>
<div class="wordbox">
<p>时尚卫生间墙面颜色2029装饰设计</p>
</div>
</li>
<li>
<div class="picbox">
<img src="images/product02.png" alt="">
</div>
<div class="wordbox">
<p>现代北欧风格厨房装2029饰效果图</p>
</div>
</li>
<li>
<div class="picbox">
<img src="images/product03.png" alt="">
</div>
<div class="wordbox">
<p>现代时尚北欧风格卧2029室装饰画</p>
</div>
</li>
<li>
<div class="picbox">
<img src="images/product04.png" alt="">
</div>
<div class="wordbox">
<p>130平简约现代北欧2029风格装修</p>
</div>
</li>
<li>
<div class="picbox">
<img src="images/product05.png" alt="">
</div>
<div class="wordbox">
<p>现代北欧风格小客厅2029装修设计</p>
</div>
</li>
</ul>
</section>
<!-- 了解我们 -->
<section class="about center-wrap clearfix">
<!-- 标题 -->
<div class="hd">
<h2>了解我们</h2>
<p>about us</p>
<p class="link-left"></p>
<p class="link-right"></p>
<p class="link-bottom"></p>
</div>
<div class="bd">
<div class="leftbox">
<h3>关于我们</h3>
<h4>慕家居装饰材料有限公司</h4>
<span></span>
<div class="wordbox">
<p>慕家居家居装修网北欧风格家具图片专区,是国内海量全面的高质量北欧风格家具图片库…</p>
</div>
<div class="more">
<em>了解更多</em>
</div>
</div>
<div class="bigbox">
<img src="images/aboutus.png" alt="">
</div>
<div class="rightbox">
<div class="menu-top">
<div class="left-img">
<img src="images/liuyan.png" alt="">
</div>
<div class="wordbox">
<h3>在线留言</h3>
<p>on-line message</p>
</div>
</div>
<div class="menu-among">
<div class="left-img">
<img src="images/guanggao.png" alt="">
</div>
<div class="wordbox">
<h3>广告经营</h3>
<p>Advertising management</p>
</div>
</div>
<div class="menu-bottom">
<div class="left-img">
<img src="images/fuwu-white.png" alt="">
</div>
<div class="wordbox">
<h3>网络咨询</h3>
<p>Network consultation</p>
</div>
</div>
</div>
</div>
</section>
<!-- 精品推荐 -->
<section class="recommend clearfix">
<div class="center-wrap">
<div class="hd">
<h2>精品推荐</h2>
<p>Boutique recommendation</p>
<p class="link-bottom"></p>
</div>
<div class="bd">
<!-- 左右切换按钮 -->
<a class="left-btn"></a>
<a class="right-btn"></a>
<ul>
<li>
<a href=""><img src="images/recommend1.png" alt=""></a>
<div class="word">轻奢风格样板房客厅色彩搭配装修设计</div>
</li>
<li>
<a href=""><img src="images/recommend2.png" alt=""></a>
<div class="word">简约美式风格卧室衣柜设计</div>
</li>
<li>
<a href=""><img src="images/recommend3.png" alt=""></a>
<div class="word">轻奢风格L型厨房装修设计</div>
</li>
</ul>
</div>
</div>
</section>
<!-- 新闻中心 -->
<section class="press">
<div class="center-wrap">
<div class="hd">
<h2>新闻中心</h2>
<p>press center</p>
<p class="link-left"></p>
<p class="link-right"></p>
<p class="link-bottom"></p>
</div>
<div class="bd">
<div class="leftbox">
<div class="leftbox-top">
<div class="number">
<img src="images/talk-bg.png" alt="">
<p>01</p>
</div>
<div class="wordpic">
<h3>最新招标</h3>
<p>重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</p>
</div>
</div>
<div class="leftbox-top">
<div class="number">
<img src="images/talk-bg.png" alt="">
<p>03</p>
</div>
<div class="wordpic">
<h3>装修百科</h3>
<p>买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</p>
</div>
</div>
</div>
<div class="rightbox">
<div class="rightbox-top">
<div class="number">
<img src="images/talk-bg.png" alt="">
<p>02</p>
</div>
<div class="wordpic">
<h3>装修日记</h3>
<p>终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……
</p>
</div>
</div>
<div class="rightbox-top">
<div class="number">
<img src="images/talk-bg.png" alt="">
<p>04</p>
</div>
<div class="wordpic">
<h3>热门搜索</h3>
<p>选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<address>
<div class="center-wrap">
<h3>慕家居</h3>
<ul>
<li>咨询电话：010-88888888</li>
<li>公司网址：www.imooc.com</li>
<li>邮箱：KEFU@IMOOC.com</li>
</ul>
</div>
</address>
<div class="part">
<div class="center-wrap">
<p>Copyright © 2020 imooc.com All Rights Reserved | 京ICP备 </p>
</div>
</div>
</footer>
</body>
</html>
css.cs代码：
body {
font-family: "微软雅黑";
min-width: 1200px;
}
.center-wrap {
width: 1200px;
margin: 0 auto;
}
.clearfix {
overflow: hidden;
}
/* top区域 */
.top {
height: 40px;
background-color: #0058AA;
}
.top .topbar {
min-width: 1200px;
height: 40px;
line-height: 40px;
color: white;
font-size: 18px;
}
.top .topbar p {
float: right;
}
/* header区域 */
.header {
height: 121px;
/* 子绝父相 */
position: relative;
/* background-color: orange; */
}
/* logo区域 */
.header .logo {
width: 192px;
height: 91px;
float: left;
/* background-color: orangered; */
font-size: 64px;
color: #0058AA;
line-height: 91px;
margin: 19px 0 11px 0;
}
.header .logo h1 {
width: 192px;
height: 91px;
line-height: 91px;
background: url(../images/慕家居.png);
/* 将段首缩进这个属性设置为负数，可以用这个方法隐藏文字 */
text-indent: -999em;
/* 设置触碰时候的鼠标的样式 */
cursor: pointer;
position: absolute;
top: 19px;
}
/* 导航栏 */
.header nav {
width: 625px;
height: 91px;
/* background-color: yellow; */
margin: 20px 0 11px 260px;
}
.header nav ul {
float: left;
}
.header nav ul li {
/* 转行内块元素 */
display: inline-block;
width: 64px;
height: 91px;
text-align: center;
margin-right: 61px;
}
.header nav ul li:last-child {
margin-right: 0;
}
.header nav ul li span {
/* 转块 */
display: block;
font-size: 16px;
color: #545454;
width: 64px;
height: 21px;
}
.header nav ul li span:first-child {
/* 设置宽高 */
width: 33px;
height: 33px;
/* 设置上下间距 */
margin: 8px auto;
padding: 10px;
/* 圆角*/
border-radius: 50%;
}
.header nav ul li span.home-gry {
background: url(../images/home-gry.png) center center no-repeat;
}
.header nav ul li span.home-gry:hover {
background: url(../images/home-white.png) center center no-repeat;
}
.header nav ul li span.abouts-gry {
background: url(../images/abouts-gry.png) center center no-repeat;
}
.header nav ul li span.abouts-gry:hover {
background: url(../images/abouts-white.png) center center no-repeat;
}
.header nav ul li span.kefu-gry {
background: url(../images/kefu-gry.png) center center no-repeat;
}
.header nav ul li span.kefu-gry:hover {
background: url(../images/kefu-white.png) center center no-repeat;
}
.header nav ul li span.chanpin-gry {
background: url(../images/chanpin-gry.png) center center no-repeat;
}
.header nav ul li span.chanpin-gry:hover {
background: url(../images/chanpin-white.png) center center no-repeat;
}
.header nav ul li span.fuwu-gry {
background: url(../images/fuwu-gry.png) center center no-repeat;
}
.header nav ul li span.fuwu-gry:hover {
background: url(../images/fuwu-white.png) center center no-repeat;
}
.header nav ul li span:first-child:hover {
background-color: #0058AA;
animation: r .3s ease infinite;
}
/* 设置动画 */
@keyframes r {
0% {
transform: scale(1.0);
}
50% {
transform: scale(1.03);
}
100% {
transform: scale(1.0);
}
}
/* 搜索框 */
.header .search {
float: right;
width: 277px;
height: 121px;
position: relative;
right: 1px;
}
.header .search .searchBox {
width: 277px;
height: 39px;
position: absolute;
top: -71px;
/* 去掉边框线 */
border: none;
/* 去掉鼠标点击时候的蓝色框 */
outline: none;
}
.header .search .searchBox .searchText {
float: left;
width: 229px;
height: 37px;
}
.header .search .searchBox .searchText input {
width: 229px;
height: 37px;
font-size: 16px;
padding-left: 8px;
border: 1px solid #545454;
/* 去掉鼠标点击时候的蓝色框 */
outline: none;
/* 设置触碰时候的鼠标的样式 */
/* cursor: pointer; */
}
.header .search .searchBox .searchBtn {
float: right;
width: 48px;
height: 39px;
}
.header .search .searchBox .searchBtn img {
margin-top: 2px;
}
.header .search .searchBox .searchBtn button {
width: 48px;
height: 39px;
background-color: #0058AA;
/* 去掉边框线 */
border: none;
/* 去掉鼠标点击时候的蓝色框 */
outline: none;
/* 设置触碰时候的鼠标的样式 */
cursor: pointer;
}
/* banner区域 */
.banner {
height: 100%;
position: relative;
}
.banner .carousel_list {
width: 300%;
/* 清除浮动 */
/* overflow: hidden; */
transition: transform .5s ease 0s;
}
.banner .carousel_list li {
float: left;
width: 33.33%;
}
.banner .carousel_list li img {
width: 100%;
/* 白边的处理 */
vertical-align: middle;
}
/* 小圆点 */
.banner ol {
width: 42px;
height: 10px;
/* background-color: blue; */
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -22px;
}
.banner ol li {
float: left;
width: 10px;
height: 10px;
background-color: #FFFFFF;
margin-right: 6px;
/* 圆角 */
border-radius: 4px;
}
.banner ol li:last-child {
margin-right: 0;
}
.banner ol li.current {
background-color: #0058AA;
}
/* 商品区域 */
.goods {
height: 304px;
/* background-color: red; */
position: relative;
}
.goods a.left-btn {
display: block;
width: 48px;
height: 48px;
position: absolute;
/* 垂直居中，拉回负的height的一半 */
left: 0;
top: 40%;
margin-left: 6px;
background: url(../images/prev.png) center center no-repeat;
}
.goods a.left-btn:hover {
background: url(../images/prev_active.png) center center no-repeat;
/* opacity: 0.6; */
}
.goods a.right-btn {
display: block;
width: 48px;
height: 48px;
position: absolute;
/* 垂直居中，拉回负的height的一半 */
right: 0;
top: 40%;
margin-right: 6px;
background: url(../images/next.png) center center no-repeat;
}
.goods a.right-btn:hover {
background: url(../images/next_active.png) center center no-repeat;
}
.goods ul {
float: left;
margin-top: 38px;
padding-left: 73px;
}
.goods ul li {
float: left;
margin-right: 50px;
}
.goods ul li:last-child {
padding-left: 0;
}
.goods ul li .picbox {
width: 171px;
height: 175px;
}
.goods ul li .picbox img {
width: 171px;
height: 175px;
}
.goods ul li .picbox img:hover {
transform: scale(1.05);
box-shadow: 0px 0px 20px #838383;
}
.goods ul li .wordbox {
width: 162px;
height: 48px;
margin-top: 10px;
}
.goods ul li .wordbox p {
font-size: 18px;
color: #838383;
}
/* 了解我们 */
.about {
height: 372px;
margin-top: 32px;
/* background-color: orange; */
}
/* 标题 */
.about .hd {
height: 80px;
/* background-color: blue; */
text-align: center;
position: relative;
}
.about .hd h2 {
font-size: 32px;
padding-top: 8px;
color: #696868;
}
.about .hd p {
font-size: 18px;
color: #9B9B9B;
}
.about .hd p.link-left {
float: left;
width: 520px;
height: 2px;
background-color: #838383;
position: absolute;
bottom: 25px;
}
.about .hd p.link-right {
float: right;
width: 520px;
height: 2px;
background-color: #838383;
position: absolute;
right: 0;
margin-top: -20px;
}
.about .hd p.link-bottom {
width: 85px;
height: 2px;
background-color: #0058AA;
position: absolute;
left: 556px;
top: 50%;
margin-top: 36px;
}
.about .bd {
width: 238px height：374px;
position: relative;
/* background-color: yellow; */
}
.about .bd .leftbox {
width: 238px;
float: left;
/* background-color: wheat; */
}
.about .bd .leftbox h3 {
width: 104px;
height: 34px;
font-size: 26px;
color: #0058AA;
padding-top: 44px;
}
.about .bd .leftbox h4 {
width: 231px;
height: 41px;
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
}
.about .bd .leftbox span {
width: 142px;
height: 4px;
background-color: #0058AA;
position: absolute;
top: 118px;
}
.about .bd .leftbox .wordbox {
width: 238px;
height: 78px;
margin: 10px 0 10px 0;
}
.about .bd .leftbox .wordbox p {
width: 238px;
height: 78px;
font-size: 17px;
color: #7B7C7C;
line-height: 26px;
text-align: justify;
}
.about .bd .leftbox .more {
width: 130px;
height: 38px;
background: #0058AA;
text-align: center;
margin-left: 3px;
}
.about .bd .leftbox .more em {
font-size: 18px;
color: #FFFFFF;
position: relative;
top: 6px;
}
.about .bd .leftbox .more:hover {
animation: move .5s ease infinite;
}
/* 按钮旋转动画 */
@keyframes move {
0% {
transform: rotate(9deg);
}
50% {
transform: rotate(-9deg);
}
100% {
transform: rotate(9deg);
}
}
.about .bd .bigbox {
float: left;
/* background-color: green; */
position: absolute;
top: 17px;
left: 419px;
overflow: hidden;
}
.about .bd .bigbox img {
width: 384px;
height: 256px;
transition: transform .3s;
}
.about .bd .bigbox img:hover {
transform: scale(1.05);
box-shadow: 0px 0px 20px #838383;
}
.about .bd .rightbox {
float: right;
width: 273px;
height: 256px;
/* background-color: aqua; */
/* position: relative; */
}
.about .bd .rightbox .menu-top {
width: 273px;
height: 61px;
background-color: #CCCCCC;
margin-top: 50px;
position: relative;
transition: background-color .5s;
}
.about .bd .rightbox .menu-among,
.about .bd .rightbox .menu-bottom {
width: 273px;
height: 61px;
background-color: #CCCCCC;
margin-top: 10px;
position: relative;
transition: background-color .5s;
}
.about .bd .rightbox .menu-top:hover,
.about .bd .rightbox .menu-among:hover,
.about .bd .rightbox .menu-bottom:hover {
background-color: #0058AA;
}
.about .bd .rightbox .menu-top .left-img,
.about .bd .rightbox .menu-among .left-img,
.about .bd .rightbox .menu-bottom .left-img {
width: 40px;
height: 34px;
position: relative;
top: 14px;
padding-left: 30px;
}
.about .bd .rightbox .menu-top .wordbox h3,
.about .bd .rightbox .menu-among .wordbox h3,
.about .bd .rightbox .menu-bottom .wordbox h3 {
width: 88px;
height: 29px;
position: absolute;
top: 10px;
left: 92px;
color: #FFFFFF;
font-size: 22px;
}
.about .bd .rightbox .menu-top .wordbox p,
.about .bd .rightbox .menu-among .wordbox p,
.about .bd .rightbox .menu-bottom .wordbox p {
height: 14px;
position: absolute;
top: 38px;
left: 92px;
font-size: 12px;
color: #FFFFFF;
}
/* 精品推荐 */
.recommend {
height: 590px;
background-color: #EFF0F4;
}
.recommend .hd {
height: 80px;
padding-top: 26px;
position: relative;
}
.recommend .hd h2 {
font-size: 32px;
color: #696868;
text-align: center;
}
.recommend .hd p {
font-size: 18px;
color: #9B9B9B;
text-align: center;
}
.recommend .hd .link-bottom {
width: 93px;
height: 3px;
background-color: #0058AA;
position: absolute;
bottom: 7px;
left: 50%;
margin-left: -46px;
}
.recommend .bd {
height: 510px;
position: relative;
}
.recommend .bd a.left-btn {
display: block;
width: 48px;
height: 48px;
position: absolute;
/* 垂直居中，拉回负的height的一半 */
left: 0;
top: 40%;
margin-left: 6px;
background: url(../images/prev.png) center center no-repeat;
}
.recommend .bd a.right-btn {
display: block;
width: 48px;
height: 48px;
position: absolute;
/* 垂直居中，拉回负的height的一半 */
right: 0;
top: 40%;
margin-right: 6px;
background: url(../images/next.png) center center no-repeat;
}
.recommend .bd a.left-btn:hover {
background: url(../images/prev_active.png) center center no-repeat;
}
.recommend .bd a.right-btn:hover {
background: url(../images/next_active.png) center center no-repeat;
}
.recommend .bd ul {
float: left;
margin: 60px 61px;
}
.recommend .bd ul li {
float: left;
position: relative;
width: 345px;
height: 326px;
margin-right: 20px;
}
.recommend .bd ul li:last-child {
margin-right: 0;
}
.recommend .bd ul li img {
width: 345px;
}
.recommend .bd ul li .word {
position: absolute;
bottom: 0;
width: 325px;
height: 25px;
font-size: 16px;
color: #FFFFFF;
padding-left: 20px;
background: rgba(0, 0, 0, 0.50);
}
.recommend .bd ul li:hover .word {
opacity: 1;
}
/* 新闻中心 */
.press {
height: 467px;
/* background-color: pink; */
}
.press .hd {
height: 83px;
padding-top: 16px;
position: relative;
/* background-color: plum; */
}
.press .hd h2 {
font-size: 32px;
color: #696868;
text-align: center;
}
.press .hd p {
font-size: 18px;
color: #9B9B9B;
text-align: center;
margin-bottom: 16px;
}
.press .hd .link-left {
float: left;
position: absolute;
width: 520px;
height: 2px;
background-color: #9B9B9B;
bottom: 20px;
}
.press .hd .link-right {
float: right;
position: absolute;
width: 520px;
height: 2px;
background-color: #9B9B9B;
right: 0;
margin-top: -40px;
}
.press .hd .link-bottom {
width: 93px;
height: 3px;
background-color: #0058AA;
position: absolute;
left: 50%;
margin-left: -47px;
}
.press .bd {
height: 300px;
}
.press .bd .leftbox {
float: left;
width: 577px;
height: 300px;
/* background-color: green; */
}
.press .bd .leftbox .leftbox-top,
.press .bd .rightbox .rightbox-top {
width: 577px;
height: 110px;
margin-top: 40px;
position: relative;
/* background-color: papayawhip; */
}
.press .bd .leftbox .leftbox-top .number,
.press .bd .rightbox .rightbox-top .number {
padding: 20px 10px;
}
.press .bd .leftbox .leftbox-top .number img,
.press .bd .rightbox .rightbox-top .number img {
width: 70px;
height: 70px;
}
.press .bd .leftbox .leftbox-top .number p,
.press .bd .rightbox .rightbox-top .number p {
font-size: 40px;
color: #FFFFFF;
position: absolute;
top: 25px;
left: 21px;
}
.press .bd .leftbox .leftbox-top .number:hover,
.press .bd .rightbox .rightbox-top .number:hover {
animation: up .4s ease 0s infinite alternate;
}
/* 上下动画 */
@keyframes up {
from {
transform: translateY(-10px);
}
to {
transform: translateY(10px);
}
}
.press .bd .leftbox .leftbox-top .wordpic,
.press .bd .rightbox .rightbox-top .wordpic {
width: 400px;
height: 110px;
position: absolute;
top: 0;
margin-left: 100px;
}
.press .bd .leftbox .leftbox-top .wordpic h3,
.press .bd .rightbox .rightbox-top .wordpic h3 {
font-size: 21px;
color: #4A4A4A;
margin-top: 10px;
}
.press .bd .leftbox .leftbox-top .wordpic p,
.press .bd .rightbox .rightbox-top .wordpic p {
font-size: 18px;
margin-top: 5px;
color: #4A4A4A;
text-align: justify;
line-height: 1.2em;
}
.press .bd .rightbox {
float: right;
width: 577px;
height: 300px;
/* background-color: orange; */
}
/* 页脚 */
footer {
height: 240px;
}
footer address {
height: 210px;
background-color: #06142F;
}
footer address h3 {
float: left;
font-size: 48px;
color: #FFFFFF;
padding: 74px 0;
}
footer address ul {
float: left;
margin-left: 100px;
margin-top: 53px;
}
footer address ul li {
font-size: 16px;
color: #FFFFFF;
line-height: 40px;
}
footer .part {
height: 30px;
background-color: #202C46;
}
footer .part p {
font-size: 14px;
color: #FFFFFF;
text-align: center;
padding-top: 5px;
}
carousel.js代码：
(function () {
// 获取banner盒子
var banner = document.getElementById('banner');
// 获取banner盒子里的ul元素
var carousel_list = document.getElementById('carousel_list');
// 获取小圆点
var circles_ol = document.getElementById('circles_ol');
// 获取小圆点里所有的li元素
var circles_lis = circles_ol.getElementsByTagName('li');
// 克隆第一张li
var clong_li = carousel_list.firstElementChild.cloneNode(true);
// 上树
carousel_list.appendChild(clong_li);
// 当前正在显示的图片序号
var idx = 0;
// 自动轮播
function auto_move() {
// 图片序号加1
idx++;
// 拉动
carousel_list.style.transform = 'translateX(' + -25 * idx + '%)';
// 判断是否是最后一张，如果是最后一张，那么就要瞬间移动回来
if (idx > 2) {
setTimeout(function () {
// 去掉过渡
carousel_list.style.transition = 'none';
// 删除transform属性
carousel_list.style.transform = 'none';
// 全局变量图片序号变为0
idx = 0;
}, 500);
}
//调用改变小圆点函数
setCircles();
};
// 设置小圆点的circles在谁身上,序号为idx的小圆点才有current类名,其他的li都没有类名
function setCircles() {
// 遍历小圆点，每遍历一次都要和idx对比,如果相等就把该项设置类名为current,否则去掉类名
for (var i = 0; i <= 3; i++) {
if (i == idx % 3) {
circles_lis[i].className = 'current';
} else {
circles_lis[i].className = '';
}
}
};
})();
写回答
1回答
-
同学你好，针对你的问题解答如下：
1、由于没有清除banner下的图片浮动带来的影响，导致banner高度塌陷，所以小圆点参考banner定位最终显示的位置存在问题，另外，由于所有图片在一排显示，导致水平方向出现滚动条，如下图所示：
建议：给banner添加overflow:hidden;属性，清除浮动元素带来的影响，同时让超出的内容隐藏，去掉滚动条。
由于会通过js克隆一张图片添加到ul中，所以需要调整ul的宽度，如下：
调整了ul的宽度后，相应的也要调整li的宽度，如下：
2、因为代码中只是定义了自动轮播函数auto_move，并没有调用该函数，所以图片没有反应，建议：在定时器中调用auto_move函数，开启自动轮播，如下：
调用auto_move函数后，控制台出现如下报错信息：
原因：setCircles函数中for循环条件书写有误。
建议修改：去掉等号，小于3即可
另外，由于最后一张瞬间移动回来后，去掉了过渡，所以在开启自动轮播时，需要手动添加过渡属性，如下：
祝学习愉快~
0
相似问题