jQuery新闻相册切换

本文介绍一款新闻相册插件，可支持相册轮播，暂停，自动切换，查看原图，下载，键盘快速翻页及上一组和下一组等功能。

淘建站为您提供更多_图片代码_图片轮播_轮播_切换，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们放置多张缩略图：

<ul class="gallery_demo_unstyled">
    <li id="tu_1"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/1.jpg" /></a></li>
    <li id="tu_2"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/2.jpg"/></a></li>
    <li id="tu_3"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/3.jpg"/></a></li>
    <li id="tu_4"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/4.jpg"/></a></li>
    <li id="tu_5"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/5.jpg"/></a></li>
    <li id="tu_6"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/6.jpg"/></a></li>
    <li id="tu_7"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/7.jpg"/></a></li>
    <li id="tu_8"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/8.jpg"/></a></li>
    <li id="tu_9"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/9.jpg"/></a></li>
    <li id="tu_10"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/10.jpg"/></a></li>
</ul>

接着我们看下放置操作相册的按钮HTML

<div class="Pic-pageln">
    <span class="l">可用“<font>←</font>”或“<font>→</font>”方向键快速翻页</span>
    <span class="pic-r-span r">
        <a href="javascript:void(0);"  class="ico01" id="stop-on"><i class="ins1"></i>已暂停</a>
        <a id="showOriginal" target="_blank" href="images/bigPic/1.jpg" class="ico02"><i></i>查看原图</a>
        <a href="http://www.sucaiq.com" class="ico03"><i></i>下载</a><a href="" class="ico04"><i></i>分享</a>
        <a href="http://www.sucaiq.com" class="ico05"><i></i>返回图集</a>
    </span>
</div>

上一组和下一组代码。提示：当切换的缩略图在第一章时，键盘按左将跳转到上一组图片，即#prevUrl的url。同样下一组将跳转到#nextUrl的ulr

<div class="Up-tuzu">
    <a class="outpic" href="http://www.sucaiq.com" id="prevUrl"><span></span><img src="images/prev.jpg" /></a>
    <a class="inpic" href="http://www.sucaiq.com">上一组</a><span class="prevspan"></span>
</div>
<div class="Next-tuzu">
    <a class="outpic" href="http://www.sucaiq.com" id="nextUrl"><span></span><img src="images/next.jpg"></a>
    <a class="inpic" href="http://www.sucaiq.com">下一组</a><span class="nextspan"></span>
</div>

jQuery

上一组和下一组

$(function() {
    var prevDiv = $(".Up-tuzu");
    var nextDiv = $(".Next-tuzu");
    if (prevDiv.find("a").length < 1) {
        prevDiv.html("<p style='line-height:120px;color:#666;'><a href='' id='prevUrl'>没有了</a></p>");
    }
    if (nextDiv.find("a").length < 1) {
        nextDiv.html("<p style='line-height:120px;color:#666;'><a href='' id='nextUrl'>没有了</a></p>");
    }
});

定义轮播的图片，采用数组方式：

var picList = [{
    "picPos": 1,
    "pid": "1540637",
    "bigPic": "images/bigPic/1.jpg",
    "bigPic": "images/bigpic/1.jpg",
    "thumbPic": "images/thumbPic/1.jpg"
},
{
    "picPos": 2,
    "pid": "1520876",
    "bigPic": "images/bigPic/2.jpg",
    "bigPic": "images/bigPic/2.jpg",
    "thumbPic": "images/thumbPic/2.jpg"
},
{
    "picPos": 3,
    "pid": "1520550",
    "bigPic": "images/bigPic/3.jpg",
    "bigPic": "images/bigPic/3.jpg",
    "thumbPic": "images/thumbPic/3.jpg"
},
{
    "picPos": 4,
    "pid": "1520543",
    "bigPic": "images/bigPic/10.jpg",
    "bigPic": "images/bigPic/10.jpg",
    "thumbPic": "images/thumbPic/10.jpg"
}];