文档章节

简单的jquery图片轮播渐变

卞龙亭
 卞龙亭
发布于 2016/06/29 10:01
字数 614
阅读 102
收藏 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
6 个效果震撼的 jQuery 图片播放器

很多时候,尤其是当我们需要展示或者宣传自己的产品时,我们都会用到图片轮播的特效,但是,选择什么样的图片播放器更实用、更美观、更大气呢?下面就给大家推荐几款简单实用却又美观大气的j...

tp_wire
2012/07/04
6.3K
10
7 个简单实用的 jQuery 图片播放器

在网页特效中,我们经常会遇到需要循环播放图片的情况,比如首页上的广告轮播或者相册浏览等。如何简单的实现一款漂亮平滑的图片播放插件呢?下面就介绍几款非常不错的jQuery图片播放插件,希...

tp_wire
2012/08/14
7.3K
5
2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina
2014/01/11
12.9K
24
20 个响应式 web 设计的必备 jQuery 插件

日期:2012-9-12 来源:GBin1.com 响应式设计(responsive design)在近些年是非常流行的web设计,能够帮助你有效的针对不同设备的显示屏幕自适应的显示内容,大大的提高了用户的使用体验和web...

gbin1
2012/09/12
3.8K
4

没有更多内容

加载失败,请刷新页面

加载更多

Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
49分钟前
0
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
3
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
6
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxCool
今天
4
0
携程Apollo统一配置中心的搭建和使用(java)

一.Apollo配置中心介绍 1、What is Apollo 1.1 Apollo简介 Apollo(阿波罗)是携程框架部门研发的开源配置管理中心,能够集中化管理应用不同环境、不同集群的配置,配置修改后能够实时推送到...

morpheusWB
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部