jQuery新闻相册切换

来源:https://www.sucaihuo.com/js/134.html 2015-05-28 07:52浏览(1566) 收藏

本文介绍一款新闻相册插件,可支持相册轮播,暂停,自动切换,查看原图,下载,键盘快速翻页及上一组和下一组等功能。
jQuery新闻相册切换
分类:图片代码 > 图片轮播 难易:高级
查看演示 下载资源: 269 下载资源 下载积分: 20 积分

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.sucaihuo.com" class="ico03"><i></i>下载</a><a href="" class="ico04"><i></i>分享</a>
        <a href="http://www.sucaihuo.com" class="ico05"><i></i>返回图集</a>
    </span>
</div>

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

<div class="Up-tuzu">
    <a class="outpic" href="http://www.sucaihuo.com" id="prevUrl"><span></span><img src="images/prev.jpg" /></a>
    <a class="inpic" href="http://www.sucaihuo.com">上一组</a><span class="prevspan"></span>
</div>
<div class="Next-tuzu">
    <a class="outpic" href="http://www.sucaihuo.com" id="nextUrl"><span></span><img src="images/next.jpg"></a>
    <a class="inpic" href="http://www.sucaihuo.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"
}];
评论4
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 3楼
    11-20 10:14
    f***r
    图片好,美女好
  • 头像 板凳
    04-05 13:46
    1***9
    大气,图片好,美女好
  • 头像 椅子
    05-19 01:07
    w***5
    可支持相册轮播,暂停,自动切
  • 头像 沙发
    06-01 16:32
    哎***槽
    功能很强大
1 2