jQuery实现轮播图

 

目的：

1．掌握jQuery处理动画效果的方法；

2．掌握jQuery动画的显示与隐藏、淡入淡出、滑动效果的常用方法；

3．掌握jQuery自定义动画的定义。

 实现效果：

    1.实现广告图片的轮播展示效果，鼠标移入图片则停止轮播，鼠标移出图片则开始轮播。

    2.实现点击导航播放到相应的图片的效果：当点击前一张图片指示符号“<”时，显示当前图片的前一张图片；当点击后一张图片指示符号“>”时，显示当前图片的后一张图片。

   3.点击轮播图指示器时，展示对应的图片效果。

(1)创建一个名称为index.html的文件，在该文件的标记中应用下面的语句引入jQuery库。

(2)在页面的标记中，添加一个

标签，再使用标签和标签把图片元素展示到页面。代码如下：

		
		
		
		
		

	
	
		

			
			
			
			
			
			
			 < 
			 > 
			

						
1
						
2
						
3
						
4
						
5
						
6
			
		
	

(3)在项目里创建css文件夹，用于存放页面样式style.css文件。核心样式代码如下

#slideShow{
 width: 590px;
 height: 545px;
 background-color: #999999;
 text-align: center;
 left: 40%;
 margin-left: -135px;
 position: relative;
}
#slideShow .slide_pic{
 position: absolute;
 left: 0;
 top: 0;
}
img {
    width: 590px;
    height: 545px;
}
#slideShow .prev_one{
 position: absolute;
 left: 0;
 top: 45%;
}
#slideShow .next_one{
 position: absolute;
 right: 0;
 top: 45%;
}
#slideShow #mark_box{
 position: absolute;
 bottom: 0;
}
#mark_box .mark{
 width: 20px;
 height: 20px;
 border-radius: 20px;
 padding: 10px;
 text-align: center;
 line-height: 20px;
 background-color:beige;
 float: left;
 list-style: none;
 margin: 10px 22px;
 cursor: pointer;
}
#mark_box .active_img{
 background-color: pink;
}

(4)新建js文件夹，创建getCode.js文件，并编写jQuery代码，实现图片轮播展示和点击导航播放相应图片。具体代码如下：

$(function() {
	var prev_mark = 0; //点击上一张按钮时候的一个标志位
	var next_mark = 0; //点击下一张按钮时候的一个标志位
	var cur_pic = $('.slide_pic').length - 1; //当前图片的序号
	$('.prev_one').click(function() {
		prev_mark = cur_pic; //获取当前图片的序号
		if (prev_mark === 0) {
			prev_mark = $('.slide_pic').length - 1;
		} else {
			prev_mark--;
		}
		cur_pic = prev_mark;
		$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
		$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
	});
	$('.next_one').click(function() {
		next_mark = cur_pic;
		if (next_mark === $('.slide_pic').length - 1) {
			next_mark = 0;
		} else {
			next_mark++;
		}
		cur_pic = next_mark;
		$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
		$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
	});
	// 轮播图下面的指示点
	$.each($('.mark'), function(index, value) {
		$(value).click(function() {
			cur_pic = this.innerHTML - 1;
			$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
			$(this).addClass('active_img').siblings('.mark').removeClass('active_img');
		});
	});
	// 鼠标移入图片则停止轮播；鼠标移出图片则开始轮播
	var slide_timer = setInterval(auto_slide, 2000);
	$('#slideShow').mouseenter(function() {
		clearInterval(slide_timer);
	});
	$('#slideShow').mouseleave(function() {
		slide_timer = setInterval(auto_slide, 2000);
	});
	// 自动轮播函数
	function auto_slide() {
		if (cur_pic === $('.slide_pic').length - 1) {
			cur_pic = 0;
		} else {
			cur_pic++;
		}
		$('.slide_pic').eq(cur_pic).fadeIn(500).siblings('.slide_pic').fadeOut(500);
		$('.mark').eq(cur_pic).addClass('active_img').siblings('.mark').removeClass('active_img');
	}
});

(5)实现结果