`
jimphei
  • 浏览: 39619 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

用jquery自制的一款图片幻灯片

阅读更多

最近在研究javascript,闲来无事,弄了个js的图片幻灯片,这里高人多多,在下就自讨没趣,献丑了

//定义结构
//url:图片地址,link:链接地址,time:间隔时间,target:链接方式
var picss=[
{url:'http://img08.taobaocdn.com/bao/uploaded/i8/T132JHXoNGXXb8_w73_050214.jpg',
link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTb0FvNGBTwZ3oxzBmdv8h%2B%2FprH6BJMj8qtqGgbLzAVvw28JzlzH3NjXPbRQcI2oLyrlk2c6j5gA%3D%3D&c=dcb7de581b878042fe64d499e3aa159a&p=mm_14565610_0_0&n=19&u=12032832',
time:3000,
title:'特价M157 换季清仓夏装女装淑女高腰碎花朵波西米亚雪纺连衣裙子',
target:'_blank'},

{url:'http://img07.taobaocdn.com/bao/uploaded/i7/T13JRGXflkXXaK0tLa_090547.jpg',
link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTaEmStlBP7HKjlN1GMl0awBs4Cf6smIhVyQzKnhjbW5xAzhxHRqZPmkho4Jg%2BkzwV5dY8V%2FHJdvM%3D&c=f4d6b28b84cc994ccf0c16fd0602cf7f&p=mm_14565610_0_0&n=19&u=12032832',
time:3000,
title:'冲皇冠~韩版日式米娜夏装新款淑女气质百搭雪纺中袖连衣裙子640',
target:'_blank'},

{url:'http://img02.taobaocdn.com/bao/uploaded/i2/T1T1xIXlXEXXXvHEs__111009.jpg',
link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTaEEbaPpRyPwAW8sFDS%2Bw0xsvs7AM0BsDmAi7XD9yWleguM7b3%2FLHnOorrY1%2BLl2OIedeOS8gTQ%3D%3D&c=5be3107fc12694693615ec2d3e861201&p=mm_14565610_0_0&n=19&u=12032832',
time:3000,
title:'赔本赚吆喝!雪纺连衣裙舒服的日本天丝面料带腰带有大码附实物图',
target:'_blank'},

{url:'http://img01.taobaocdn.com/bao/uploaded/i1/T1W9BHXk4SXXba1Mg4_052736.jpg',
link:'http://s.click.taobao.com/t_8?e=7HZ6jHSTbIKkXSg%2BywUJqXdrDFL%2FB74NdN%2B7H6IDG9SjiI%2FLfdVkiGMMhhIHLM9g44qaRhUDy9rAGg%3D%3D&c=7e7f82f848fa4dd200b27f60c9988965&p=mm_14565610_0_0&n=19&u=12032832',
time:3000,
title:'SS934#【五皇冠七十二变时尚屋】韩版2010夏装潮人短袖T恤',
target:'_blank'}
]
//构造函数
var Jsplayer=function(id,pics,w,h)
{
	this.id=id;
	this.pics=pics;
	this.width=w;
	this.height=h;
	this.index=0;
	this.preimg=null;
}

Jsplayer.prototype.createFlash=function(){
	var self=this;
	h=self.height;
	w=self.width;
	pics=self.pics;
	var player=$("#"+self.id);
	var images=[];//存储图片
	
	player.append("<div id='playercontent'></div>");
	player.css("height",h+"px").css("width",w+"px").css("border","1px solid #F27B04");
	//生成图片
	for(var i=0;i<this.pics.length;i++)
	{
		var imga=$("<a href='"+this.pics[i].link+"' title='"+this.pics[i].title+"' target='"+this.pics[i].target+"'></a>");
		img=$("<img src='"+this.pics[i].url+"' alt='"+this.pics[i].title+"'/>").css("width",w+"px").css("height",h+"px");
		imga.append(img).css("z-index",i).hide();
		images[i]=imga;
		$("#playercontent").append(imga);
	}
	//根据player层定位按钮区
	playeroffset=player.offset();
	player.append('<div id="picbtn" style="position:absolute;top:'+(playeroffset.top+h-25)+'px;left:'+(playeroffset.left+parseInt(3*w/4))+'px;width:'+parseInt(w/4)+'px;height:20px;z-index:10000;"></div>');
	//根据player层定位标题区  标题:按钮=3:1
		player.append('<div id="titles" style="position:absolute;top:'+(playeroffset.top+h-25)+'px;left:'+playeroffset.left+'px;width:'+parseInt(3*w/4)+'px;height:20px;z-index:10000;"></div>');
	$("#picbtn").append('<div id="picbtns" style="float:right; padding-right:1px;"></div>');
	//生成按钮
	for(i=0;i<this.pics.length;i++)
	{
		$("#picbtns").append('<span id="'+i+'" class="playera">&nbsp;'+(i+1)+'&nbsp;</span>&nbsp;');
	}
//	images[0].fadeIn("slow");
	self.preimg=images[0];//存储前一图片
	var timer=null;//即时器
	var prebtn=$("#picbtns #0");//存储前一按钮
	//点击事件
	$("#picbtns .playera").click(function(){
		id=this.id;
		prebtn.removeClass("playeraselected");
		prebtn=$(this).addClass("playeraselected");
		self.preimg.hide();
		images[id].fadeIn("slow");
		$("#titles").html(pics[id].title);
		self.preimg=images[id];
		clearTimeout(timer);
		
		timer=setTimeout(function(){
		nextid=parseInt(id)+1;
		if(nextid>images.length-1)
		{
			nextid=0;
		}
		$("#picbtns #"+nextid).click();
	},pics[id].time);
		
	});	
	$("#picbtns #0").click();
};


function getCurrentTimeSeconds(){
	var d=new Date();
	var hour=d.getHours();
	var minute=d.getMinutes();
	var seconds=d.getSeconds();
	return hour*60*60+minute*60+seconds;
}

aplayer=new Jsplayer("myplayer",picss,400,400);
aplayer.createFlash();

 

分享到:
评论

相关推荐

    js图片幻灯片 jquery幻灯片图片 html幻灯片案例

    JavaScript图片幻灯片是一种在网页上展示图片轮播效果的技术,通常用于网站的首页或产品展示部分,以吸引用户注意力并提高用户体验。jQuery是JavaScript的一个库,它简化了DOM操作、事件处理和动画效果,因此在创建...

    jquery图片幻灯片

    在网页设计中,jQuery图片幻灯片是一种常见且实用的元素,它能够为网站增添动态效果,提升用户体验。jQuery库的轻量级和强大的API使其成为实现这种功能的理想选择。本篇文章将深入探讨jQuery图片幻灯片的工作原理、...

    jQuery途牛首页定时幻灯片轮播效果

    "jQuery途牛首页定时幻灯片轮播效果"是一个典型的利用JavaScript库jQuery实现的动态展示功能,主要目标是模拟实际生活中幻灯片的切换,让用户在浏览网页时能享受到平滑、自动的图片或内容滚动体验。 首先,jQuery是...

    Jquery插件实现图片幻灯片功能

    本文将深入探讨如何使用名为"kevinSlide"的jQuery插件来实现图片幻灯片功能。 首先,kevinSlide插件是专为创建动态、引人入胜的图片滑动展示而设计的。这种类型的组件常用于网站的首页或产品展示区域,以吸引用户...

    原创Jquery实现图片幻灯片特效

    【jQuery实现图片幻灯片特效】是一种常见的网页动态效果,用于展示一组图片并自动轮换,为用户带来更丰富的视觉体验。在这个项目中,我们利用jQuery库的强大功能,结合HTML、CSS和JavaScript技术来创建一个自定义的...

    Jquery图片幻灯片展示

    **jQuery图片幻灯片展示**是一种常见的网页动态效果,它能够以吸引人的形式展示一系列图片,通常用于网站的首页或产品展示区。这种效果利用了JavaScript库jQuery的强大功能,为用户提供了一个平滑、交互式的浏览体验...

    jQuery仿途牛网站通栏幻灯片代码

    在网页设计中,幻灯片(Slider)是一种常用的设计元素,用于展示多张图片或内容,通常以动态效果呈现,增加用户体验。本篇将深入解析一个基于jQuery实现的仿途牛网站全屏幻灯片焦点图代码特效,该特效包含左右箭头和...

    jQuery自适应图片宽度幻灯片

    在创建自适应图片幻灯片时,jQuery提供了方便的API,如`slideUp()`, `slideDown()`, `fadeIn()`, `fadeOut()`等,用于实现平滑的图片切换效果。 2. 自适应设计:自适应网页设计(Responsive Web Design, RWD)是指...

    jQuery带缩略图预览幻灯片.zip

    jQuery幻灯片通常指的是使用jQuery库来实现的一种动态展示多张图片或内容的效果,用户可以通过自动播放、手动点击或滑动等方式进行切换。这种效果广泛应用于网站的首页、产品展示、图片相册等场景,为网页增添动态...

    最简单的jquery图片幻灯片

    本教程将聚焦于一个常见且实用的功能:使用jQuery创建一个最简单的图片幻灯片,实现自动轮播效果,且不显示其他多余元素。 **一、jQuery简介** jQuery是由John Resig于2006年推出的一个JavaScript库,它的核心理念...

    jQuery宽屏文字动画图片幻灯片轮播代码

    【jQuery宽屏文字动画图片幻灯片轮播代码】是一种网页设计中常见的动态展示技术,主要应用于网站的首页或者产品展示区域,以吸引用户的注意力并提供丰富的视觉体验。该技术结合了jQuery库的高效功能和现代网页设计的...

    jquery图像幻灯片上下滑动图片切换

    在本文中,我们将深入探讨如何使用jQuery来实现一个图像幻灯片效果,特别是上下滑动的图片切换功能。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作,使得创建交互式网页变得更加容易。...

    jQuery按钮控制图片全屏幻灯片.zip

    "jQuery按钮控制图片全屏幻灯片"是一个典型的JavaScript特效,它巧妙地将jQuery库与图片展示相结合,为用户提供了一种类似于Flash动画的交互体验,但又避免了Flash的一些局限性,如浏览器兼容性和移动设备支持问题。...

    jQuery宽屏文字动画图片幻灯片轮播代码.zip

    本篇文章将围绕“jQuery宽屏文字动画图片幻灯片轮播代码”这一主题,深入解析其工作原理和实现方式。 首先,我们来看标题中的关键词——“宽屏文字动画”。在网页设计中,宽屏通常指的是适应大屏幕分辨率的设计,...

    jQuery图片选中突出标签幻灯片代码.zip

    首先,这个代码实现的核心功能是图片幻灯片,它允许用户通过点击或自动滑动来浏览一系列的图片。幻灯片设计通常用于网站的首页,以吸引用户注意力并展示关键内容。在本案例中,它增加了标签导航,使得用户可以通过...

    jQuery带标题描述背景幻灯片代码

    标题中的“jQuery带标题描述背景幻灯片代码”是指一种使用jQuery库实现的网页动态效果,它允许在网站上创建带有标题、描述和背景图片的幻灯片展示。这种功能通常用于首页轮播图或者产品展示,以吸引用户注意力并提供...

    jquery插件实现相片图片幻灯片浏览

    标题中的“jquery插件实现相片图片幻灯片浏览”是指使用jQuery库开发的一个用于展示照片的滑动浏览插件。这种插件通常用于网站上创建动态、吸引人的相册或者图片展示效果,使得用户可以方便地查看多张图片而无需手动...

    Jquery淡入淡出幻灯片特效图片切换源码下载

    总的来说,"Jquery淡入淡出幻灯片特效图片切换"源码是利用jQuery的动画特性,结合定时器实现的一种常见网页动态效果。这种效果不仅美观,还能提升网站的吸引力和用户体验。学习和理解这种代码,对于提升前端开发技能...

    jQuery三张图片一起滑动幻灯片特效.zip

    本篇文章将深入解析一个基于jQuery实现的三张图片一起滑动的幻灯片特效,探讨其核心技术和实现方式。 首先,这个特效的核心是jQuery库,jQuery是一个高效、简洁的JavaScript库,它的目标是使JavaScript编程变得更加...

Global site tag (gtag.js) - Google Analytics