最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery新闻相册切换

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-28 07:52浏览(1598)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery新闻相册切换
分类:图片代码 > 图片轮播 难易:高级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

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

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

<div class="Up-tuzu">
    <a class="outpic" href="http://www.erdangjiade.com" id="prevUrl"><span></span><img src="images/prev.jpg" /></a>
    <a class="inpic" href="http://www.erdangjiade.com">上一组</a><span class="prevspan"></span>
</div>
<div class="Next-tuzu">
    <a class="outpic" href="http://www.erdangjiade.com" id="nextUrl"><span></span><img src="images/next.jpg"></a>
    <a class="inpic" href="http://www.erdangjiade.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"
}];
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/134.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    01-02 08:29
    ngu137
    不错的功能,值得学习了
  • 头像 沙发
    10-20 09:21
    qq562140910
    图片不错
1 2