Jquery 3屏顯示前后圖片預覽焦點圖滾動切換效果



125 496 166



特效描述:前后圖預覽焦點圖 滾動切換,Royalslider 支持滑動觸摸

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

2. HTML代碼

<style type="text/css">
	/* css 重置 */
	*{margin:0; padding:0; list-style:none; }
	body{ background:#fff; font:normal 12px/22px 宋體; width:100%; }
	img{ border:0;  }
	a{ text-decoration:none; color:#333;  }
	a:hover{ color:#1974A1;  }
	.slider{ width:630px;  height:338px; padding:0 130px;  margin:0 auto;  position:relative; overflow:hidden; background:#000;  }
	.slider .bd{ position:absolute; left:0; top:0; }
	.slider .bd li{ overflow:hidden; }
	.slider .bd li img{ display:block; width:630px; height:338px;    }
	.slider .tempWrap{ padding:0 130px !important; /* 強制遮罩層顯示2側各130px */   }
	.slider .bd ul{ margin-left:-630px !important;  }
	.slider .pnBtn{ position:absolute; top:0; width:130px; height:338px; cursor:pointer;   }
	.slider .prev{ left:0;  }
	.slider .next{ right:0; }
	.slider .pnBtn .blackBg{ display:block;  position:absolute; left:0; top:0; width:100%; height:338px; background:#000; filter:alpha(opacity=50);opacity:0.5;}
	.slider .pnBtn .arrow{ display:none; position:absolute; top:0; z-index:1; width:32px; height:338px; _filter:alpha(opacity=70); }
	.slider .prev .arrow{ left:0; background:url(images/left.png) 0 center no-repeat;   }
	.slider .next .arrow{ right:0; background:url(images/right.png) 0 center no-repeat;  }
</style>
<div class="slider">
  <div class="bd">
    <ul>
      <li><a target="_blank" href="http://www.dijiuzhanzhang.com"><img src="images/1.jpg" /></a></li>
      <li><a target="_blank" href="http://www.dijiuzhanzhang.com"><img src="images/2.jpg" /></a></li>
      <li><a target="_blank" href="http://www.dijiuzhanzhang.com"><img src="images/3.jpg" /></a></li>
      <li><a target="_blank" href="http://www.dijiuzhanzhang.com"><img src="images/4.jpg" /></a></li>
    </ul>
  </div>
  <div class="pnBtn prev"> <span class="blackBg"></span> <span class="arrow"></span> </div>
  <div class="pnBtn next"> <span class="blackBg"></span> <span class="arrow"></span> </div>
</div>
<script type="text/javascript">
/* 把最后一個放到第一個前面,然后通過外層ul{margin-left:-630px !important; }來顯示第一個 */
jQuery(".slider .bd li").first().before( jQuery(".slider .bd li").last() );
/* 控制左右按鈕顯示 */
jQuery(".slider .pnBtn").hover(function(){ jQuery(this).find(".arrow").show() },function(){ jQuery(this).find(".arrow").hide() });
/* 調用SuperSlide */
jQuery(".slider").slide({ mainCell:".bd ul", effect:"leftLoop",  autoPlay:true, vis:3, mouseOverStop:false });
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片滾動 圖片滾動條 自動滾動圖片輪播 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子