在第二次图片自动循环的时候，循环失败，会出现一大片空白，圆点也不进行轮播

首页课程实战体系课手记专栏慕课教程

来源：4-3 自动切换效果代码分析

慕用0863198

2019-03-09 08:35:09

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</a>

</header>

</div>-->

</div>

</section>

</div>

</div>

<div>Android</div>

</div>

<div>Mysql</div>

</div>

</div>

</content>

</div>

</div>

<p>jQuery实战课程</p>

<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy

</p>

<p><i class="fa fa-clock-o fa-lg"></i>时间：8点半

</p>

</div>

</div>

</div>

<p>微信小程序</p>

<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy

</p>

<p><i class="fa fa-clock-o fa-lg"></i>时间：3点半

</p>

</div>

</div>

</div>

<p>RN实战课程</p>

<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy

</p>

<p><i class="fa fa-clock-o fa-lg"></i>时间：5点半

</p>

</div>

</div>

</div>

<p>响应式布局</p>

<p><i class="fa fa-weixin fa-lg"></i>微信：fcsboy

</p>

<p><i class="fa fa-clock-o fa-lg"></i>时间：1点半

</p>

</div>

</div>

</a><br>我的

</div>

</a><br>相机

</div>

</a><br>日历

</div>

</a><br>信息

</div>

</footer>

</body>

</html>

margin: 0;

padding: 0;

}

.clearfix::after{

display: block;

clear: both;

visibility: hidden;

content: "";

height: 0;

}

text-decoration: none;

color: #333;

}

.box-wrapper{

width: 640px;

margin:0 auto;

}

.box-wrapper>header{

padding:0 2%;

display: flex;

align-items: center;

height: 40px;

background-color: red;

}

.box-wrapper>header>a{

color: white;

}

.box-wrapper>header>a:nth-child(1){

flex-basis: 40px;

text-align: left;

}

.box-wrapper>header>a:nth-child(2){

flex: 1;

}

.box-wrapper>header>a:nth-child(3){

flex-basis: 34px;

text-align: right;

}

.box-wrapper>header>a>input{

border-radius: 3px;

border:none;

box-sizing: border-box;

width: 100%;

}

@media screen and (max-width: 640px){

.box-wrapper{

width: 100%;

}

.box-wrapper>.banner,.box-wrapper>.banner>.pi,.box-wrapper>.banner>.pi>.pi-item{

height: 280px;

overflow: hidden;

}

.box-wrapper>.banner{

position: relative;

}

.box-wrapper>.banner>.pi{

position: relative;

left: 0;

top: 0;

width: 9999999px;

}

.clearfix{

*zoom:1;

}

.box-wrapper>.banner>.pi>.pi-item{

float: left;

width: 640px;

}

.box-wrapper>.banner>.pi>.pi-item>img{

width: 100%;

}

.box-wrapper>.banner>.dots{

position: absolute;

width: 100%;

height: 8px;

text-align: center;

bottom: 15px;

z-index: 3;

}

.box-wrapper>.banner>.dots>span{

height: 10px;

width: 10px;

border-radius: 50%;

vertical-align: middle;

display: inline-block;

background-color: grey;

z-index: 4;

}

.box-wrapper>.banner>.dots>.dots-active{

background-color: white;

}

/*中间content部分*/

content{

width: 100%;

height: 30%;

display:flex;

flex-flow: row wrap;

justify-content: space-between;

}

content>.content-item{

width: 23%;

display: flex;

flex-flow: column nowrap;

justify-content: center;

text-align: center;

padding-top: 2%;

}

content>.content-item>img{

border-radius: 50%;

width:60%;

height:75%;

margin: 0 auto;

}

content>.content-item div{

font-size: 14px;

margin-top: 4%;

}

.title{

height: 34px;

width: 100%;

background-color: #f0f0f0;

position: relative;

}

.title>.header{

margin: auto 2%;

}

.title>.header div{

font-size: 14px;

display: inline-block;

position: absolute;

top: 20%;

}

.title>.header>div:nth-child(1){

left: 2%;

color: #999;

font-weight: 400;

margin: auto 0;

}

.title>.header>div:nth-child(2){

right: 2%;

color: #c9394a;

font-weight: 400;

}

/*item课程列表部分*/

.items{

width: 100%；

height: 400px;

margin-bottom: 8%;

}

.items .item{

width: 92%;

border-bottom: 1px solid #ccc;

height: 100px;

margin: 0 auto;

position: relative;

padding-top: 5% ;

padding-bottom: 2%;

}

.items .item>.item-left{

float: left;

width: 30%;

height: 80%;

}

.items .item>.item-center{

position: absolute;

left: 30%;

}

.items .item>.item-center>p{

font-size: 14px;

color: #999;

}

.items .item>.item-center>p:nth-child(1){

font-size: 18px;

color: black;

}

.items .item>.item-center>p:nth-child(3) i{

color: green;

margin-right: 1%;

}

.items .item>.item-center>p:nth-child(4) i{

margin-right: 1.5%;

}

.items .item>.item-right{

position: absolute;

right: 3%;

top: 25%;

}

.items .item>.item-right em{

font-size: 60px;

color: red;

font-style: normal;

}

.items .item>.item-right span{

color: red;

}

.items .item:nth-child(1) .item-left{

background: url("http://szimg.mukewang.com/5806de7c00014a3105400300-360-202.jpg") no-repeat top center;

background-size:90% auto;

}

.items .item:nth-child(2) .item-left{

background: url("http://szimg.mukewang.com/583e42fb0001e04f05400300-360-202.jpg") no-repeat top center;

background-size:90% auto;

}

.items .item:nth-child(3) .item-left{

background: url("http://szimg.mukewang.com/57ec8a820001c60b05400300-360-202.jpg") no-repeat top center;

background-size:90% auto;

}

.items .item:nth-child(4) .item-left{

background: url("http://szimg.mukewang.com/576b84c10001b1c005400300-360-202.jpg") no-repeat top center;

background-size:90% auto;

}

footer{

position: fixed;

bottom: 0;

width:100%;

height: 54px;

text-align: center;

border-top: 1px solid #ccc;

font-size: 12px;

display: flex;

background-color: #fff;

}

footer>.footericon{

flex: 1;

margin: 8px 0 ;

}

footer .icon-active{

color: red;

}

footer>.footericon>a{

display: inline-block;

margin: 0 0 5px 0;

}

var dots=$(".dots span");

var pi=$(".pi-item");

var imgWidth = $(".pi-item img:first-child").eq(0).width();

var _index=0,timer=null;

//获取点击圆点当前的索引

dots.on('click',function(){

_index=dots.index($(this));

pigo(_index);

})

//图片切换函数使圆点变白

function pigo(num){

if (num==4) {

num=0;

$(".pi").css("left","0px");

}

$(".pi").stop().animate({left: -num * imgWidth},1000);

$(".dots span").eq(num).addClass("dots-active").siblings().removeClass("dots-active");

}

//自动切换函数

function autogo(){timer=setInterval(go,3000)

}

autogo();

//计数器函数

function go(){

_index++;pigo(_index);

}

//鼠标放上去清除定时器

$(".pi-item").mouseover(function(){

clearInterval(timer)

})

//鼠标移开继续定时器继续切换

$(".pi-item").mouseout(function(){

_index=$(".dots").index($(this));

pigo(_index);

})

是js的代码逻辑有问题吗

写回答

1回答

Miss路

2019-03-10

已采纳

同学，你好。这个问题你可以通过看课程自己解决，老师讲过的内容还不会有点说不过去哦，如果说老师讲的哪个点你不懂，我一定会为你做详细的解答，但是你现在问的是老师讲过的，这种问题是不允许的，建议你重新把轮播听一遍，然后分析好思路之后再写，这样就不会有问题了，现在思路你都还没缕清，即使老师为你找出了问题，你还是没有学会。

注意学习方法哦，不要图快，要扎扎实实的学好每一步。

祝学习愉快！

0 学习 · 5012 问题

查看课程

相似问题

老师，关于轮播我有两个地方不是很明白

回答 2

如何在网站的文章页实现图片自适应问题，

回答 1

老师，请问为何我的changeImg()设置inner.css(

回答 1

轮播图2个问题

回答 1

在代码最后如果切换手机的话，这个轮播图图片会出现问题

回答 1

打开慕课网App查看更多内容