JQuery实现图片幻灯片效果

最新推荐文章于 2023-09-28 06:27:45 发布

原创最新推荐文章于 2023-09-28 06:27:45 发布 · 634 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #HTML #Go #ViewUI

前端技术专栏收录该内容

52 篇文章

订阅专栏

效果图：

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文件同目录下。