文档章节

简单的jquery图片轮播渐变

卞龙亭
 卞龙亭
发布于 2016/06/29 10:01
字数 614
阅读 97
收藏 0

写的比较简单,样式没有直接封装在脚本里面,那样会显得比较累赘。

简单的界面和样式 : 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="fade_slider.js"></script>
	<title>Document</title>
	<style type="text/css">
	 .fade_slider{width: 400px;height: 200px;position: relative;overflow: hidden;}
	 .fade_slider .slider,.fade_slider .slider img{width: 100%;height: 100%;}
	 .fade_slider .bar{position: absolute;height:20px;width: 100%;bottom: 10px;text-align:center;}
	 .fade_slider .bar a{width: 15px;height: 15px;display: inline-block;background: #fff;border-radius: 100%;cursor: pointer;margin:0 3px;}
	 .fade_slider .bar a.active{background:#f00;}
	 .arrow{position: absolute;font-size: 40px;width:40px;height: 40px;margin-top:-20px;color: #000;line-height: 40px;text-align:center;cursor: pointer;
    top: 50%;}
	</style>
	<script type="text/javascript">
	$(function(){
		$(".fade_slider").slider({
		})
	})
	</script>
</head>
<body>
	<div class="fade_slider">
		<div class="slider">
			<img src="img/1.jpg">
		</div>
		<div class="slider">
			<img src="img/2.jpg">
		</div>
		<div class="slider">
			<img src="img/3.jpg">
		</div>
		<div class="slider">
			<img src="img/4.jpg">
		</div>
	</div>
</body>
</html>

设置了四个默认参数。slow : 默认渐变的速度(ms),time : 默认自动切换时间(ms),bar : 是否显示左右箭头。默认不显示。可根据需要把左右箭头替换成自己需要的箭头图片,toorbar : 底部栏是否显示,默认显示。这里只是简单的封装了下实现方法,可根据实际需要改成自己需要的样式。

脚本如下

/*
 * author bianlongting
 * email 1137060420@qq.com
 * date 2016/06/28 22:10
 * describe 轮播渐变图
 * [param] slow number 
 * [param] time number 
 * [param] bar boolean 
 * [param] toolbar boolean 
 */

;(function(){
	$.fn.extend({
		slider : function(opts){
			//默认值
			var defaults = {
				slow : 800,				//默认渐变速度800
				time : 4000,			//默认切换时间4000
				bar  : false,			//默认左右箭头不显示
				toolbar : true,			//默认显示底部栏
			};
			var opts = $.extend({}, defaults, opts);
			
			return this.each(function(){
				var o = opts;
				var parent = $(this);
				var timer = null;
				var index = 0;
				var oDiv = parent.find('.slider');
				var imgs = oDiv.find('img');
				var len = imgs.length;

				//判断是否需要底部栏
				if (o.toolbar) {
					var html = "";
					html += "<div class='bar'>";
					for (var i = 0; i < len; i++) {
						html += "<a></a>";
					};
					html += "</div>";
					parent.append(html);
					
					var bar = parent.find("a");
					bar.first().addClass('active');
					bar.on("mouseover",function(){
						index = $(this).index();
						changeImg(index);
					}).eq(0).mouseover();
				};
				
				parent.hover(function(){
					if (timer) {
						clearInterval(timer);
					};
				},function(){
					timer = setInterval(function(){
						changeImg(index);
						index++;
						if (index == len) {
							index = 0;
						};
					},o.time);
				}).trigger('mouseleave');

				//判断是否需要左右箭头
				if (o.bar) {
					parent.append("<span href='javascript:void(0);' id = 'prev' style = 'left : 0' class='arrow'>&lt;</span>\
                	           <span href='javascript:void(0);' id = 'next' style = 'right : 0' class='arrow'>&gt;</span>");
				
					//前一个
					$("#prev").on("click",function(){
						if (index == 0) {
							index = len - 1;
						}else{
							index --;
						}
						changeImg(index);
					});

					//下一个
					$("#next").on("click",function(){
						if (index == (len -1) ) {
							index = 0;
						}else{
							index ++;
						}
						changeImg(index);
					})
				};

				function changeImg(param){
					oDiv.eq(param).stop(true,true).fadeIn(o.slow)
						 		  .siblings(".slider").fadeOut(o.slow);
					if (o.toolbar) {
						bar.eq(param).addClass('active')
								 .siblings().removeClass('active');
					};
				}
			})

		}
	})
})(jQuery)

 

© 著作权归作者所有

共有 人打赏支持
卞龙亭
粉丝 0
博文 11
码字总数 3842
作品 0
杭州
程序员
私信 提问
jqeury轮播图插件 简单教程(适合新手)

下面的实例说明都只是我这几天下载后分析,而且我也是个新手,所以难免会有不少错误,这些都只是我个人的分享,希望有人能指出其中的错误,这样大家可以一起学习一起进步。 (实例的完整代码...

glowry
2014/02/23
0
4
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
制作简单jQuery插件实现图片轮播

这个图片轮播效果js是大名鼎鼎的林木木写得,原文在这里>>。要实现的效果也很明确:自动获取对象列表中第一个元素的宽度,然后列表整体向左平移,再把第一个元素绑定到列表最后去;可以再加个...

mickelfeng
2012/10/25
0
3
第06章节-Python3.5-插件轮播 5

第06章节-Python3.5-插件轮播(轮播图插件,不重复造轮子) 打开浏览器搜索bxslider或打开(https://bxslider.com/) 或打开bxslider中文翻译网(http://www.jq22.com/jquery-info7010) 或打开(ht...

阿啦卜
07/20
0
0
一个基于Jquery开发的幻灯片插件

一个基于Jquery开发的幻灯片插件,在页面上只要在一个特定的div容器内添加几个图片标签,既可以使图片产生轮播效果,简单易用! 该插件唯一有一个小小的瑕疵,就是每个页面只支持使用一次,每...

白清华
2011/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可自定义扩展底部列表对话框ListBottomSheetDialogFragment

因为需要,为了方便,构建了一个可以自定义扩展的底部列表对话框,可以应付大部分场景。 效果图如下: 1.默认实现: 2.自定义列表实现 3.自定义头部和列表实现 一.可实现功能 1.默认可实现通...

明月春秋
28分钟前
1
0
数据库---增删改查

增:insert into 表名(列名1,列名2) values(‘列值1’,‘列值2’) 多行数据处理:insert into 表名(列名1,列名2) select ‘列值1’,‘列值2’ union select ‘列值1.1’,‘列值2.2...

森林之下
29分钟前
2
0
分布式/集群下session共享方案汇总

除去那些对容器依赖特别高的方案(如: 基于Tomcat的memcached-session-manager / tomcat-redis-session-manager,基于Jetty的jetty-nosql-memcache / jetty-session-redis ),自己整理了下...

哥本哈根的小哥
55分钟前
2
0
Vue中的缩写:v-bind、v-on

v-bind 缩写:: 预期:any (with argument) | Object (without argument) 参数:attrOrProp (optional) 修饰符: .prop - 被用于绑定 DOM 属性。 .camel - (2.1.0+) 将 kebab-case 特性名转换......

文文1
今天
2
0
epoll中使用

1、一个线程epoll_wait时,另一个线程调用epoll_ctl是安全的。 2、使用edge触发,在socket有数据到来后,不收取数据,再次调用epoll_ctl将socket加入,仍会触发下一次动作。 asio用该方法来发...

gelare
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部