`
DBear
  • 浏览: 231121 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

JQuery实现图片幻灯片效果

阅读更多

效果图:


 

 source code:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
li {list-style:none}
#picStore{display:none;}
.avs#picShow,.avs#picShow img{width:755px;height:388px;}
.avs{position:relative;overflow:hidden;margin:0px;}
.avs dt{position:absolute;}
.avs#picShow dt a{display:block;height:350px;width:760px;position:absolute;top:0px;z-index:5;line-height:417px;}
.avs#picShow dt a img{width:760px;height:300px;border:hidden;}
.avs dd{position:absolute;line-height:12px;height:23px;width:297px;bottom:0px;_bottom:-1px;}
.avs dd div{float:left;width:35px;height:14px;background:#324C6D;border:#CBCCCE 1px solid;text-align:center;font:10px Arial;padding-top:2px;margin-left:5px;cursor:pointer;color:#fff;}
.avs dd ul{float:left;width:200px;}
.avs dd ul li{width:14px;height:13px;line-height:10px;font:10px Arial;color:#fff;text-align:center;cursor:pointer;background:#324C6D;float:left;margin-left:4px;padding-top:1px;margin-top:3px;}
.avs dd ul li.show{background:#324C6D;width:17px;height:15px;margin-top:0px;padding-top:2px;border:#ccc 1px solid;font-size:12px;font-weight:bold;}
.aves td{padding:0px 3px;}
</style>
<script  type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

function slide_init(){
  function pic_slide(source, target, time){
    //取“stop”(“play”)标签
	var beg=$("#"+target+" dd div")[0];
    
	//时钟对象
	var tm;
	//绑定主导航标签click事件
	beg.onclick=function(){
	  if(beg.check){
		beg.check=false;
		clearInterval(tm);
		beg.innerHTML="PLAY";
	  }else{
		beg.check=true;
		clearInterval(tm);
	    xunhuan();
	    init();
	    beg.innerHTML="STOP";
	  }
	};

	//将标签置为选中
	beg.check=true;
	//取所有图片链接
	var pics=$("#"+source+" a");
	//取所有图片对象
	var bimgs=$("#"+source+" img");
	//初始化图片index
	var now=1;

	//创建新图片对象
	var vimg=new Image();
	//初始化为图片库首个对象
	vimg.src=bimgs[0].src;
	vimg.alt=bimgs[0].alt;

	//取图片显示区域的链接节点
	var ba=$("#"+target+" dt a")[0];
	ba.href=pics[0].href;
	ba.onfocus=function(){this.blur()};

    //在dt中追加新建图片对象
	var bt=$("#"+target+" dt")[0];
	bt.appendChild(vimg);
	var curImg=$(bt).find("img")[1];

    //取得图片导航控制区
	var nav =$("#"+target+" dd ul")[0];

	//根据图片数量生成导航项
	var len=pics.length;
	for(var i=0;i<len;i++){
		nav.innerHTML+="<li>"+(i+1)+"</li>";
	}

	//初始化第一项为“show”样式
	var nav_item=$(nav).children("li");
	nav_item[0].className="show";

	//定义导航项click绑定操作
	function pfn(i){
		nav_item[i].onclick=function(){
						   go(i);
						   if(beg.check){
							 clearInterval(tm);
							 init();
						   } else{
							 clearInterval(tm);
						   }
						}
    };

	//执行导航项绑定操作
	for(var i=0;i<len;i++){
		pfn(i);
	}


    //定义图片跳转操作
	function go(n){
	  clearInterval(tm);
	  now=n;
	  xunhuan();
	  init();
	};


	function xunhuan(){
	  if(/*@cc_on!@*/false){
	    curImg.style.filter="progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,motion=forward)";
		curImg.filters[0].Apply();
	    curImg.filters[0].Play(duration=1);
	  }

      //更新当前图片链接及图片src
	  ba.href=pics[now].href;
	  curImg.src=bimgs[now].src;
	  curImg.alt=bimgs[now].alt;

	  //更新导航控制选择项
	  for(var i=0;i<len;i++){
	    nav_item[i].className="";
	  }
	  nav_item[now].className="show";

	  //更新下次显示图片下标
	  (now<len-1)?now++:now=0;
	};


	function init(){
	  tm=setInterval(xunhuan,time);
	};
	

	init();
	
  };

  pic_slide("picStore","picShow",3000);
}
</script>
</HEAD>

<BODY>
<div clickname="stickthread_5_data" id="picStore">
<a href="http://www.yoka.com/fashion/starwear/2010/pic1122202684.shtml">
  <img alt="经典外套" src="http://img03.taobaocdn.com/tps/i3/T1SV0SXilCXXXXXXXX-770-300.jpg"/>
</a>
<a href="http://advlog10.yoka.com/ad-24315.html">
  <img src="http://img.alimama.cn/bcrm/adboard/picture/2010-11-22/101122110857581.jpg"/>
</a>
<a href="http://www.yoka.com/star/starwear/2010/pic1122202390.shtml">
  <img alt="黄奕街头范潮包加身" src="http://img03.taobaocdn.com/tps/i3/T1EHNSXfxXXXXXXXXX-770-300.jpg"/>
</a>
</div>

<dl class="avs" id="picShow">
  <dt>
    <a>
      <img src="http://images.yoka.com/pic/deco/2009/0318/a14.gif"/>
    </a>
  </dt>
  <dd>
    <div>STOP</div>
    <ul>
    </ul>
  </dd>
</dl>
<script type="text/javascript">
jQuery(document).ready(slide_init);
</script>
</BODY>
</HTML>
 

 

注意:执行前,请下载JQuery.js文件,放于此html文件同目录下。

 

  • 大小: 49.9 KB
分享到:
评论

相关推荐

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

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

    jquery 图片幻灯片效果

    有Loading功能的Flash焦点图 开源flash+xml相册组件 7屏大banner广告代码 带缩略图上下滚动幻灯片 腾讯软件中心JS焦点图代码 淘宝商城多格jQuery焦点图 大麦网jquery焦点图代码

    jquery图片幻灯片

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

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

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

    Jquery图片幻灯片展示

    在本篇文章中,我们将深入探讨如何使用jQuery实现图片幻灯片展示,并涉及其自动播放和鼠标悬停切换图片的功能。 首先,我们需要理解jQuery的基本用法。jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档...

    jQuery实现的幻灯片效果焦点图

    标题中的“jQuery实现的幻灯片效果焦点图”是指使用jQuery库来创建一种动态展示图片或内容的交互式用户界面元素,通常称为“幻灯片”或“焦点图”。这种效果允许用户通过自动轮播或者手动点击导航点来浏览一组图片或...

    Jquery图片轮播幻灯片效果实现左右滚动图片切换代码

    在网页设计中,jQuery 图片轮播幻灯片效果是一种常见的功能,用于展示一组图片或内容,通过动态的左右滚动来吸引用户注意力并提供良好的用户体验。这个效果的实现基于 jQuery JavaScript 库,它简化了 DOM 操作、...

    jquery实现png透明幻灯片效果.rar

    标题中的“jquery实现png透明幻灯片效果”指的是利用JavaScript库jQuery来创建一个具有PNG图片透明过渡效果的幻灯片展示。在网页设计中,幻灯片效果是一种常见的动态展示内容的方式,它允许用户在不手动翻页的情况下...

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

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

    jquery图片叠加幻灯片.rar

    "jQuery图片叠加幻灯片"是一种常见的网页动态效果,它利用JavaScript库jQuery实现图片的动态切换,通过叠加的方式呈现出平滑的过渡效果,为网站增添互动性和吸引力。本文将深入探讨这一技术的实现原理和应用。 首先...

    jquery 3d幻灯片效果免费下载

    "jQuery 3D幻灯片效果免费下载"是为开发者提供的一种利用jQuery实现的3D视觉体验的幻灯片插件。这个压缩包包含了用于创建独特、引人入胜的3D旋转幻灯片展示所需的所有资源。 首先,jQuery 3D幻灯片效果是一种高级的...

    jquery图片轮播幻灯片效果

    **jQuery图片轮播幻灯片效果详解** 在网页设计中,图片轮播幻灯片是一种常见且实用的元素,能够吸引用户注意力并展示多张图片或内容。本教程将深入探讨如何利用jQuery实现一个兼容IE8以上及火狐、360等主流浏览器的...

    modernizr html5 jquery 3D图片翻转幻灯片效果下载

    "Modernizr HTML5 jQuery 3D图片翻转幻灯片效果下载"是一个利用这些技术创建的资源,旨在帮助开发者实现动态且引人注目的图像展示功能。在本文中,我们将深入探讨Modernizr、HTML5和jQuery这三个关键组件,以及它们...

    腾讯jquery图片幻灯片效果代码

    总结,腾讯的jQuery图片幻灯片效果代码充分利用了jQuery的强大功能,提供了易于使用的幻灯片组件。通过理解并应用这些知识点,开发者可以轻松地在自己的项目中实现类似的动态图片展示效果,提升网站或应用的用户体验...

    jquery图片相册幻灯片带对话框提示鼠标点击一张张相册图片放大效果

    其次,幻灯片效果通常涉及到定时器和计数器,用于自动播放图片。可以设置一个定时器,每隔一段时间自动更换下一张图片。同时,为了提供用户控制,可以添加前后翻页按钮,使用`next`和`prev`方法来切换图片。 对话框...

    jQuery自适应图片宽度幻灯片

    这个技术利用了JavaScript库jQuery的强大功能,结合CSS样式和HTML结构,实现了图片在不同屏幕尺寸下自动调整宽度的幻灯片效果。以下是对这一技术的详细解释: 1. jQuery库:jQuery是一个轻量级的JavaScript库,它...

    jquery百叶窗幻灯片

    【jQuery百叶窗幻灯片】是一种常见的网页动态展示技术,它通过利用jQuery库和jQuery UI组件,为用户提供了一种独特且吸引人的图片或内容切换方式。这种效果模拟了百叶窗开启的过程,使得内容在切换时呈现出一种渐进...

    jquery实现banner效果图切换幻灯片效果

    标题中的“jquery实现banner效果图切换幻灯片效果”是指使用jQuery库来创建一个网页上的轮播图(也称为焦点图)功能。这个功能通常用于网站的首页,展示多个广告、图片或信息,以吸引用户的注意力并提供交互体验。...

    JQuery实现的功能最强大的幻灯片相册

    **jQuery 实现的功能最强大的幻灯片相册** 在网页设计中,动态的幻灯片相册已经成为一种不可或缺的元素,它能够以吸引人的形式展示大量图片或内容,提升用户体验。jQuery,作为一款广泛使用的JavaScript库,凭借其...

    jquery图片幻灯片切换样式实现

    在网页设计中,图片幻灯片是一种常见的交互元素,它能以动态的方式展示多张图片,为用户带来更丰富的视觉体验。"jQuery图片幻灯片切换...在实际项目中,可以根据需求进行定制,打造更加独特和吸引人的图片幻灯片效果。

Global site tag (gtag.js) - Google Analytics