利用jQuery实现178图库相册切换代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

166 662 221



特效描述:利用jQuery实现 178图库 相册切换。利用jQuery实现178图库相册切换代码

代码结构

1. 引入CSS

<link href="css/photo-scan.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ad-gallery.new.js"></script>

3. HTML代码

<script type="text/javascript">
	$(function() {
		var galleries = $('.ad-gallery').adGallery({
			width: 990, 
			height: '100%', 
			start_at_index: 0,
			left_img_container : false,
			mouse_cursor : {next: 'style="cursor: url(&quot;./images/img_next.cur&quot;), auto;"', prev: 'style="cursor: url(&quot;./images/img_pre.cur&quot;), auto;"'},
			jump : true,
			cycle: 8,
			loader_image: 'images/ajax-loader.gif',
			slideshow: {enable:false},
			effect: 'fade', // or 'slide-hori', 'slide-vert', 'resize', 'fade', 'none' or false
			callbacks: {
				beforeImageVisible: function(new_image, old_image) {
				}
			}
		});
	});
</script>
      <div class="photo-warp-inner ad-gallery" style="visibility: visible;" >
        <div class="img-title">
          <h2>剑网3四周年 178在现场之现场美腿纤腰MM</h2>
          <span class="r-area"><a href="#" title="查看全部图片">全部图片</a></span>
          </div>  
          <!--img-title end-->     
          <div class="mainArea ad-image-wrapper"></div>
          <!--mainArea end-->
          <div class="photo-info">
          <p class="tit"><span class="fr">51前端 - 51qianduan.com</span><a target="_blank" href="http://51qianduan.com">51前端</a>&nbsp;&nbsp;2014-01-15上传</p>
          <p class="picInfo">51前端是一个致力于提供优质素材浏览与下载的交流和学习平台,网站专注于为各类用户提供PSD素材,矢量素材,图标素材,图片素材,字体素材等各类素材,旨在让每一位素材需求者都能够轻松找到自己想要的素材。<b><a href="http://51qianduan.com">访问51前端 >></b></a></p>
          <p id="descriptions"></p>
        </div>
        <!--photo-info end -->        
        <div class="photoList-wrap cf" style=" height:120px;">
          <div class="nph_set_pre fl"><span><a href="#" class="prevSet"><img alt="更多图片" src="photo/prev.jpg"></a></span><p><a href="">< 上一图集</a></p></div>
          <div class="ad-nav" style="width:600px;display:inline;margin:0 10px;float:left;">
            <div bosszone="photoShowList" id="photo-List" class="photo-List ad-thumbs" style="width:528px;">
              <ul class="ad-thumb-list">
                <li><a href="photo/big1.jpg" rel="photo.big1.jpg"><img src="photo/1.jpg" class="image0" rel="1"/></a></li>
                <li><a href="photo/big2.jpg" rel="photo.big2.jpg"><img src="photo/2.jpg" class="image1" rel="2"/></a></li>
                <li><a href="photo/big3.jpg" rel="photo/big3.jpg"><img src="photo/3.jpg" class="image2" rel="3"/></a></li>
                <li><a href="photo/big4.jpg" rel="photo/big4.jpg"><img src="photo/4.jpg" class="image3" rel="4"/></a></li>
                <li><a href="photo/big5.jpg" rel="photo/big5.jpg"><img src="photo/5.jpg" class="image4" rel="5"/></a></li>
                <li><a href="photo/big6.jpg" rel="photo/big6.jpg"><img src="photo/6.jpg" class="image5" rel="6"/></a></li>
                <li><a href="photo/big7.jpg" rel="photo/big7.jpg"><img src="photo/7.jpg" class="image6" rel="7"/></a></li>
                <li><a href="photo/big8.jpg" rel="photo/big8.jpg"><img src="photo/8.jpg" class="image7" rel="8"/></a></li>
              </ul>
            </div>
          </div>
          <div class="nph_set_next fl"><span><a href="#" class="prevSet"><img alt="更多图片" src="photo/next.jpg"></a></span><p><a href="#">下一图集 ></a></p></div>
        </div>
        <div class="scrollbar-box">
          <div id="scrollbar" bossZone="photoShowBar" style=" width:528px" class="scrollbar"><a class="nph_btn_scrl scroolbar-handle" href="javascript:void(0)" onfocus="this.blur()" title="拖动工具条以快速查看图片" style="width:100px;"><b class="nph_btn_lt"></b><b class="nph_btn_rt"></b><span class="nph_btn_bd"><span><b class="nph_btn_ct"></b></span></span></a></div>
        </div>
      </div>
<div style="text-align:center;clear:both">
</div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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