最近在研究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"> '+(i+1)+' </span> ');
}
// 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幻灯片案例,官方以及本人的案例各有一个
简单的使用jquery的轮播、图片幻灯片代码。
jQuery途牛首页定时幻灯片轮播效果
此Jquery插件实现图片幻灯片功能 插件命名为kevinSlide,可以灵活设置8个参数,页面上可以多次调用都不起冲突,为了方便大家学习用,页面上自带了5个demo
图片幻灯片 js图片切换 图片切换特效 漂亮的图片切换效果
Jquery图片幻灯片展示,可以自动播放,鼠标放上去也会切换图片
该特效一款jQuery仿途牛官方网站的全屏幻灯片焦点图代码特效,带左右箭头跟索引图标切换,是一款非常简单方便实用的网站大图轮播js图片插件。
原创Jquery实现图片幻灯片特效,供大家一起共同分享学习。
jquery图像幻灯片上下滑动图片切换
jQuery+swiper.js幻灯片图片视差滚动轮播特效,非常棒的一款带标签的jQuery图片视差切换代码。
Query自适应图片宽度幻灯片,这是一款基于jQuery的自适应宽度幻灯片焦点图,滑动效果比较流畅。
最简单的jquery图片幻灯片 自动图片轮播,不显示其他任何额外东西
一款非常实用的jQuery点击弹出窗口展示带缩略图列表的幻灯片图片切换代码,这种图片展示方式不占网站布局空间,适当的时候可以用上。
jQuery魅族官网导航加幻灯片代码是一款仿魅族手机官网首页导航加轮播图片切换代码。
有Loading功能的Flash焦点图 开源flash+xml相册组件 7屏大banner广告代码 带缩略图上下滚动幻灯片 腾讯软件中心JS焦点图代码 淘宝商城多格jQuery焦点图 大麦网jquery焦点图代码
jQuery带缩略图预览幻灯片是一款带缩略图,索引按钮,滑动效果的jQuery幻灯片。
jquery 幻灯片 大全jquery 幻灯片 大全
jquery 图片轮播 图片幻灯片 图片导航 qq商城
jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换