4回答

小丸子爱吃菜

2017-11-21

因代码较多，还涉及图片，建议提交作业，可以将自己作业中出现的问题，建立一个文档写出来，老师能够下载完整的作业代码，并针对你的作业和问题给出建议！

祝学习愉快！

0

慕神2933655

提问者

2017-11-21

--------------------------------------css--------------------------------
*{margin: 0;padding: 0;border: 0;
}

a:link {
 text-decoration: none;
}

.top{
	height: 43px;
	background-color: #f3f5f7;

}
.wrap{
	width: 1200px;
	margin: 0 auto;
	position: relative;
	


}
.clearfix:after{ /*清除浮动*/
  content: " ";
  display: block;
  height: 0;
  line-height: 0;
  clear: both;
  zoom:1;
}

.top-right{
	margin-top: 10px;
	float: right;
}
.top-left{
	margin-top: 10px;
	float: left;
}
#logIn{
	color: red;
}

.logo{
	margin-top: 10px;
	float: left;
}
.search{
	margin-top: 15px;
	margin-left: 200px;
	width: 600px;
	height: 40px;
	float: left;
}


.car{
	float: left;
	margin-left: 20px;
	margin-top: 18px;
	background-color: red;
	
	height: 33px;
	width: 105px;

}
.car1{
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	margin-left: 4px;
}
.sm{
   color: white;
	font-size: 15px;
   background-color: black;
	text-align: center;
	float: left;
	width: 50px;
	height: 30px;
	line-height: 30px;
	margin-top: 20px;
	margin-left: 20px;
	
}
.header{
    background-color: #f3f5f7;
	height: 73px;


}
.car3{
	margin-top: -20px;
	float: right;
	margin-right: 4px;
}
.car2{
	margin-top: 10px;
}

.yitiao{
	width: 1800px;
	background-color: black;
	height: 30px;
	position: absolute;
	left: 0;




	
}
.yitiao-lide{
	color: white;
	width: 150px;
	height: 39px;
	margin-left: 260px;
	background-color: red;
	text-align: center;
	line-height: 30px;
	margin-top: -8px;
	display: inline-block;

}
.yitiao-lide-tupian{
	margin-right:25px;
	margin-top: 13px;

}
.link{
    font-size: 20px;
    color: white;
    margin-left: 80px;
 
   
	
  }
.box{
    width: 1200px;
    height: 450px;
    text-align: center;
    line-height: 50px;
    
}
  .banner{
    width: 1200px;
    height: 450px;
   
    margin-left: 200px;
    margin-top: 30px;
}
.prev{
    width: 50px;
    height: 100px;
    position: absolute;
    z-index: 2;
    margin-top: 390px;
    margin-left: 470px;
    top:-5px;
}

.prev:hover{
    background-color: gray;
    opacity: 0.5;
}

.next{
    width: 50px;
    height: 100px;
    position: absolute;
   
    z-index: 2;
    margin-top: 390px;
    top:-5px;
    margin-left: 1100px;
}

.next:hover{
    background-color: gray;
    opacity: 0.5;
}

.dots{
    width: 150px;
    height: 10px;
    position: absolute;
    margin-top: 30px;
    margin-left: 750px;
    z-index: 2;
}

.dot{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border:2px solid #fff;
    background-color: gray;
    float: left;
    margin:0 0 0 10px; 
}
.active-dot{
    border:2px solid gray;
    background-color: #fff;
}
.active-img{
    display: block;
}

.image1{
    width: 1200px;
    height: 450px;
     background: url('../images/1.png') no-repeat;
    position: absolute;
    margin-left: 240px;
    margin-top:7px;
    
}
.image2{
    width: 1200px;
    height: 450px;
    background: url('../images/2.jpg') no-repeat;
    position: absolute;
    display: none;
}

.image3{
    width: 1200px;
    height: 450px;
    background: url('../images/3.jpg') no-repeat;
    position: absolute;
    display: none;
}

.image4{
    width: 1200px;
    height: 450px;
    background: url('../images/4.jpg') no-repeat;
    position: absolute;
    display: none;
}

.image5{
    width: 1200px;
    height: 450px;
   background: url('../images/5.jpg') no-repeat; 
    position: absolute;
    display: none;
}

0

慕神2933655

提问者

2017-11-21

-------------------------------js--------------------------------------------


$(function(){
    //all variaties
    var index=0;
    var banner=$('.banner').children();
    var dots=$('.dots').children();
    var timer=null;
    var prev=$('.prev');
    var next=$('.next');
    
    //图片切换
    function changeImg(index){
        banner.eq(index).addClass('active-img').siblings().removeClass('active-img');
        dots.eq(index).addClass('active-dot').siblings().removeClass('active-dot');
    };


    // 鼠标离开区域，先清除一下定时器，然后开始轮播
    $('.banner').mouseout(function(){
          clearInterval(timer);
          
        timer = setInterval(function(){
            index++;
            if(index>=banner.length){
                index=0;
            }
               
            changeImg(index);
        },1000);
    });

   //这一行代码用于一打开网页，就是实现播放效果
    $('.banner').mouseout();

   
    

    // 鼠标停留，停止轮播
          $('.box').mouseover(function(){
             clearInterval(timer);
          });

    // 点击点状图标，切换图片
    dots.click(function(){
        index=$(event.target).index();
        changeImg(index);
    })

    //点击前一张，切换图片
    prev.click(function(){
        index--;
        if(index<0){
            index=0
        }
        changeImg(index);
    })

    //点击下一张，切换图片
    next.click(function(){
        index++;
        if(index>=banner.length){
            index=0;
        }
        changeImg(index);
    })

})

0

慕神2933655

提问者

2017-11-21

不知道怎么回事，不会轮播，点却会跳动

0