3-4图片动不起来怎么回事

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="main" id="main">
        <!--图片轮播-->
        <div class="banner" id="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
        </div>
        <!--上一张，下一张按钮-->
        <a href="javascript:void(0)" class="button prev"></a>
        <a href="javascript:void(0)" class="button next"></a>
        <!--圆点导航-->
        <div class="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script type="script.js"></script>
</body>
</html>

100

101

*{
    margin: 0;
    padding: 0;
}
 
ul{
    list-style:none;
}
 
body{
    font-family: "微软雅黑";
    color:#14191e;
}
 
.main{
    width:1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}
 
.banner{
    width:1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}
 
.banner-slide{
    width:1200px;
    height: 460px;
    background-repeat: no-repeat;
    position:absolute;
    display: none;
}
 
.slide1{
    background-image: url("bg1.jpg");
}
 
.slide2{
    background-image: url("bg2.jpg");
}
 
.slide3{
    background-image: url("bg3.jpg");
}
 
.slide-active{
    display:  block;
}
 
.button{
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    top:50%;
    margin-top: -40px;
    background:url("arrow.png") no-repeat center center;
}
 
.next{
    left: auto;
    right: 0;
}
 
.prev{
    transform:rotate(180deg);
}
 
.button:hover{
    background-color: #333;
    opacity:0.1;
    filter:alpha(opacity=10);
}
 
.dots{
    position: absolute;
    right: 20px;
    bottom:24px;
    text-align: right;
}
 
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-left: 8px;
    line-height: 12px;
    cursor: pointer;
}
 
.dots span.active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background: #fff;
}

//封装一个代替document.getElementById()的方法
function byId(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}
 
//全局变量
var index=0,
    timer=null,
    pics=byId("banner").getElementsByTagName("div"),
    len=pics.length;
 
function slideImg(){
    var main=byId("main");
    //划过清除定时器，离开继续
    main.onmouseover=function(){
        //划过清楚定时器
    }
    main.onmouseout=function(){
        timer=setInterval(function(){
            index++;
            if (index>=len) {
                index=0;
            }
            //切换图片
            changeImg();
        },2000)
    }
}
 
 
//切换图片
function changeImg(){
    //遍历banner下都有的div，将其隐藏
    for(var i=0;i<len;i++){
        pics[i].style.display="none";
    }
    pics[index].style.display="block";
}

跟着老师写的，，哪儿错啦。

qq_陌_45 2017-12-12

源自：项目：JS实现轮播特效 3-4 图片自动轮播

收起

3回答

卡布琦诺 2017-12-12 18:19:32

function byId(id) { 
    // return typeof(id) === "string"?document.getElementById("id"):id;
    // id没有引号
    return typeof(id)==="string"?document.getElementById(id):id; 
}

要细心一些哦~另外，课程列表的右侧有课程的源码，你可以下载对比着进行学习，祝学习愉快~

收起回答

提问者 qq_陌_45 2017-12-12 17:22:09

//封装一个代替document.getElementById()的方法 function byId(id){ return typeof(id)==="string"?document.getElementById("id"):id; } //全局变量 var index=0, timer=null, pics=byId("banner").getElementsByTagName("div"), len=pics.length; function slideImg(){ var main=byId("main"); //划过清除定时器，离开继续 main.onmouseover=function(){ //划过清楚定时器 if(timer) clearInterval(timer); } main.onmouseout=function(){ timer=setInterval(function(){ index++; if (index>=len) { index=0; } //切换图片 changeImg(); },3000) } //自动在main上触发鼠标离开的事件 main.onmouseout(); } //切换图片 function changeImg(){ //遍历banner下都有的div，将其隐藏 for(var i=0;i<len;i++){ pics[i].style.display="none"; } //根据index索引找到当前div,将其显示出来 pics[index].style.display="block"; } slideImg();

加上了，也没动

收起回答

卡布琦诺 2017-12-12 17:12:19

在js代码的最后的地方缺少调用slideImg();，添加上即可，祝学习愉快~

收起回答

提问者 qq_陌_45 #1

//封装一个代替document.getElementById()的方法 function byId(id){ return typeof(id)==="string"?document.getElementById("id"):id; } //全局变量 var index=0, timer=null, pics=byId("banner").getElementsByTagName("div"), len=pics.length; function slideImg(){ var main=byId("main"); //划过清除定时器，离开继续 main.onmouseover=function(){ //划过清楚定时器 if(timer) clearInterval(timer); } main.onmouseout=function(){ timer=setInterval(function(){ index++; if (index>=len) { index=0; } //切换图片 changeImg(); },3000) } //自动在main上触发鼠标离开的事件 main.onmouseout(); } //切换图片 function changeImg(){ //遍历banner下都有的div，将其隐藏 for(var i=0;i<len;i++){ pics[i].style.display="none"; } //根据index索引找到当前div,将其显示出来 pics[index].style.display="block"; } slideImg(); 老师我加上了，也没动，怎么回事

2017-12-12 17:21:32