关于代码问题
来源：4-3 自动切换效果代码分析
慕雪1434180
2018-01-28 20:03:03
老师，我的代码如下，实在找不出哪里有问题，无法切换图片：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>移动端响应式小项目</title>
<link rel="stylesheet" href="CSS/index.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
</head>
<body>
<div>
<div>
<div>
<a href="#">北京</a>
<a href="#">
<input />
</a>
<a href="#">
<i class="fa fa-comment-o fa-lg"></i>
</a>
</div>
<div>
<!-- 轮播图 -->
<div class="inner clearfix">
<div><img src="img/banner1.jpg"/>
</div>
<div><img src="img/banner2.jpg"/>
</div>
<div><img src="img/banner3.jpg"/>
</div>
<div><img src="img/banner4.jpg"/>
</div>
<div><img src="img/banner1.jpg"/>
</div>
</div>
<!-- 四个圆点 -->
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div>
<div class="footericon iconactive">
<a>
<i class="fa fa-camera-retro fa-lg"></i>
</a>
我的
</div>
<div>
<a>
<i class="fa fa-camera fa-lg"></i>
</a>
相机
</div>
<div>
<a>
<i class="fa fa-calendar fa-lg"></i>
</a>
日历
</div>
<div>
<a>
<i class="fa fa-envelope-open fa-lg"></i>
</a>
信息
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script src="js/index1.js"></script>
</body>
</html>
index.css
*{
margin:0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
body{
font-family: "微软雅黑";
font-size: 14px;
}
.box{
max-width: 6.4rem;
margin:0 auto;
text-align: center;
}
.header{
display: flex;
height: 44px;
padding: 0 15px;
background:#ef1313;
align-items: center;
}
.header_address{
margin-right: 15px;
color: #fff;
font-size:
}
.header_form{
flex:1;
}
.header_form input{
width: 100%;
height: 28px;
border-radius: 8px;
box-sizing: border-box;
}
.header_message{
margin-left: 15px;
color:#fff;
}
/*banner*/
.banner{
overflow: hidden;
position: relative;
height: 2.6rem;
width: 6.4rem;
background:#666;
}
.inner{
position: relative;
width: 9999px;
left: 0;
top: 0;
}
.innerwraper{
width: 6.4rem;
float: left;
}
.innerwraper img{
width: 100%;
}
.pagination{
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.pagination span{
display: inline-block;
width: .15rem;
height: .15rem;
background: #9aa499;
border-radius: 50%;
cursor: pointer;
}
.pagination .active{
background-color: #fff;
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 54px;
display: flex;
border-top: 1px solid #ccc;
text-align: center;
font-size: 12px;
}
.footericon{
flex:1;
}
.icon_a{
display: block;
margin:8px 0;
}
.iconactive{
color:#c9394a;
}
index1.js
(function(doc,win){
var docE1=doc.documentElement;//返回文档的根节点
//判断兼容性
var resizeEvt='orientationchange' in window?'orientationchange':'resize';
//获取文档html的font-size大小，以确定后面rem的倍数
var recale=function(){
if (!docE1.clientWidth) return;
if (docE1.clientWidth>=640) {
docE1.style.fontSize='100px';
}else{
docE1.style.fontSize=100*(docE1.clientWidth/640)+'px';
}
}
//绑定浏览器宽度变化事件
//判断兼容性
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt,recale,false);
doc.addEventListener('DOMContent',recale,false);
recale();
})(document,window);
//jquery
var innerGroup=$('.innerwraper');
var spanGroup=$('.pagination span');
var _index=0;
var timer=null;
var imgWidth=$('innerwraper img:first-child').eq(0).width();
//点击切换
spanGroup.on('click',function(){
_index=spanGroup.index($(this));
selectPic(_index);
});
function selectPic(num){
clearInterval(timer);
$('.pagination span').eq(num).addClass('active').siblings().removeClass('active');
if (num%4==0) {
$('.pagination span').eq(0).addClass('active').siblings().removeClass('active');
}
$('.inner').stop().animate({left:-num*imgWidth,},1000,function(){
timer=setInterval(go,3000);
if (_index%=innerGroup.length-1) {
_index%=4;
$('.inner').css('left','0px');
}
});
}
function autoGo(){
timer=setInterval(go,3000);
}
autoGo();
function go(){
_index++;
selectPic(_index);
}
1回答
-
好帮手慕糖
2018-01-29
你好，html中有部分缺少类，不能确定问题。建议：粘贴代码的时候，选择下对应的代码语言，
祝学习愉快~
0
相似问题