我的js为什么绑定不上啊

<!DOCTYPE html>

<html>

<head>

initial-scale=1, maximum-scale=1, user-scalable=no">

<title>移动端案例小项目</title>

</head>

<body>

</div>

</div>

</div>

我的

</div>

相机

</div>

日历

</div>

我的

</div>

</body>

</html>

margin:0;

padding:0;

}

ul,li{

list-style:none;

}

text-decoration:none;

}

body{

font-size:14px;

}

.clearfix:after{

content:'';

display:block;

clear:both;

zoom:1;

width:0;

height:0;

}

.box{

width:6.4rem;

margin:0 auto;

}

.box .header{

display:flex;

height:44px;

background:#ef1313;

align-items:center;

padding:0 13px;

}

.box .header .header_form{

flex-grow:1;

}

.box .header .header_form input{

width:100%;

height:28px;

border-radius:8px;

border:none;

outline:none;

box-sizing:border-box;

}

.box .header .header_address{

color:#fff;

margin-right:15px;

}

.box .header .header_message{

color:#fff;

margin-left:15px;

}

.box .banner{

width:6.4rem;

height:2.6rem;

position:relative;

overflow:hidden;

background:#ccc;

}

.box .banner .inner{

width:9999px;

position:relative;

}

.box .banner .inner .inner-wrap{

width:6.4rem;

float:left;

}

.box .inner .inner-wrap img{

width:100%;

}

.box .pagination{

width:100%;

position:absolute;

bottom:5px;

text-align:center;

}

.box .pagination span{

display:inline-block;

width:.16rem;

height:.16rem;

border-radius:50%;

background:#9aa499;

cursor:pointer;

}

.box .pagination span.active{

background:#fff;

}

.footer{

width:100%;

height:54px;

position:fixed;

bottom:0px;

border-top:1px solid #ccc;

display:flex;

text-align:center;

font-size:12px;

}

.footer-icon{

flex-grow:1;

}

.icon-active{

color:#c9394a;

}

.footer-icon a{

display:block;

margin:8px 0;

}

(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);

//轮播图事件

var innerGroup=$('.inner .inner-wrap');

var spanGroup=$('.paginztion span');

var imgWidth=$('.inner-wrap img:first-child').eq(0).width();//这句为什么要加.eq(0).

var _index=0;

var timer=null;

//点击相应的圆点，切换至对应的图片。

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

//导航切换

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

console.log(_index);

selectImg(_index);

})

function autogo(){

timer=setInterval(go,3000);

}

function go(){

_index++;

selectImg(_index);

}

//封装一个切换图片的函数；

function selectImg(num){

clearInterval(timer);

//点击的小圆点背景色变成白色，其余的不变。

spanGroup.eq(num).addClass('active').siblings().removeClass('active');

//小圆点切换至最后的时候，再次切换，让第一个小圆点变白，周而复始。

if(num%4==0){

spanGroup.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=0；

_index %=4;

$('.inner').css('left','0px');

}

})

}

田马达加斯加 2018-09-08

源自：项目：移动端课程列表页 4-3 自动切换效果代码分析

收起

2回答

妮可妮可妮_ 2018-09-10 11:06:10

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width,

            initial-scale=1, maximum-scale=1, user-scalable=no">

<title>移动端案例小项目</title>

<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">

<style>
* {

margin: 0;

padding: 0;

}

ul,
        li {

list-style: none;

}

a {

text-decoration: none;

}

body {

font-size: 14px;

}

.clearfix:after {

content: '';

display: block;

clear: both;

zoom: 1;

width: 0;

height: 0;

}

.box {

width: 6.4rem;

margin: 0 auto;

}

.box .header {

display: flex;

height: 44px;

background: #ef1313;

align-items: center;

padding: 0 13px;

}

.box .header .header_form {

flex-grow: 1;

}

.box .header .header_form input {

width: 100%;

height: 28px;

border-radius: 8px;

border: none;

outline: none;

box-sizing: border-box;

}

.box .header .header_address {

color: #fff;

margin-right: 15px;

}

.box .header .header_message {

color: #fff;

margin-left: 15px;

}

.box .banner {

width: 6.4rem;

height: 2.6rem;

position: relative;

overflow: hidden;

background: #ccc;

}

.box .banner .inner {

width: 9999px;

position: relative;

}

.box .banner .inner .inner-wrap {

width: 6.4rem;

float: left;

}

.box .inner .inner-wrap img {

width: 100%;

}

.box .pagination {

width: 100%;

position: absolute;

bottom: 5px;

text-align: center;

}

.box .pagination span {

display: inline-block;

width: .16rem;

height: .16rem;

border-radius: 50%;

background: #9aa499;

cursor: pointer;

}

.box .pagination span.active {

background: #fff;

}

.footer {

width: 100%;

height: 54px;

position: fixed;

bottom: 0px;

border-top: 1px solid #ccc;

display: flex;

text-align: center;

font-size: 12px;

}

.footer-icon {

flex-grow: 1;

}

.icon-active {

color: #c9394a;

}

.footer-icon a {

display: block;

margin: 8px 0;

}
</style>



</head>

<body>

<div class="app">

<div class="box">

<div class="header">

<a href="#" class="header_address">北京</a>

<a href="#" class="header_form"><input/></a>

<a href="#" class="header_message"><i class="fa fa-comment-o fa-lg"></i></a>

</div>

<div class="banner">

<div class="inner clearfix">

<div class="inner-wrap"><img src="img/banner1.jpg" alt=""></div>

<div class="inner-wrap"><img src="img/banner2.jpg" alt=""></div>

<div class="inner-wrap"><img src="img/banner3.jpg" alt=""></div>

<div class="inner-wrap"><img src="img/banner4.jpg" alt=""></div>

<div class="inner-wrap"><img src="img/banner1.jpg" alt=""></div>

</div>

<div class="pagination">

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

<span class=""></span>

<span class=""></span>

<span class=""></span>

</div>

</div>

</div>

<div class="footer">

<div class="footer-icon icon-active">

<a class="icon_a"><i class="fa fa-camera-retro fa-lg"></i></a>

我的

</div>

<div class="footer-icon">

<a class="icon_a"><i class="fa fa-camera fa-lg"></i></a>

相机

</div>

<div class="footer-icon">

<a class="icon_a"><i class="fa fa-calendar fa-lg"></i></a>

日历

</div>

<div class="footer-icon">

<a class="icon_a"><i class="fa fa-envelope-open fa-lg"></i></a>

我的

</div>

</div>

</div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

(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);

//轮播图事件

var innerGroup = $('.inner .inner-wrap');

var spanGroup = $('.pagination span');

var imgWidth = $('.inner-wrap img:first-child').eq(0).width();//这句为什么要加.eq(0).

var _index = 0;

var timer = null;

//点击相应的圆点，切换至对应的图片。

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

//导航切换

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

console.log(_index);

selectImg(_index);

})

function autogo() {
//自动行走
timer = setInterval(go, 3000);

}
//调用自动播放
autogo();
function go() {

_index++;

selectImg(_index);

}



//封装一个切换图片的函数；

function selectImg(num) {

clearInterval(timer);

//点击的小圆点背景色变成白色，其余的不变。

spanGroup.eq(num).addClass('active').siblings().removeClass('active');

//小圆点切换至最后的时候，再次切换，让第一个小圆点变白，周而复始。

if (num % 4 == 0) {

spanGroup.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=0；

_index %= 4;

$('.inner').css('left', '0px');

}

})

}</script>

</body>

</html>

请同学仔细对照一下代码,测试是否可以实现效果,祝学习愉快`

收起回答

提问者田马达加斯加 #1

还是实现不了

2018-09-10 11:42:46
妮可妮可妮_ 回复提问者田马达加斯加 #2

请问同学是什么效果实现不了,控制台是否有报错,如果报错请将截图上传,以便更好地解决问题

2018-09-10 14:11:28
提问者田马达加斯加回复妮可妮可妮_ #3

控制台没有报错，轮播图没有反应，点击相应的小圆点图片也不能切换

2018-09-10 15:19:40