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> </span> <a><img src="images/1.jpg" /></a> <span> </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> </span> <a><img src="images/2.jpg" /></a> <span> </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> </span> <a><img src="images/3.jpg" /></a> <span> </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> </span> <a><img src="images/4.jpg" /></a> <span> </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> </span> <a><img src="images/5.jpg" /></a> <span> </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> </span> <a><img src="images/6.jpg" /></a> <span> </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> </span> <a><img src="images/7.jpg" /></a> <span> </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> </span> <a><img src="images/8.jpg" /></a> <span> </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> </span> <a><img src="images/9.jpg" /></a> <span> </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> </span> <a><img src="images/10.jpg" /></a> <span> </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> </span> <a><img src="images/11.jpg" /></a> <span> </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> </span> <a><img src="images/12.jpg" /></a> <span> </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)。如果需要的人可以看看。
下面是效果图: