jquery 制作幻灯片浏览图片

chen106106

浏览: 407440 次
性别:
来自: 深圳

最近访客更多访客>>

linsonlmy

feiyue81

Kira_喵

kt-zhang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery学习笔记

jquery幻灯片的效果浏览图片的插件有很多，但那些插件有时候往往不是我们需要的，比如当添加了某个插件我们页面原来的布局就完全被破坏了，这时候当我们不需要很复杂的效果的时候，还不如自己手动写一个有类似效果的插件。

效果图如下：

这个demo实现了点击上面的向左、向右的按钮，下面的缩写图也跟着变化，当点击下面制定的某种小图的时候，可以找到对应的大图显示。但还没有实现点击下面的向右、向左按钮的时候上面的大图也滑动。

下面是主要的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="naxienian.css"/>
<script src="http://images.zhenai.com/ex/public/js/jquery-1.7.min.js"></script>
<script src="naxienian.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".change .pre").bind("click",preClick);
		$(".change .next").bind("click",nextClick);
		
		$("#gallery div ul li img").each(function(index, element) {
			
            $(this).bind("click",{index:index},handleThumbClick);
        });;
	});
	
	function preClick(){
		//先影藏所有的div类为image的元素，再显示下一幅图像
		  //获取当前显示的图片  
	   var firstImg = $('#gallery div.img:first');
	  var currImg = $("#gallery .show");  
				  if(currImg.index() == 0){
					  alert("已经是第一页了");
				  return;
				  }
				  
	  //获取下一幅要显示的图片和需要显示的标题栏的内容  
	  var preImg = (currImg.prev("div").length) ? currImg.prev():firstImg;
	   
	  
	  //让当前的图像以动画的形式影藏  
	  currImg.hide(); 
	  currImg.removeClass("show");
	  preImg.show();
	  preImg.addClass("show");
	  
	  //同时让底下的缩写图也向前移动
	  var prevOperator = $("#gallery .list .pre");
	  prevOperator.trigger("click");
	}
	
	function nextClick(){
		var currImg = $("#gallery .show");  
	//debugger;
	if(currImg.index() == currImg.parent().children().size()-3){
		alert("已经是最后一页了");
	}
	  //获取下一幅要显示的图片和需要显示的标题栏的内容  
	  var lastImg = $('#gallery div.img:last');
	  var nextImg = ((currImg.next().length) ? ((currImg.next().hasClass('change'))? lastImg :currImg.next()) : lastImg);    
	   
	  
	  //让当前的图像以动画的形式影藏  
	  currImg.hide(); 
	  currImg.removeClass("show");
	  nextImg.show();
	  nextImg.addClass("show");
	  
	  //同时让下面的缩写图向右移动
	  var nextOperator = $("#gallery .list .next");
	  nextOperator.trigger("click");
	}
	
	//处理缩写图被点击事件
	function handleThumbClick(event){
		//显示对应的大图
		var index = event.data.index;
		var originImg = $("#gallery div.img:eq("+index+")");
		
		var curImg = $("#gallery .show");
		console.log(index);	
		
		originImg.show();
		originImg.addClass("show");
		curImg.removeClass("show");
		curImg.hide();
	}
</script>
</head>
<body>

<!-- -->
<div class="c" id="gallery">

  <div class="img show" >
    <div> <span>&#8201;</span> <a><img src="images/1.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="img" style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/2.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/3.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/4.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/5.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/6.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/7.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/8.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/9.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/10.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/11.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  
   <div class="img"  style="display:none">
    <div> <span>&#8201;</span> <a><img src="images/12.jpg" /></a> <span>&#8201;</span> </div>
    <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p>
    <!-- -->
    <div class="shoucang">
      <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p>
    </div>
  </div>
  <div class="change"> <a class="pre">上一张</a> <a class="next">下一张</a> </div>
  
  <!-- -->
  <div class="list"> <a class="pre"></a> <a class="next"></a>
    <div>
      <ul>
        <li> <img src="images/thumbs/t1.jpg" /> <span>1/20</span> </li>
        <li> <img src="images/thumbs/t2.jpg" /> <span>2/20</span> </li>
        <li> <img src="images/thumbs/t3.jpg" /> <span>3/20</span> </li>
        <li> <img src="images/thumbs/t4.jpg" /> <span>4/20</span> </li>
        <li> <img src="images/thumbs/t5.jpg" /> <span>5/20</span> </li>
        <li> <img src="images/thumbs/t6.jpg" /> <span>6/20</span> </li>
        <li> <img src="images/thumbs/t7.jpg" /> <span>7/20</span> </li>
        <li> <img src="images/thumbs/t8.jpg" /> <span>8/20</span> </li>
        <li> <img src="images/thumbs/t9.jpg" /> <span>9/20</span> </li>
        <li> <img src="images/thumbs/t10.jpg" /> <span>10/20</span> </li>
        <li> <img src="images/thumbs/t11.jpg" /> <span>11/20</span> </li>
        <li> <img src="images/thumbs/t12.jpg" /> <span>12/20</span> </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

完整的代码可以下载附件：

这个demo用到的资源都是来自AD Gallery 1.2.7 demo里面，这个插件很强大（相对我的demo）。如果需要的人可以看看。

下面是效果图：