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

最新推荐文章于 2024-11-14 10:50:47 发布

原创最新推荐文章于 2024-11-14 10:50:47 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #C #C++ #C# #ViewUI

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单图片轮播插件。该插件能够展示一系列带有链接和标题的图片，并通过定时自动切换或手动点击按钮进行轮播。

最近在研究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();