老师，关于商品移动问题
问题描述：
第一张图片向右移动的时候还是好的，等再移动的时候就乱了，而且如何实现移动到最后一张图片的时候就停止移动呢？
<!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>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- top区域 -->
<div class="top">
<p class="tel">服务热线：400-8888-888</p>
</div>
<!-- header区域 -->
<header class="center-wrap">
<h1 class="logo">慕家居</h1>
<nav>
<ul class="clearfix pic">
<li class="index_icon">
</li>
<li class="index_aboutus">
</li>
<li class="server_icon">
</li>
<li class="pro_icon">
</li>
<li class="tel_icon">
</li>
</ul>
<ul class="clearfix text">
<li>
<a href="">网站首页</a>
</li>
<li>
<a href="">关于我们</a>
</li>
<li>
<a href="">服务建设</a>
</li>
<li>
<a href="">产品中心</a>
</li>
<li>
<a href="">服务大厅</a>
</li>
</ul>
<input type="text" placeholder="请输入搜索内容">
<button><img src="images/search.png" alt=""></button>
</nav>
</header>
<!-- 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 id="circle_ol">
<li data-n="0" class="current"></li>
<li data-n="1"></li>
<li data-n="2"></li>
</ol>
</section>
<script src="js/carousel.js"></script>
<!-- 商品区 -->
<section class="product center-wrap">
<a href="javascript:;" class="leftbtn" id="leftbtn"></a>
<div class="ulparent">
<ul class="bigbox center-wrap" id="bigbox">
<li class="box">
<div class="pic">
<img src="images/product01.png" alt="">
</div>
<div class="text">
时尚卫生间墙面颜色
2029装饰设计
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product02.png" alt="">
</div>
<div class="text">
现代北欧风格厨房装
2029饰效果图
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product03.png" alt="">
</div>
<div class="text">
现代时尚北欧风格卧
2029室装饰画
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product04.png" alt="">
</div>
<div class="text">
130平简约现代北欧
2029风格装修
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product05.png" alt="">
</div>
<div class="text">
现代北欧风格小客厅
2029装修设计
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product06.png" alt="">
</div>
<div class="text">
时尚卫生间墙面颜色
2029装饰设计
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product07.png" alt="">
</div>
<div class="text">
现代北欧风格厨房装
2029饰效果图
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product08.png" alt="">
</div>
<div class="text">
现代时尚北欧风格卧
2029室装饰画
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product09.png" alt="">
</div>
<div class="text">
130平简约现代北欧
2029风格装修
</div>
</li>
<li class="box">
<div class="pic">
<img src="images/product10.png" alt="">
</div>
<div class="text">
现代北欧风格小客厅
2029装修设计
</div>
</li>
</ul>
</div>
<a href="javascript:;" class="rightbtn" id="rightbtn"></a>
</section>
<script src="js/product.js"></script>
<!-- 了解我们区域 -->
<section class="aboutus center-wrap">
<div class="up">
<div class="bdleft"></div>
<div class="text">了解我们</div>
<div class="bdright"></div>
<div class="eng">about us</div>
</div>
<div class="left">
<div class="text">关于我们</div>
<div class="text2">慕家居装饰材料有限公司</div>
<div class="border"></div>
<div class="text3">慕家居家居装修网北欧风格家
具图片专区,是国内海量全面的
高质量北欧风格家具图片库…
</div>
<div class="more">
<a href="">了解更多</a>
</div>
</div>
<div class="center">
<img src="images/aboutus.png" alt="">
</div>
<div class="right">
<div class="liuyan box">
<div class="pic"><img src="images/liuyan.png" alt=""></div>
<div class="ch">在线留言</div>
<div class="en">on-line message</div>
</div>
<div class="ggjy box">
<div class="pic"><img src="images/guanggao.png" alt=""></div>
<div class="ch">广告经营</div>
<div class="en">Advertising management</div>
</div>
<div class="wlzx box">
<div class="pic"><img src="images/wangluo.png" alt=""></div>
<div class="ch">网络咨询</div>
<div class="en">Network consultation</div>
</div>
</div>
</section>
<!-- 精品推荐区 -->
<section class="jptj">
<div class="bigbox">
<div class="up">
<div class="chtitle">精品推荐</div>
<div class="entitle">Boutique recommendation</div>
<div class="border"></div>
</div>
<div class="under center-wrap">
<a href="" class="leftbtn"></a>
<div class="box box1">
<img src="images/recommend1.png" alt="">
<div class="text">轻奢风格样板房客厅色彩搭配装修设计</div>
</div>
<div class="box box2">
<img src="images/recommend2.png" alt="">
<div class="text">简约美式风格卧室衣柜设计</div>
</div>
<div class="box box3">
<img src="images/recommend3.png" alt="">
<div class="text">轻奢风格L型厨房装修设计</div>
</div>
<a href="" class="rightbtn"></a>
</div>
</div>
</section>
<!-- 新闻中心 -->
<section class="news center-wrap">
<div class="up">
<div class="bdleft"></div>
<div class="chtitle">新闻中心</div>
<div class="bdright"></div>
<div class="entitle">press center</div>
<div class="bdbox"></div>
</div>
<div class="under">
<ol class="clearfix">
<li class="one">
<div class="xuhao">01</div>
<dl class="clearfix">
<dt class="title">最新招标</dt>
<dd class="text">重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……
</dd>
</dl>
</li>
<li class="two">
<div class="xuhao">02</div>
<dl class="clearfix">
<dt class="title">装修日记</dt>
<dd class="text">终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……
</dd>
</dl>
</li>
<li class="three">
<div class="xuhao">03</div>
<dl class="clearfix">
<dt class="title">装修百科</dt>
<dd class="text">买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……
</dd>
</dl>
</li>
<li class="four">
<div class="xuhao">04</div>
<dl class="clearfix">
<dt class="title">热门搜索</dt>
<dd class="text">选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……
</dd>
</dl>
</li>
</ol>
</div>
</section>
<!-- footer区域 -->
<footer>
<div class="telmessage">
<div class="logo">慕家居</div>
<div class="tel">咨询电话：010-88888888</div>
<div class="wangzhi">公司网址：www.imooc.com</div>
<div class="email">邮箱：KEFU@IMOOC.com</div>
</div>
<div class="banquan">
Copyright © 2020 imooc.com All Rights Reserved | 京ICP备
</div>
</footer>
</body>
</html>
/* top区域 */
.top {
height: 40px;
background-color: #0058AA;;
}
.top .tel {
float: right;
text-align: center;
width: 212px;
height: 40px;
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
margin-right: 360px;
}
/* header区域 */
.center-wrap {
height: 121px;
padding-bottom: 11px;
position: relative;
}
.center-wrap .logo {
float: left;
font-size: 64px;
color: #0058AA;
width: 192px;
height: 91px;
line-height: 91px;
margin: 19px 125px 0 0;
cursor: pointer;
}
.center-wrap ul.pic {
height: 33px;
padding: 28px 0;
}
.center-wrap ul.pic li {
float: left;
width: 50px;
height: 50px;
margin-right: 75px;
position: relative;
}
.center-wrap ul.pic li:hover {
border-radius: 50%;
background-color: #0058AA;
animation: dh 0.2s ease 0s alternate infinite;
}
@keyframes dh {
from {
transform: scale(1);
}
to {
transform: scale(0.8);
}
}
.index_icon {
background:url(../images/home-gry.png) center center no-repeat;
}
.index_icon:hover {
background:url(../images/home-white.png) center center no-repeat;
}
.index_aboutus {
background: url(../images/abouts-gry.png) center center no-repeat;
}
.index_aboutus:hover {
background: url(../images/abouts-white.png) center center no-repeat;
}
.server_icon {
background: url(../images/kefu-gry.png) center center no-repeat;
}
.server_icon:hover {
background: url(../images/kefu-white.png) center center no-repeat;
}
.pro_icon {
background: url(../images/chanpin-gry.png) center center no-repeat;
}
.pro_icon:hover {
background: url(../images/chanpin-white.png) center center no-repeat;
}
.tel_icon {
background: url(../images/fuwu-gry.png) center center no-repeat;
}
.tel_icon:hover {
background: url(../images/fuwu-white.png) center center no-repeat;
}
.center-wrap ul.text {
height: 21px;
position: absolute;
left: 313px;
}
.center-wrap ul.text li {
float: left;
padding-right: 61px;
}
.center-wrap ul.text li a {
font-size: 16px;
color: #545454;
}
.center-wrap input {
position: absolute;
top: 51px;
right: 48px;
width: 219px;
height: 37px;
border: 1px solid #D3D3D3;
padding-left: 10px;
outline: 0;
}
.center-wrap button {
position: absolute;
top: 51px;
right: 0;
width: 48px;
height: 39px;
background-color: #0058AA;
cursor: pointer;
border: 0;
}
.center-wrap button img {
margin-top: 3px;
}
/* banner区域 */
.banner {
position: relative;
width: 100%;
}
.banner .carousel_list {
width: 400%;
overflow: hidden;
}
.banner .carousel_list li {
float: left;
width: 25%;
}
.banner .carousel_list li img {
width: 100%;
}
.banner ol {
width: 42px;
height: 10px;
position: absolute;
left: 50%;
margin-left: -21px;
bottom: 20px;
}
.banner ol li {
float: left;
width: 10px;
height: 10px;
background-color: white;
margin-right: 6px;
border-radius: 50%;
cursor: pointer;
}
.banner ol li:last-child {
margin-right: 0;
}
.banner ol li.current {
background-color: #0058AA;
}
/* 商品区 */
.product {
width: 1163px;
height: 272px;
padding-top: 38px;
position: relative;
box-sizing: border-box;
}
.product .leftbtn, .product .rightbtn {
width:48px;
height: 48px;
position: absolute;
top:38%;
}
.product .leftbtn {
float: left;
left: 0;
background: url(../images/prev.png);
}
.product .rightbtn {
float: right;
right: 0;
background: url(../images/next.png);
}
.product .leftbtn:hover {
background: url(../images/prev_active.png);
}
.product .rightbtn:hover {
background: url(../images/next_active.png);
}
.product .ulparent {
width: 1055px;
margin: 0 auto;
overflow: hidden;
}
.product .bigbox {
width: 3000px;
height: 272px;
position: relative;
}
.product .bigbox .box {
float: left;
width: 171px;
height: 236px;
margin-right: 50px;
}
.product .bigbox .box:last-child {
margin-right: 0;
}
.product .bigbox .box .text {
width: 162px;
height: 48px;
font-size: 18px;
color: #838383;
margin-top: 10px;
}
/* 了解我们区域 */
.aboutus {
width: 1163px;
height: 456px;
margin-top: 32px;
position: relative;
}
.aboutus .up {
height: 82px;
}
.aboutus .up .bdleft {
width: 513px;
height: 0;
border: 1px solid #808080;
position: absolute;
top:42px;
}
.aboutus .up .text {
width: 128px;
height: 42px;
font-size: 32px;
color: #696868;
position: absolute;
left: 50%;
margin-left: -64px;
}
.aboutus .up .bdright {
width: 513px;
height: 0;
border: 1px solid #808080;
position: absolute;
top:42px;
right: 0;
}
.aboutus .up .eng {
position: absolute;
width: 93px;
height: 34px;
top: 44px;
left: 46%;
border-bottom: 3px solid #0058AA;
font-size: 18px;
color: #9B9B9B;
text-align: center;
line-height: 34px;
}
.aboutus .left {
width: 238px;
height: 273px;
position: absolute;
top:115px;
left: 0;
}
.aboutus .left .text {
width: 104px;
height: 34px;
font-size: 26px;
color: #0058AA;
}
.aboutus .left .text2 {
width: 231px;
height: 41px;
font-size: 21px;
color: #5A5A5A;
line-height: 41px;
}
.aboutus .left .border {
width: 142px;
height: 4px;
margin-bottom: 24px;
background-color: #0058AA;
}
.aboutus .left .text3 {
width: 238px;
height: 78px;
font-size: 18px;
color: #7B7C7C;
line-height: 26px;
}
.aboutus .left .more {
width:130px;
height: 38px;
margin-top: 54px;
background-color: #0058AA;
text-align: center;
line-height: 38px;
}
.aboutus .left .more a {
font-size: 18px;
color: #FFFFFF;
}
.aboutus .left .more:hover {
animation: yb 0.6s ease alternate infinite;
}
@keyframes yb {
from {
transform:rotate(20deg)
}
to {
transform: rotate(-20deg)
}
}
.aboutus .center {
float: left;
width: 345px;
height: 256px;
position: absolute;
top: 118px;
left: 50%;
margin-left: -192px;
transition: transform 0.4s ease 0s;
overflow: hidden;
}
.aboutus .center img {
width: 345px;
height: 256px;
position: absolute;
top: 0;
left: 56%;
margin-left: -192px;
}
.aboutus .center:hover {
transform: scale(1.1);
}
.aboutus .right {
float: right;
}
.aboutus .right .box{
width: 273px;
height: 61px;
position: absolute;
background-color: #CCCCCC;
margin-bottom: 10px;
transition: background-color 0.4s ease 0s;
}
.aboutus .right .box:hover {
background-color: #0058AA;
}
.aboutus .right .liuyan {
top: 125px;
right: 0;
}
.aboutus .right .ggjy {
top: 196px;
right: 0;
}
.aboutus .right .wlzx {
top: 267px;
right: 0;
}
.aboutus .right .pic {
float: left;
width: 40px;
height: 34px;
padding: 14px 0 13px 30px;
}
.aboutus .right .ch {
float: left;
width: 88px;
height: 29px;
font-size: 22px;
color: #FFFFFF;
text-align: center;
margin-top: 10px;
margin-left: 19px;
}
.aboutus .right .en {
float: left;
height: 14px;
font-size: 12px;
color: #FFFFFF;
margin-left: 19px;
margin-bottom: 11px;
}
/* 精品推荐区 */
.jptj .bigbox {
width: 100%;
height: 590px;
background-color:#EFF0F4;
position: relative;
}
.jptj .bigbox .up {
width: 1200px;
height: 195px;
}
.jptj .bigbox .up .chtitle {
width: 128px;
height: 42px;
margin-top: 70px;
font-size: 32px;
color: #696868;
text-align: center;
position: absolute;
left: 50%;
margin-left: -64px;
}
.jptj .bigbox .up .entitle {
width: 232px;
height: 24px;
position: absolute;
left: 50%;
margin-left: -116px;
top: 112px;
font-size: 18px;
color: #9B9B9B;
text-align: center;
line-height: 24px;
}
.jptj .bigbox .up .border {
width: 93px;
height: 3px;
position: absolute;
left: 50%;
margin-left: -46.5px;
top:152px;
background-color: #0058AA;
}
.jptj .bigbox .under {
width: 1200px;
height: 326px;
position: relative;
box-sizing: border-box;
}
.jptj .bigbox .under .leftbtn{
float: left;
width:48px;
height: 48px;
position: absolute;
top:50%;
margin-top: -24px;
left:0;
background: url(../images/prev.png);
}
.jptj .bigbox .under .leftbtn:hover {
background: url(../images/prev_active.png);
}
.jptj .bigbox .under .box {
position: absolute;
float: left;
width: 345px;
height: 326px;
}
.jptj .bigbox .under .box1 {
left: 61px;
}
.jptj .bigbox .under .box2 {
left: 429px;
}
.jptj .bigbox .under .box3 {
right: 56px;
}
.jptj .bigbox .under .box:last-child {
margin-right: 0;
}
.jptj .bigbox .under .box .text {
position: absolute;
width: 345px;
height: 45px;
top:281px;
background-color: rgba(0,0,0,0.50);
font-size: 16px;
color: #FFFFFF;
text-align: center;
line-height: 45px;
}
.jptj .bigbox .under .rightbtn{
float: right;
width:48px;
height: 48px;
position: absolute;
top:50%;
margin-top: -24px;
right:0;
background: url(../images/next.png);
}
.jptj .bigbox .under .rightbtn:hover {
background: url(../images/next_active.png);
}
/* 新闻中心区 */
.news {
width: 1155px;
height: 489px;
}
.news .up {
width: 1155px;
height: 86px;
margin-top: 82px;
position: relative;
}
.news .up .bdleft {
width: 513px;
height: 0;
border-bottom: 1px solid #9B9B9B;
position: absolute;
top:42px;
left:0;
}
.news .up .chtitle {
width: 128px;
height: 42px;
margin: 0 auto;
font-size: 32px;
color: #696868;
text-align: center;
line-height: 42px;
}
.news .up .bdright {
width: 513px;
height: 0;
border-bottom: 1px solid #9B9B9B;
position: absolute;
top:42px;
right:0;
}
.news .up .entitle {
width: 105px;
height: 24px;
margin: 0 auto;
position: absolute;
top:43px;
left: 50%;
margin-left: -52px;
font-size: 18px;
color: #9B9B9B;
text-align: center;
line-height: 24px;
}
.news .up .bdbox {
width: 93px;
height: 3px;
left: 50%;
margin-left: -46px;
position: absolute;
top:82px;
background-color: #0058AA;
}
.news .under {
width: 1155px;
height: 188px;
padding-top: 70px;
position: relative;
}
.news .under .clearfix .one {
width: 503px;
height: 109px;
}
.news .under .clearfix div.xuhao {
float: left;
width: 65px;
height: 65px;
text-align: center;
line-height: 65px;
font-size: 40px;
color: #FFFFFF;
background-image: url(../images/talk-bg.png);
margin-right: 38px;
position: relative;
top:20px;
}
.news .under .clearfix div.xuhao:hover {
animation: move 0.4s ease 0s alternate infinite;
}
@keyframes move {
from {
top:20px;
}
to {
top:10px;
}
}
.news .under .clearfix dt.title {
float: left;
width: 84px;
height: 28px;
font-size: 21px;
color: #4A4A4A;
text-align: center;
margin-bottom: 12px;
}
.news .under .clearfix dd.text {
float: left;
width: 400px;
height: 69px;
font-size: 18px;
color: #4A4A4A;
}
.news .under .clearfix .two {
width: 503px;
height: 109px;
position: absolute;
top: 70px;
right: 74px;
}
.news .under .clearfix .three {
width: 503px;
height: 221px;
position: absolute;
top: 215px;
left: 0px;
margin-bottom: 50px;
}
.news .under .clearfix .four {
width: 503px;
height: 109px;
position: absolute;
top: 215px;
right: 74px;
margin-bottom: 50px;
}
/* footer区域 */
.telmessage {
width: 100%;
height: 210px;
background-color: #06142F;
position: relative;
}
.telmessage .logo {
width: 144px;
height: 63px;
font-size: 48px;
color: #FFFFFF;
line-height: 63px;
position: absolute;
top:74px;
left:360px;
}
.telmessage .tel {
width:191px;
height: 40px;
position: absolute;
top:53px;
left:605px;
font-size: 16px;
color: #FFFFFF;
line-height: 40px;
}
.telmessage .wangzhi {
width:207px;
height: 40px;
position: absolute;
top:93px;
left:605px;
font-size: 16px;
color: #FFFFFF;
line-height: 40px;
}
.telmessage .email {
width:199px;
height: 40px;
position: absolute;
top:135px;
left:605px;
font-size: 16px;
color: #FFFFFF;
line-height: 40px;
}
footer .banquan {
width: 100%;
height: 30px;
background-color: #202C46;
text-align: center;
line-height: 30px;
color: white;
font-size: 14px;
}
(function () {
//得到元素
var rightbtn = document.getElementById('rightbtn');
var leftbtn = document.getElementById('leftbtn');
var bigbox = document.getElementById('bigbox');
//设置正在显示的图片的序号
var idx = 0;
rightbtn.onclick = function () {
idx++;
bigbox.style.left = -171 * idx + 'px';
if (idx > 9){
bigbox.style.left = 'none';
}
};
})();
9
收起
正在回答
1回答
同学你好，可以将判断添加在元素移动的前面，如果想显示出来最后一张时不再移动，也就是前面移动了5张，判断idx为5就做限制，如下：
移动的距离需要考虑到50px的间距。
自己再测试下，祝学习愉快！
相似问题
关于购物车和商品快照
15
0
3
电商项目的商品,商品参数,商品规格问题
15
1
4
订单表的编号和商品表的编号没任何关联吧
15
0
3
添加商品到购物车
49
0
5
应该没什么问题,老师看一下!!
0
1
6
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星