基于JQuery的帅气逼人的带标题文字右侧选项卡幻灯片

基于JQuery的帅气逼人的带标题文字右侧选项卡幻灯片
 点击预览  点击下载
基于JQuery的帅气逼人的带标题文字右侧选项卡幻灯片是一款jquery焦点图或者成为JQuery幻灯片,左边图片,右边文字按钮,鼠标经过文字按钮淡入淡出切换。色调比较单一,适合比较简洁的网站.
首先载入
  1. <script type="text/javascript" src="js/jquery-1.7.2.js"></script> 
  2. <script type="text/javascript" src="js/jquery.SuperSlide.js"></script> 

HTML

  1. <div class="m-slide" style="margin:30px auto"> 
  2.     <ul class="img" style="position: relative; width: 490px; height: 200px;"> 
  3.         <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: list-item;"> 
  4.         <a href="#" target="_blank"><img src="images/1.jpg"></a></li> 
  5.         <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: none;"> 
  6.         <a href="#" target="_blank"><img src="images/2.jpg"></a></li> 
  7.         <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: none;"> 
  8.         <a href="#" target="_blank"><img src="images/3.jpg"></a></li> 
  9.         <li style="position: absolute; width: 490px; left: 0px; top: 0px; display: none;"> 
  10.         <a href="#" target="_blank"><img src="images/4.jpg"></a></li> 
  11.     </ul> 
  12.     <ul class="tab"> 
  13.         <li class="  on"><a href="#"><b></b> 
  14.         <span class="title">餐垫艺术 </span><span class="des">让餐桌色彩丰富起来 </span></a> 
  15.         </li> 
  16.         <li><a href="#"><b></b><span class="title">秋冬款连衣裙  
  17.         </span><span class="des">优雅的小女人味 </span></a></li> 
  18.         <li class=" "><a href="#"><b></b><span class="title"> 
  19.         秋冬围巾 </span><span class="des">温暖来袭 </span></a></li> 
  20.         <li class=" "><a href="#"><b></b><span class="title"> 
  21.         帅气军工装 </span><span class="des">时尚中性风 </span></a></li> 
  22.     </ul> 
  23.     <b class="bottom-shadow"></b> 
  24. </div> 

jquery

  1. <script type="text/javascript">jQuery(".m-slide").slide({ titCell:".tab li", mainCell:".img",effect:"fold", autoPlay:true});</script> 

转载请注明:代码家园 » 基于JQuery的帅气逼人的带标题文字右侧选项卡幻灯片

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)