图片轮播示例

最新推荐文章于 2022-05-30 18:46:02 发布

置顶 WGL吴先生

最新推荐文章于 2022-05-30 18:46:02 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/wgl_china/article/details/23755901

版权

好看的图片轮播示例
基于jQuery写的插件

(注：仿淘宝，图片是下载的，效果自己做的)

效果图：

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全屏图片切换</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/* flexslider */
.flexslider{position:relative;height:400px;overflow:hidden;background:url(img/loading.gif) 50% no-repeat;}
.slides{position:relative;z-index:1;}
.slides li{height:400px;position:absolute;z-index:1;width: 100%}
.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
.flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(img/dot.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}

.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
.flex-direction-nav li a.flex-prev{left:40px;background:url(img/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:40px;background:url(img/next.png) center center no-repeat;}
</style>
</head>

<body>

<div style="height:80px;overflow:hidden;"></div>

<div class="flexslider">
	<ul class="slides">
		<li style="background:url(img/img1.jpg) 50% 0 no-repeat;opacity: 1;z-index: 2;"></li>
		<li style="background:url(img/img2.jpg) 50% 0 no-repeat;"></li>
		<li style="background:url(img/img3.jpg) 50% 0 no-repeat;"></li>
		<li style="background:url(img/img4.jpg) 50% 0 no-repeat;"></li>
		<li style="background:url(img/img5.jpg) 50% 0 no-repeat;"></li>
	</ul>
	<ol class="flex-control-nav flex-control-paging">
		<li><a class="flex-active">1</a></li>
		<li><a class="">2</a></li>
		<li><a class="">3</a></li>
		<li><a class="">4</a></li>
		<li><a class="">5</a></li>
	</ol>
	<ul class="flex-direction-nav">
		<li><a class="flex-prev" href="javascript:;"></a></li>
		<li><a class="flex-next" href="javascript:;"></a></li>
	</ul>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/demo.js" ></script>

</body>
</html>

js/jquery-1.9.0.js 下载地址

js/demo.js

(function(){
var slider={
	lenght:$('.slides li').length,
	index:0,
	pre:$('.flex-direction-nav .flex-prev'),
	next:$('.flex-direction-nav .flex-next'),
	indexBar:$('.flex-control-nav li'),
	timer:null,
	changing:false,
	init:function(){
		this.pre.click(function(){
			if(slider.changing){
				return;
			}
			slider.pause();
			slider.preStep(slider.index);
		});
		this.next.click(function(){
			if(slider.changing){
				return;
			}
			slider.pause();
			slider.nextStep(slider.index);
		});
		this.indexBar.click(function(event){
			if(slider.changing){
				return;
			}
			slider.pause();
			slider.indexControl(slider.indexBar.index(this));
			event.preventDefault();
		});
		this.start();
	},
	start:function(){
		slider.setTimer(setInterval(function(){
			slider.nextStep(slider.index);
		},5000)) ;
	},
	setTimer:function(timer){
		if(timer){
			clearInterval(slider.timer);
			slider.timer = timer;
		}else{
			slider.timer = timer;
		}
	},
	pause:function(){
		if(slider.timer){
			clearInterval(slider.timer);
			setTimeout(function(){
				slider.start();
			},200);
		}
	},
	stop:function(){
		
	},
	indexControl:function(index){
		console.log(index);
		var cur = $('.slides li').eq(slider.index),
		preIndex = index,
		pre = $('.slides li').eq(preIndex);
		this.change(cur);
		this.change(pre,'active');
		slider.indexBar.siblings().eq(slider.index).find('a').removeClass('flex-active');
		slider.indexBar.siblings().eq(preIndex).find('a').addClass('flex-active');
		slider.index = preIndex;
	},
	preStep:function(index){
		console.log(index);
		var cur = $('.slides li').eq(index),
		preIndex = index==0 ? slider.lenght-1:index-1,
		pre = $('.slides li').eq(preIndex);
		this.change(cur);
		this.change(pre,'active');
		slider.index = preIndex;
		slider.indexBar.siblings().eq(index).find('a').removeClass('flex-active');
		slider.indexBar.siblings().eq(preIndex).find('a').addClass('flex-active');
	},
	nextStep:function(index){
		console.log(index);
		var cur = $('.slides li').eq(index),
		nextIndex = index==slider.lenght-1 ? 0:index+1,
		next = $('.slides li').eq(nextIndex);
		this.change(cur);
		this.change(next,'active');
		slider.index = nextIndex;
		slider.indexBar.siblings().eq(index).find('a').removeClass('flex-active');
		slider.indexBar.siblings().eq(nextIndex).find('a').addClass('flex-active');
	},
	change:function(o,type){
		if(type=='active'){
			slider.changing = true;
			var timer = setInterval(function(){
				var i = parseFloat(o.css('opacity'));
				console.log('a',i);
				if(i<1){
					o.css('opacity',i+0.2);
				}else{
					clearInterval(timer);
					o.css('z-index',2);
					o.css('opacity',1);
					slider.changing = false;
				}
			},150);
			
		}else{
			var timer = setInterval(function(){
				var i = parseFloat(o.css('opacity'));
				console.log('b',i);
				if(i>0.3){
					o.css('opacity',i-0.2);
				}else{
					clearInterval(timer);
					o.css('z-index',1);
					o.css('opacity',0);
				}
			},150);
		}
	}
};
slider.init();
})($)

img/img1.png: