文档章节

简单的jquery图片轮播渐变

卞龙亭
 卞龙亭
发布于 2016/06/29 10:01
字数 614
阅读 86
收藏 0
点赞 0
评论 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
杭州
程序员
mofum/mofumui-R0508

一款基于JQuery,Requare框架的建立起来的具有面向对象特性的便于灵活组织各个组件的UI框架。用极少的代码和语言去组织网页内容。它是一个以JS渲染界面为主的界面库,也就是使用它你可以尽量...

mofum ⋅ 05/22 ⋅ 0

jquery实现多模块切换轮播

说两句废话:对于一个小白痴来说,get这些知识真的是有点费劲,我还没学jquery,看了这对应的公开课后,自己敲了一天才整理好,希望总结后更上一层楼。 最后要完成的效果图: 效果图说明: ...

无忧you ⋅ 04/14 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

最近排查android webview https的发热耗电和加载速度慢问题解决

最近排查android webview https的发热耗电和加载速度慢问题 问题:H5页面发热耗电 排查:通过android studio profiler 查看CPU消耗曲线,发现静置情况下webview轮播图波浪式消耗CPU,且峰值高...

ljianbing ⋅ 05/28 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

一个女生对BootStrap的感情

首先说明一下,姐我不是很聪明,但是也做设计,也做前端,同时在移动互联网行业中也混了多年,感触颇多,打算开始记录一下脚步,希望对后来的小弟弟×××们有那么一点帮助,也算一件高兴的事...

BootStrap之路 ⋅ 04/25 ⋅ 0

纯 js 让浏览器不缓存 ajax 请求

开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态。 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为了保证每次轮询需要获取最...

ianyway ⋅ 06/14 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

面试-JVM 内存结构

JVM 内存结构

秋日芒草 ⋅ 7分钟前 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 30分钟前 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 今天 ⋅ 0

Spring JavaConfig 注解

JavaConfig注解允许开发者将Bean的定义和配置放在Java类中。它是除使用XML文件定义和配置Bean外的另一种方案。 配置: 如一个Bean如果在XML文件可以这样配置: <bean id="helloBean" class="...

霍淇滨 ⋅ 今天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 今天 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 今天 ⋅ 0

informix的常用SQL语句

1、创建数据库 eg1. 创建不记录日志的库testdb,参考语句如下: CREATE DATABASE testdb; eg2. 创建带缓冲式的记录日志的数据库testdb(SQL语句不一定在事务之中,拥有者名字不被用于对象的解...

wangxuwei ⋅ 今天 ⋅ 0

matplotlib画图

最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数。 from pylab import *from numpy import *x = linspace(0, 5, 10)y = x ** 2figure()plot(x, y, 'r')...

Dr_hu ⋅ 今天 ⋅ 0

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 今天 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部