利用jQuery实现水平滑块拖动照片墙代码



32 126 43



特效描述:利用jQuery实现 水平滑块拖动 照片墙,利用jQuery实现水平滑块拖动照片墙代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" media="all" href="images/css/style.min.css" />

2. 引入JS

<script type='text/javascript' src='images/js/jquery.js'></script>
<script type='text/javascript' src='images/js/jquery.scripts.js'></script>
<script type='text/javascript' src='images/js/jquery.custom.js'></script>
<script type='text/javascript' src='images/js/mootools.js'></script>
<script type="text/javascript" src="images/js/duotive-slider-gallery.js"></script>

3. HTML代码

<div id="slideshow-wrapper">
    <div id="slideshow-pattern" class="subheader-pattern-dot"></div>
    <div id="slideshow-border-top">
        <div id="gallery-slider-wrapper">
            <div id="gallery-slider">
            <div id="slider-controls"><a href="javascript: void(0)" id="slider-control-left">left</a><a href="javascript: void(0)" id="slider-control-right">right</a></div>
                <div id="slider-images-wrapper">
                    <ul id="slider-main-ul">
<!-- 3dwall_001 begin -->
                        <li><ul><li class="type-3"><a class="image-icon" rel="gallery[modal]" title="html6game" href="images/001/001.jpg"><span><div class="icon"></div><strong>html6game 3dwall 001</strong>html53d墙,3d墙,3d立方体,3d图片墙,3d,3d wall,wall,三维,三维图片墙 - 51前端 - 专注于网页游戏,为程序员提供web开发教程,这里有最近的资讯和前沿的开发技术!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/001a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="PKMN:Magikarp" href="images/001/002.jpg"><span><div class="icon"></div><strong>PKMN:Magikarp</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/002a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 羊" href="images/001/003.jpg"><span><div class="icon"></div><strong>食品艺术 - 羊</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/003a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_001 end -->
<!-- 3dwall_002 begin -->
                        <li><ul><li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 茄子" href="images/001/004.jpg"><span><div class="icon"></div><strong>食品艺术 - 茄子</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/004a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 西瓜运动员" href="images/001/005.jpg"><span><div class="icon"></div><strong>食品艺术 - 西瓜运动员</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/005a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 蛋壳之家" href="images/001/006.jpg"><span><div class="icon"></div><strong>食品艺术 - 蛋壳之家</strong>如果你想步入一个鸡蛋,那么就来看看这个蛋壳房子。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/006a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 巴斯梨" href="images/001/007.jpg"><span><div class="icon"></div><strong>食物艺术 - 巴斯梨</strong>这是另一种创意,创作出的食品艺术与低音梨,创造一个美好的乐器。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/007a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_002 end -->
<!-- 3dwall_003 begin -->
                        <li><ul><li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 桔皮人" href="images/001/008.jpg"><span><div class="icon"></div><strong>食品艺术 - 桔皮人</strong>橙色和尝试创建这个橘皮的人,这可能需要一些时间才能掌握。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/008a.jpg" alt="请查看图片"></a></li>
                        <li class="type-3"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 可爱小羊" href="images/001/009.jpg"><span><div class="icon"></div><strong>食品艺术 - 可爱小羊</strong>此食品的艺术演示了可爱的小绵羊。<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/009a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_003 end -->
<!-- 3dwall_004 begin -->
                        <li><ul><li class="type-3"><a class="article-icon" title="51前端" href="http://html6game.com/"><span><div class="icon"></div><strong>html6game 3dwall 010</strong>html53d墙,3d墙,3d立方体,3d图片墙,3d,3d wall,wall,三维,三维图片墙 - 51前端 - HTML6GAME专注于网页游戏,为程序员提供web开发教程,这里有最近的资讯和前沿的开发技术!O(∩_∩)O ...<em class="more">阅读更多 &#187;</em></span><img height="298" width="318" src="images/001/010a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="金鱼食品艺术" href="images/001/011.jpg"><span><div class="icon"></div><strong>金鱼食品艺术</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/011a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="橙色最先进的食品展" href="images/001/012.jpg"><span><div class="icon"></div><strong>橙色最先进的食品展</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/012a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_004 end -->
<!-- 3dwall_005 begin -->
                        <li><ul><li class="type-1"><a class="article-icon" title="Oange最先进的食品展" href="http://html6game.com/"><span><div class="icon"></div><strong>Oange最先进的食品展</strong><em class="more">阅读更多 &#187;</em></span><img height="148" width="158" src="images/001/013a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="article-icon" title="食品艺术吗?艺术的引导?" href="http://html6game.com/"><span><div class="icon"></div><strong>食品艺术吗?艺术的引导?</strong><em class="more">阅读更多 &#187;</em></span><img height="148" width="158" src="images/001/014a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="article-icon" title="食品艺术 - 桔皮人" href="http://html6game.com/"><span><div class="icon"></div><strong>食品艺术 - 桔皮人</strong>橙色和尝试创建这个橘皮的人,这可能需要一些时间才能掌握。<em class="more">阅读更多 &#187;</em></span><img height="148" width="318" src="images/001/015a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 葱油小人" href="images/001/016.jpg"><span><div class="icon"></div><strong>食物艺术 - 葱油小人</strong>这种水果的艺术葱油在这样一个美丽的方式,真是非常有趣!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/016a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_005 end -->
<!-- 3dwall_006 begin -->
                        <li><ul><li class="type-2"><a class="article-icon" title="食品艺术 - 大钢琴三明治" href="http://html6game.com/"><span><div class="icon"></div><strong>食品艺术 - 大钢琴三明治</strong>创建的美丽和诱人的钢琴食物,看看应该味道不错!O(∩_∩)O ...<em class="more">阅读更多 &#187;</em></span><img height="148" width="318" src="images/001/017a.jpg" alt="请查看图片"></a></li>
                        <li class="type-3"><a class="article-icon" title="鬼饭团便当" href="http://html6game.com/"><span><div class="icon"></div><strong>鬼饭团便当</strong>艺术家已经用大米,橙,松苹果和其他可食用的物品,创造醒目的食品艺术,有趣的营养大餐!O(∩_∩)O ...<em class="more">阅读更多 &#187;</em></span><img height="298" width="318" src="images/001/018a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_006 end -->
<!-- 3dwall_007 begin -->
                        <li><ul><li class="type-3"><a class="image-icon" rel="gallery[modal]" title="生日男孩便当" href="images/001/019.jpg"><span><div class="icon"></div><strong>生日男孩便当</strong>今年的生日演示为您的孩子带来惊喜,使他或她的特殊日子里更特别的个人风格,过生日时,它是最适合您的孩子!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/019a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="土耳其一天的便当" href="images/001/020.jpg"><span><div class="icon"></div><strong>土耳其一天的便当</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/020a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="article-icon" title="第13届水灯节" href="http://html6game.com/"><span><div class="icon"></div><strong>第13届水灯节</strong><em class="more">阅读更多 &#187;</em></span><img height="148" width="158" src="images/001/021a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_007 end -->
<!-- 3dwall_008 begin -->
                        <li><ul><li class="type-1"><a class="image-icon" rel="gallery[modal]" title="一个鸡蛋吗?" href="images/001/022.jpg"><span><div class="icon"></div><strong>一个鸡蛋吗?</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/022a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="article-icon" title="面包超人便当" href="http://html6game.com/"><span><div class="icon"></div><strong>面包超人便当</strong><em class="more">阅读更多 &#187;</em></span><img height="148" width="158" src="images/001/023a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="article-icon" title="母狮便当" href="http://html6game.com/"><span><div class="icon"></div><strong>母狮便当</strong>让热爱冒险的孩子完成他们的早餐食品艺术,您将获得一天足够的营养和动力!O(∩_∩)O ...<em class="more">阅读更多 &#187;</em></span><img height="148" width="318" src="images/001/024a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="article-icon" title="粉红猪仔便当" href="http://html6game.com/"><span><div class="icon"></div><strong>粉红猪仔便当</strong>您可以寻找到这个粉红猪仔便当,看起来太可爱了,丰富美味而有营养!你不想吃?O(∩_∩)O ...<em class="more">阅读更多 &#187;</em></span><img height="148" width="318" src="images/001/025a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_008 end -->
<!-- 3dwall_009 begin -->
                        <li><ul><li class="type-2"><a class="image-icon" rel="gallery[modal]" title="甜品艺术" href="images/001/026.jpg"><span><div class="icon"></div><strong>甜品艺术</strong>一个整洁,简单的纯板,并开始装修的方式,你的客人从来没有想过。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/026a.jpg" alt="请查看图片"></a></li>
                        <li class="type-3"><a class="image-icon" rel="gallery[modal]" title="动物形硬煮鸡蛋" href="images/001/027.jpg"><span><div class="icon"></div><strong>动物形硬煮鸡蛋</strong>艺术与这种食物煮硬的鸡蛋,看起来绝对让人叹为观止。<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/027a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_009 end -->
<!-- 3dwall_010 begin -->
                        <li><ul><li class="type-3"><a class="article-icon" title="摄像头小鸡" href="http://html6game.com/"><span><div class="icon"></div><strong>摄像头小鸡</strong>同样,煮硬的鸡蛋被用来创建小鸡正在等待一个不错的点击。<em class="more">阅读更多 &#187;</em></span><img height="298" width="318" src="images/001/028a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="鳄鱼" href="images/001/029.jpg"><span><div class="icon"></div><strong>鳄鱼</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/029a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="桔子 - 可爱水果艺术" href="images/001/030.jpg"><span><div class="icon"></div><strong>桔子 - 可爱水果艺术</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/030a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_010 end -->
<!-- 3dwall_011 begin -->
                        <li><ul><li class="type-3"><a class="image-icon" rel="gallery[modal]" title="比萨斜塔" href="images/001/031.jpg"><span><div class="icon"></div><strong>比萨斜塔</strong>比萨斜塔(意大利语:Torre pendente di Pisa或Torre di Pisa)是意大利比萨城大教堂的独立式钟楼,于意大利托斯卡纳省比萨城北面的奇迹广场上。广场的大片草坪上散布着一组宗教建筑,它们是大教堂(建造于1063年—13世纪)、洗礼堂(建造于1153年—14世纪)、钟楼(即比萨斜塔)和墓园(建造于1174年),它们的外墙面均为乳白色大理石砌成,各自相对独立但又形成统一罗马式建筑风格。比萨斜塔位于比萨大教堂的后面。而这是个西瓜制作成的一个非常漂亮的演示,以极高精度创建的比萨斜塔,您相信么!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/031a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 颗粒" href="images/001/032.jpg"><span><div class="icon"></div><strong>食品艺术 - 颗粒</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/032a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 龙虲自行车" href="images/001/033.jpg"><span><div class="icon"></div><strong>食物艺术 - 龙虲自行车</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/033a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_011 end -->
<!-- 3dwall_012 begin -->
                        <li><ul><li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 孔雀" href="images/001/034.jpg"><span><div class="icon"></div><strong>食物艺术 - 孔雀</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/034a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品拼盘" href="images/001/035.jpg"><span><div class="icon"></div><strong>食品拼盘</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/035a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="松饼鼓" href="images/001/036.jpg"><span><div class="icon"></div><strong>松饼鼓</strong>松饼是用在这里创造一个美丽而真实的鼓组,来自意大利音乐艺术家的灵感展现!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/036a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="火影忍者饭团" href="images/001/037.jpg"><span><div class="icon"></div><strong>火影忍者饭团</strong>享受这个可爱而俏皮的食品艺术,创建是简单和容易地,糥米是非常高的营养价值套餐!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/037a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_012 end -->
<!-- 3dwall_013 begin -->
                        <li><ul><li class="type-2"><a class="article-icon" title="甜蜜的爱情" href="http://html6game.com/"><span><div class="icon"></div><strong>甜蜜的爱情</strong>一个很不错的情侣在雨天爱的示范!O(∩_∩)O ...<em class="more">阅读更多 &#187;</em></span><img height="148" width="318" src="images/001/038a.jpg" alt="请查看图片"></a></li>
                        <li class="type-3"><a class="article-icon" title="我们伤害了我们的晚餐" href="http://html6game.com/"><span><div class="icon"></div><strong>我们伤害了我们的晚餐</strong>这是实施食品艺术的真正有趣的概念,我只是喜欢它。(~O~)zZ ...<em class="more">阅读更多 &#187;</em></span><img height="298" width="318" src="images/001/039a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_013 end -->
                    </ul>
                </div>
            <div id="slider-bottom-controls"><a id="slider-scroll-left" href="javascript: void(0);" title="51前端">left</a><div id="slider-scroll"><div class="knob"></div></div><a id="slider-scroll-right" href="javascript: void(0);" title="51前端">right</a></div>
            </div>
        </div>                               
    <!-- end of slideshow border top -->
    </div>                  
<!-- end of slideshow wrapper -->
</div>
<script type="text/javascript" src="images/js/duotive-slider-gallery.js"></script> 
<script type="text/javascript">
    //首页banner图展示init
	window.addEvent("load", function(){
	var dtSlideshow = new dtSliderGallery({container: $("gallery-slider"),arrowControls: 1,description: 1,transitionDuration: 1000,transitionInterval: 15000});});
   /** 无限滚动
   function getTmplData() {
        jQuery.get("/web/idol/rest/" + jQuery('#pageNo').val() + "/0",
            function(data) {
                for (var i = 0; i < data.items.length; i++ ) {
                    jQuery('#idol_tmpl').tmpl(data.items[i]).appendTo('#main_container');
                }
                jQuery('#pageNo').val(parseInt(jQuery('#pageNo').val()) + 1);
       });
   }
    jQuery(window).bind("scroll",function() {
        // 然后判断窗口的滚动条是否接近页面底部
        if (jQuery(document).scrollTop() + jQuery(window).height() > jQuery(document).height() - 20) {
        	if (jQuery('#pageNo').val() < 3) {
        		getTmplData();
        	}
        }
    }) **/
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片翻转 图片旋转 图片淡出淡进 图片淡出 图片淡进 图片延迟加载 图片延迟 图片加载 图片拖动 图片拖拽 头像上传 图片上传 图片放大镜 二维码 图片叠加 图片层叠 图片全屏 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片广告 带缩略图的幻灯片 地图 中国地图 世界地图 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 纯图片轮播 图片轮播 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片收缩展开 图片收缩 图片展开 图片切换 图片选项卡 图标选项卡 图片滑动 图片滑块 图片滚动 图片滚动条 图标导航 图标菜单 自动滚动图片轮播 背景切换 大图切换 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 放大缩小 变大变小 放大 缩小 变大 变小 缩放 切换按钮 缩放切换 表单 表单美化 表单插件 表单美化插件 图表 图片 图片插件 头像截图 缩略图 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 图片滑动 图片滑块 图片墙 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到