老师，jquery无从下手，可能是对各种语法还不太熟悉，能否指点一下

！！HTML代码！！

<!DOCTYPE html>

<html>

<head>

<title>jQuery作业</title>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

！！CSS代码！！

margin:0;

padding：0；

}

ul{

list-style: none;

}

body{

font-family: '微软雅黑';

color:#14191e;

}

.main{

width:1200px;

height:460px;

margin:30px auto;

overflow:hidden;

border:10px solid #bbb;

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;

}

.slide-active{

display:block;

}

.slide1{

background-image:url("../img/1.jpg")

}

.slide2{

background-image:url("../img/2.jpg")

}

.slide3{

background-image:url("../img/3.jpg")

}

.slide4{

background-image:url("../img/4.jpg")

}

.slide5{

background-image:url("../img/5.jpg")

}

.button{

position: absolute;

width: 40px;

height:80px;

top:50%;

margin-top: -40px;

}

.button:hover{

background-color:#333;

opacity: 0.6;

filter:alpha(opacity=60);

}

.prev{

background: url(../img/pre2.png) no-repeat center center;

}

.next{

right:0;

background:url(../img/pre.png) no-repeat center center;

}

.dots{

position: absolute;

right:24px;

bottom:16px;

text-align: right;

}

.dots span{

display:inline-block;

width: 10px;

height:10px;

border-radius: 50%;

background:rgba(7,17,27,0.4);

margin-left:8px;

line-height: 12px;

box-shadow: 0 0 0 2px rgba(255,255,255,0.8);

margin-left:10px;

cursor: pointer;

}

.dots span.active{

box-shadow:0 0 0 2px rgba(7,17,27,0.4) ;

background:#fff;

}

!!jQuery!!

$(function(){

//鼠标离开每隔两秒切换一次图片

$("#main").setInterval(function({

}),2000)

//鼠标滑过清除定时器

$("#main").clearInterval();

})

远小远 2018-12-30

源自：jQuery插件 1-13 作业题

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-12-31 12:57:41

你好同学，可以按照如下思路尝试一下

图片轮播思路:

1.定义索引, 定时器变量 .

2.获取所有圆点 ,并且遍历 ,给圆点动态添加id .

3.封装图片轮播函数 , 当前图片显示 ,其他隐藏

4.封装定时器代码 ,并执行图片轮播函数(需要判断索引值情况) ,默认调用定时器

5.给点击上一张和下一张绑定点击事件 , 需要判断索引值情况 , 调用图片轮播函数

6.使用hover判断鼠标移入轮播图区时 ,定时器清除 . 移出时播放(调用定时器)

其实jQuery实现轮播图的思路与js实现的思路是一样的，只不过把js的语法写成jQuery的语法。如果同学还是不会写的话，建议同学先把之前课程中的图片轮播案例在复习一下，跟着老师的讲解，把案例敲一遍，弄懂了，就会有思路了。如果案例中哪里不懂，可以在问答区域提问，老师会根据你不懂的地方，有针对性的讲解，这样同学才会慢慢的提升自己的能力。加油！

祝学习愉快 !

(视频地址 : https://class.imooc.com/course/200)

收起回答

远小远提问者 #1

$(function(){ //给圆点绑定点击事件，点击对应圆点跳转到对应图片 $("#dots span").click(function(){ $(this).addClass("active").siblings().removeClass("active"); var index=$(this).index(); $("#banner div").eq(index).addClass("slide-active").siblings().removeClass("slide-active"); }) //给上一张，下一张按钮绑定点击事件 $("#button prev").click(function(){ var index=$("#banner div").index(); if(index<0){ index=4 }else if(index>4){ index=0 }; $("#banner div").eq(index-1).addClass("slide-active").siblings().removeClass("slide-active"); }) $("#button next").click(function(){ if(index<0){ index=4 }else if(index>4){ index=0}; $("#banner div").eq(index+1).addClass("slide-active").siblings().removeClass("slide-active"); }) //给图片增加定时器自动轮播 $("#main").mouseout(function(){ var timer=null; timer=setInterval(function({ }),2000) }) //鼠标滑过清除定时器 $("#main").mouseover(function(){ timer.clearInterval(); }) }) 老师我自己敲了一下代码，感觉就圆点切换勉强实现了（只能点一次，再点回来就没反应了），上下一张按钮没反应，然后定时器里面的代码实在是不会写

2018-12-31 15:28:43