`
jimphei
  • 浏览: 40042 次
  • 性别: 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魅族官网导航加幻灯片代码.zip

    这个代码主要用于模仿魅族手机官网首页的设计,为用户提供一个具有动态效果的导航菜单和自动轮播的图片幻灯片。在网页设计和开发中,这种功能能够提升用户体验,吸引用户注意力,并使网站更具视觉吸引力。 jQuery是...

    jQuery+swiper.js幻灯片图片视差滚动轮播特效

    "jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术,它结合了jQuery库的便捷性和Swiper.js组件的强大功能,为用户提供了一种富有层次感和动态视觉效果的图片展示方式。 首先,我们来了解一下**...

    简单的使用jquery的轮播、图片幻灯片代码

    本篇文章将详细讲解如何利用jQuery实现一个简单的轮播图(carousel)和图片幻灯片(slider)效果。 一、jQuery基础 在开始之前,我们需要确保页面已经引入了jQuery库。这通常通过在HTML文件的`&lt;head&gt;`标签内添加...

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

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

    jQuery点击弹出窗口幻灯片图片切换代码

    本项目涉及的知识点是使用jQuery实现点击弹出窗口的幻灯片图片切换功能,这种功能通常用于图片展示,尤其适用于有限的空间下提供丰富的用户体验。 首先,`index.html`是网页的主文件,它包含了页面的基本结构,如...

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

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

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

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

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

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

Global site tag (gtag.js) - Google Analytics