老师，关于轮播我有两个地方不是很明白
1. js部分
if(index==images.length-1){
index%=4;
$('.images').css('left','0px');
}
这里为什么不是限制num的值，整理的形参是num，传入的实参才是index，另外 index%=4这是什么意思呢？
我尝试去写，为甚不行呢？当num==4的时候，设置num的值等于0，即又从第一张开始
if(num==images.length-1){
num==0;
$('.images').css('left','0px');
}
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/web.css">
<link rel="stylesheet" type="text/css" href="font-awesome-web/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="js/web.js"></script>
<title>Document</title>
</head>
<body>
<div class="box">
<header>
<a href="#" class="address">北京</a>
<input type="text">
<a href="#" class="icon"><i class="fa fa-comment-o"></i></a>
</header>
<section class="banner">
<div class="image">
<div><img src="img/banner1.jpg" class="show"></div>
<div><img src="img/banner2.jpg"></div>
<div><img src="img/banner3.jpg"></div>
<div><img src="img/banner4.jpg"></div>
</div>
<div class="circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
</div>
<div class="footer">
<ul>
<li class="active"><i class="fa fa-camera-retro"></i><p>我的</p></li>
<li><i class="fa fa-camera"></i><p>相机</p></li>
<li><i class="fa fa-calendar"></i><p>日历</p></li>
<li><i class="fa fa-envelope-o"></i><p>我的</p></li>
</ul>
</div>
</body>
</html>
CSS：
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
.footer{
width:100%;
position:fixed;
bottom:0;
left:0;
height:50px;
border-top:1px solid #666666;
}
ul{
width:100%;
display:-webkit-flex;
text-align:center;
margin:5px 0;
}
ul li{
flex-grow:1;
}
ul li.active{
color:red;
}
.box{
max-width:640px;
background:#ff0000;
margin:0 auto;
height:40px;
}
header{
width:100%;
height:40px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0px 10px;
box-sizing:border-box;
}
header input{
flex:1;
border-radius:5px;
height:23px;
margin:0px 5px 0px 5px;
border:0;
box-shadow:0 0 1px #ffffff;
}
header a{
color:white;
}
section{
max-width:640px;
margin:0 auto;
height:300px;
overflow:hidden;
position:relative;
}
section .image{
width:99999px;
position:relative;
left:0;
top:0;
}
section .image img{
width:640px;
height:auto;
float:left;
display:none;
}
section .image .show{
display:block;
}
.circle{
width:100px;
height:30px;
position:absolute;
bottom:10px;
left:400px;
text-align:center;
line-height:30px;
}
.circle span{
display:inline-block;
width:16px;
height:16px;
background:#eee;
border-radius:50%;
}
.circle .active{
background:#ffffff;
}
JS：
$(function(){
// 切换圆点
var circles=$('.circle span'),
imgWidth=$('.image img').eq(0).width(),
timer,
index=0;
circles.on('click',function dotChange(){
index=circles.index($(this))
changeImg(index);
})
var images=$('.image img');
function changeImg(num){
// 点击的小圆点背景变白
circles.eq(num).addClass('active').siblings().removeClass('active');
// 小圆点切换到最后一个的时候，复原到第一个小圆点变白
if(num==4){
circles.eq(0).addClass('active').siblings().removeClass('active');
};
$('.image').stop().animate({
left:-num*imgWidth,
},1000,function(){
// 点击切换图片效果结束后开始自动播放
timer=setInterval(go,3000);
// 检查是否到最后一张图
if(index==images.length-1){
index%=4;
$('.images').css('left','0px');
}
})
}
function autoGo(){
setInterval(go,3000);
}
autoGo()
function go(){
index++;
changeImg(index)
}
})
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星