轮播图2个问题

来源：4-2 点击圆点切换图片代码分析

是否可以坚持走得更远些

2018-09-14 09:51:33

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewpotr" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>移动端案例</title>
<link rel="stylesheet" type="text/css" href="css/style.css
">
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="box">

<div class="header">
<a href="#" class="header-address">北京</a>
<a href="#" class="header-search"><input type="text" name=""></a>
<a href="#" class="header-message"><i class="fa fa-comment-o"></i></a>
</div>

<div class="banner">
<div class="inner clearfix">
<div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner2.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner3.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner4.jpg" alt="" /></div>

</div>
<div class="dot">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>


<div class="footer">
<div class="footericon iconactive">
<a class="icon_a">
<i class="fa fa-user-o"></i>
</a>我的
</div>
<div class="footericon">
<a class="icon_a">
<i class="fa fa-camera-retro"></i>
</a>相机
</div>
<div class="footericon">
<a class="icon_a">
<i class="fa fa-calendar"></i>
</a>日历
</div>
<div class="footericon">
<a class="icon_a">
<i class="fa fa-envelope-open"></i>
</a>信息
</div>
</div>
</div>

<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
*{
margin:0;
padding:0;
list-style:none;
}
a{
text-decoration:none;
}

body{
font-size: 14px;
}

.clearfix:after{
content: '';
height: 0;
visibility: hidden;
display: block;
clear: both;
}

/*box*/
.box{
width: 6.4rem;
margin:0 auto;

}
/*header*/
.header{
background: #ef1313;
height: 44px;
padding:0 15px;
display: flex;
align-items:center;
}
.header-address{
color: white;
margin-right: 15px;
}
.header-search{
flex-grow:1;

}
.header-search input{
width: 100%;
border:0;
border-radius:8px;
height: 28px;
box-sizing:border-box;
}
.header-message{
color: white;
margin-left: 15px;
}

/*banner*/
.banner{
overflow: hidden;
position: relative;
/*height: 320px;*/
height: 2.6rem;
}
.banner .inner{
width: 9999px;
position: absolute;
/*top: 0;
left: 0;*/
/*z-index: 3;*/
}
.innerwraper{
float: left;
width: 6.4rem;
/*width: 640px;*/
}
.innerwraper img{
width: 100%;
}
.banner .dot{
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
.dot span{
/*width: 16px;
height: 16px;*/
width: 0.16rem;
height: 0.16rem;
border-radius: 50%;
display: inline-block;
background: #9aa499;
}
.dot span:hover{
cursor: pointer;
}

.dot .active{
background: white;
}

/*footer*/
.footer{
width: 100%;
height: 54px;
display: flex;
border-top: 1px solid #ccc;
position: fixed;
bottom: 0;
}
.footericon{
flex-grow: 1;
text-align: center;
font-size: 14px;
}
.icon_a{
display: block;
margin:8px 0;
}
.iconactive{
color: red;
}

(function(doc,win){
	var docEl=doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function(){
		var clientWidth = docEl.clientWidth;
		if(!clientWidth) return;
		if(clientWidth >= 640){
			docEl.style.fontSize = '100px';
		}else{
			docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
		}
	};

	if(!doc.addEventListener) return;

	win.addEventListener(resizeEvt,recalc,false);

	doc.addEventListener('DOMContentLoaded',recalc,false);

	recalc();
})(document,window);



//banner轮播图
var timer;
var index = 0;
var inner = $('.inner');
var innerwraper = $('.innerwraper');
var dot = $('.dot span');
var len = innerwraper.length;
var width = innerwraper.eq(0).width();

function autoplay(){
	timer=setInterval(function(){
		index++;
		if(index==len){
			index=0;
		}
		changeImg(index);
	},1000);

	
}

//切换图片的主体函数
function changeImg(index){
	clearInterval(timer);
	dot.eq(index).addClass('active').siblings().removeClass('active');
	inner.stop().animate(
		{'left':-index*width},1000,autoplay);
	
}
//小圆点点击切换
dot.click(function(){
	 index = $(this).index();
	changeImg(index);
});


autoplay();//自动播放

问题①：当图片到最后一个，然后再切换回第一个的时候，轮播图的动画是向右滑动的，这样看起来很不衔接。

问题②，就是如上面的图，当窗口缩小后出现了图片空白的情况。

这2个问题，在我的这代码基础上该怎么去完善呢

写回答

1回答