什么问题，都不显示

<!DOCTYPE html>

<html>

<head>

<title>jQuery轮播</title>

</head>

<body>

<div id="title"> jQuery实现轮播图</div>

</div>

</div>

</body>

</html>

*{margin:0px;padding:0px;font-family: "Microsoft YaHei";}

#title{text-align: center;margin-bottom: 50px;margin-top: 50px;}

#main{margin:0 auto;position:relative;width:1200px;border:5px solid #bbb;height: 460px;overflow: hidden;}

#con{margin:0 auto;width: 1200px;height:460px;overflow: hidden;}

.s{background-repeat: no-repeat;width: 1200px;height:460px;overflow: hidden;}

.s1{background-image: url("../img/1.jpg");}

.s2{background-image: url("../img/2.jpg");}

.s3{background-image: url("../img/3.jpg");}

.s4{background-image: url("../img/4.jpg");}

.s5{background-image: url("../img/5.jpg");}

.btn{position:absolute;width: 40px;height:80px;top:50%;margin-top:-40px;background:url("../img/pre2.png") no-repeat center center;}

.pre{left:auto;right:0px;background:url("../img/pre.png") no-repeat center center}

.btn:hover{background-color: #bbb;opacity: 0.8;filter: alpha(opacity=80);}

#dots{position:absolute;right: 0;bottom:20px;}

#dots span{margin-right:8px;width:15px;height:15px;border-radius: 50%;box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;background: rgba(7,17,27,0.4);display: inline-block;cursor: pointer;}

#dots span.active{background: #fff;box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;}

$(function(){
	var index=0,timer=null,main=$('#main'),span=$('span'),img=$('img'),len=img.length;

		//鼠标滑过时，清除定时器
		main.mouseover(
			function(){if(timer) clearInterval()}
			);

		//鼠标离开时，触发定时器
		main.mouseout(
			function(){
				timer=setInterval(function(){
					index++;
					if(index>len) index=0;
					cimg();
				}, 2000)
			}
			);

//打开页面激活离开事件
	main.mouseout();

//点击圆点切换图片
span.click(function(){
	span.removeClass('active');
	span.eq(index).addClass('active');
	cimg();
});

//点击左右切换图片
$('.pre2').click(function(){
	index--;
	if(index<0) index=len-1;
	cimg();
});
$('.pre').click(function(){
	index++;
	if(index>0) index=0;
	cimg();
});
//轮播
function cimg(){
img.css('display','none');
img.eq(index).css('display','block');
}

})

一只大懒喵 2018-05-24

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

收起

1回答

好帮手慕夭夭回答被采纳获得+3积分 2018-05-24 20:09:57

你好 ,建议根据如下思路调整一下:

图片轮播思路:

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

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

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

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

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

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

课程中有讲解到js图片轮播 , 和jquery实现的思路是一样的 .可以根据视频学习实战一下 .祝学习愉快 !

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

收起回答

一只大懒喵提问者 #1

非常感谢！

2018-05-26 01:24:25
一只大懒喵提问者 #2

改了js代码，还是什么都不反应，控制台也什么都没有，哪里的错误？ $(function(){ var index=0,timer=null,main=$('#main'),span=$('span'),img=$('img'),len=img.length; //鼠标滑过时，清除定时器 main.mouseover( function(){if(timer) clearInterval(timer)} ); //鼠标离开时，触发定时器 main.mouseout( function(){ timer=setInterval(function(){ index++; if(index>len) index=0; cimg(); }, 2000) } ); //打开页面激活离开事件 main.mouseout(); //点击圆点切换图片 for(var i=0;i<len;i++){ span.eq(i).id=i; span.click(function(){ index=this.id; cimg();} ) } //点击左右切换图片 $('.pre2').click(function(){ index--; if(index<0) index=len-1; cimg(); }); $('.pre').click(function(){ index++; if(index>0) index=0; cimg(); }); //轮播 function cimg(){ img.css('display','none'); img.eq(index).css('display','block'); } })

2018-05-26 01:52:20
喜欢做梦的鱼回复提问者一只大懒喵 #3

请同学新建回答，再贴上代码，你这么贴在回答里面，代码中还有注释，在辅助调试时会产生干扰。

2018-05-26 10:36:50