最近在研究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();
分享到:
相关推荐
JavaScript图片幻灯片是一种在网页上展示图片轮播效果的技术,通常用于网站的首页或产品展示部分,以吸引用户注意力并提高用户体验。jQuery是JavaScript的一个库,它简化了DOM操作、事件处理和动画效果,因此在创建...
在网页设计中,jQuery图片幻灯片是一种常见且实用的元素,它能够为网站增添动态效果,提升用户体验。jQuery库的轻量级和强大的API使其成为实现这种功能的理想选择。本篇文章将深入探讨jQuery图片幻灯片的工作原理、...
"jQuery途牛首页定时幻灯片轮播效果"是一个典型的利用JavaScript库jQuery实现的动态展示功能,主要目标是模拟实际生活中幻灯片的切换,让用户在浏览网页时能享受到平滑、自动的图片或内容滚动体验。 首先,jQuery是...
本文将深入探讨如何使用名为"kevinSlide"的jQuery插件来实现图片幻灯片功能。 首先,kevinSlide插件是专为创建动态、引人入胜的图片滑动展示而设计的。这种类型的组件常用于网站的首页或产品展示区域,以吸引用户...
【jQuery实现图片幻灯片特效】是一种常见的网页动态效果,用于展示一组图片并自动轮换,为用户带来更丰富的视觉体验。在这个项目中,我们利用jQuery库的强大功能,结合HTML、CSS和JavaScript技术来创建一个自定义的...
**jQuery图片幻灯片展示**是一种常见的网页动态效果,它能够以吸引人的形式展示一系列图片,通常用于网站的首页或产品展示区。这种效果利用了JavaScript库jQuery的强大功能,为用户提供了一个平滑、交互式的浏览体验...
在网页设计中,幻灯片(Slider)是一种常用的设计元素,用于展示多张图片或内容,通常以动态效果呈现,增加用户体验。本篇将深入解析一个基于jQuery实现的仿途牛网站全屏幻灯片焦点图代码特效,该特效包含左右箭头和...
在创建自适应图片幻灯片时,jQuery提供了方便的API,如`slideUp()`, `slideDown()`, `fadeIn()`, `fadeOut()`等,用于实现平滑的图片切换效果。 2. 自适应设计:自适应网页设计(Responsive Web Design, RWD)是指...
jQuery幻灯片通常指的是使用jQuery库来实现的一种动态展示多张图片或内容的效果,用户可以通过自动播放、手动点击或滑动等方式进行切换。这种效果广泛应用于网站的首页、产品展示、图片相册等场景,为网页增添动态...
本教程将聚焦于一个常见且实用的功能:使用jQuery创建一个最简单的图片幻灯片,实现自动轮播效果,且不显示其他多余元素。 **一、jQuery简介** jQuery是由John Resig于2006年推出的一个JavaScript库,它的核心理念...
【jQuery宽屏文字动画图片幻灯片轮播代码】是一种网页设计中常见的动态展示技术,主要应用于网站的首页或者产品展示区域,以吸引用户的注意力并提供丰富的视觉体验。该技术结合了jQuery库的高效功能和现代网页设计的...
在本文中,我们将深入探讨如何使用jQuery来实现一个图像幻灯片效果,特别是上下滑动的图片切换功能。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作,使得创建交互式网页变得更加容易。...
"jQuery按钮控制图片全屏幻灯片"是一个典型的JavaScript特效,它巧妙地将jQuery库与图片展示相结合,为用户提供了一种类似于Flash动画的交互体验,但又避免了Flash的一些局限性,如浏览器兼容性和移动设备支持问题。...
本篇文章将围绕“jQuery宽屏文字动画图片幻灯片轮播代码”这一主题,深入解析其工作原理和实现方式。 首先,我们来看标题中的关键词——“宽屏文字动画”。在网页设计中,宽屏通常指的是适应大屏幕分辨率的设计,...
首先,这个代码实现的核心功能是图片幻灯片,它允许用户通过点击或自动滑动来浏览一系列的图片。幻灯片设计通常用于网站的首页,以吸引用户注意力并展示关键内容。在本案例中,它增加了标签导航,使得用户可以通过...
标题中的“jQuery带标题描述背景幻灯片代码”是指一种使用jQuery库实现的网页动态效果,它允许在网站上创建带有标题、描述和背景图片的幻灯片展示。这种功能通常用于首页轮播图或者产品展示,以吸引用户注意力并提供...
标题中的“jquery插件实现相片图片幻灯片浏览”是指使用jQuery库开发的一个用于展示照片的滑动浏览插件。这种插件通常用于网站上创建动态、吸引人的相册或者图片展示效果,使得用户可以方便地查看多张图片而无需手动...
总的来说,"Jquery淡入淡出幻灯片特效图片切换"源码是利用jQuery的动画特性,结合定时器实现的一种常见网页动态效果。这种效果不仅美观,还能提升网站的吸引力和用户体验。学习和理解这种代码,对于提升前端开发技能...
本篇文章将深入解析一个基于jQuery实现的三张图片一起滑动的幻灯片特效,探讨其核心技术和实现方式。 首先,这个特效的核心是jQuery库,jQuery是一个高效、简洁的JavaScript库,它的目标是使JavaScript编程变得更加...