jQuery图片幻灯片大图切换特效代码下载


jQuery图片幻灯片大图切换特效代码下载
jQuery图片幻灯片大图切换特效代码下载以及图片幻灯片、大图切换等js/jquery网页特效代码下载。

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">sucai58 - www.sucai58.com</span><a href="https://www.51qianduan.com/">51前端</a>&nbsp;&nbsp;</p>
    <p class="picInfo">sucai58是一个致力于提供优质免费素材浏览与下载的交流和学习平台,网站专注于为各类用户提供PSD素材,矢量素材,图标素材,图片素材,字体素材等各类素材,旨在让每一位素材需求者都能够轻松找到自己想要的素材。<b><a href="https://www.51qianduan.com/">51前端</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>

相关推荐

发表评论

相关文章