文档章节

简单的jquery图片轮播渐变

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

精选30+云产品,助力企业轻松上云!>>>

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

简单的界面和样式 : 

<!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
633
4
jQuey实现轮播图效果

再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果:     1. 3s自动切换图片,图片切换时提示点跟随切...

osc_vsbo2lb1
2018/10/13
1
0
整理一些Thinkphp开发的实用的一些系统源码

版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/79200742 100个整理一些Thinkphp开发的实用的一些系统源码 http://www.erdangjiade.com/source PHP+Mysql仿...

红薯大表哥-二当家的
2019/04/10
5
0
整理一些Thinkphp开发的实用的一些系统源码

版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/79200742 100个整理一些Thinkphp开发的实用的一些系统源码 http://www.erdangjiade.com/source PHP+Mysql仿...

红薯大表哥-二当家的
2019/04/10
2
0
整理一些Thinkphp开发的实用的一些系统源码

版权声明:转载请注明原创地址 https://blog.csdn.net/u013032788/article/details/79200742 100个整理一些Thinkphp开发的实用的一些系统源码 http://www.erdangjiade.com/source PHP+Mysql仿...

红薯大表哥-二当家的
2019/04/10
2
0

没有更多内容

加载失败,请刷新页面

加载更多

FusionConputer热迁移过程记录

一、迁移原因   云平台集群内存资源不足,已超过设定阈值,内存资源已紧急告警。 二、解决思路   启用新集群,并将老集群中部分虚拟机热迁移至新集群 三、迁移的前提条件   1.被迁移虚...

osc_flwkfqx5
14分钟前
0
0
使用 ServerLess 实现云原生

笔者有幸经历了 IaaS(OS)、CaaS(Container),在这两年又听到了 FaaS(Funtion),这也是运维开发领域里的第三个阶段了吧,今天我将从一个不懂得开发的系统工程师视角以及结合之前的几篇系...

osc_t59f3rc0
15分钟前
10
0
作为软件测试的前辈你能不能给迷茫中的我一点建议?

一、为什么迷茫? 假如前面迷雾一片,作为司机的你,敢踩油门往前冲吗? 大多数人是不敢的。 因为你看不清自己的位置和发展的方向。 同理,一切对未来的恐慌、畏惧、纠结、迷茫,也是因为你看...

osc_auwur47t
17分钟前
6
0
神经机器翻译的直观解释

作者|Renu Khandelwal 编译|VK 来源|Towards Data Science 什么是神经机器翻译? 神经机器翻译是一种将一种语言翻译成另一种语言的技术。一个例子是把英语转换成印地语。让我们想想,如果你在...

osc_u61lmlkv
18分钟前
0
0
用Tableau实现动画数据可视化

作者|PRANAV DAR 编译|VK 来源|Analytics Vidhya 概述 动画可视化是一种艺术,它很容易在Tableau中创造出来 我们将在这里使用开源数据集,并在Tableau中创建自己的动画可视化 介绍 我是动画视...

osc_1oqjcug0
19分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部