AB模板網:專注于dede模板,織夢源碼,織夢模板,網站模板下載,dedecms模板,網站源碼,dedecms教程以及各類手機網站模板和企業網站模板分享.

織夢模板

網站模板搜索
營銷型模板 政府網站模板 自適應模板 標簽大全

注冊

織夢dedecms用CSS做滑動效果的圖片

網站模板下載 www.hbjasic.com / 2020-06-01
用CSS做滑動效果的圖片的代碼如下(這樣做好的好處是 避免了使用FLASH  降低織夢dedecms網頁體積 對SEO優化 比較好 
缺點: 效果上和FLASH 沒發比):
<style> 
#galleryh {  
  padding:0;   
  margin:0 auto 5em auto;   
  list-style-type:none;   
  overflow:hidden;   
  width:495px;   
  height:240px;   
  border:1px solid #888;   
  background:#fff url(/imagelist/06/24/o9642o826u4n.gif);  
  }  
#galleryh li {  
  float:left;  
  }  
#galleryh li a {  
  display:block;   
  height:240px;  
  width:28px;   
  float:left;   
  text-decoration:none;   
  border-right:1px solid #fff;   
  cursor:default;  
  }  
#galleryh li a img {  
  width:28px;   
  height:240px;   
  border:0;  
  }  
#galleryh li a:hover {  
  background:#eee;   
  width:320px;  
  }  
#galleryh li a:hover img {  
  width:320px;  
  }  
</style> 
 
<ul id="galleryh"> 
<li><a href="#nogo"> 
<img src="http://www.zuimoban.com/uploads/allimg/c100602/12K4V3cT0-22A8_lit.jpg" alt="#1" title="#1" /></a></li> 
<li><a href="#nogo"> 
<img src="http://www.zuimoban.com/uploads/allimg/c100602/12K4V39C40-13258_lit.jpg" alt="#2" title="#2" /></a></li> 
<li><a href="#nogo"> 
<img src="http://www.zuimoban.com/uploads/allimg/c100602/12K4V3T10-1Y12_lit.jpg" alt="#3" title="#3" /></a></li> 
<li><a href="#nogo"> 
<img src="http://www.zuimoban.com/uploads/allimg/100602/21562L154-0-lp.jpg" alt="#4" title="#4" /></a></li> 
<li><a href="#nogo"> 
<img src="http://www.zuimoban.com/uploads/allimg/c100605/12KJ1150S0-15596_lit.jpg" alt="#5" title="#5" /></a></li> 
<li><a href="#nogo"> 
</ul>  
 
最后要在織夢模板中調用這個,請注意DEDE 縮略圖調用代碼為:
{dede:arclist row=10 titlelen=24 orderby=pubdate typeid=1 imgwidth='90' imgheight='90' type='all.'} 
      <li> [field:imglink/]
       </li>

 
本文由AB模板網整理發布,轉載請說明出處:http://www.hbjasic.com/dedecmsjc/6147.html
本文標簽:

有問題可以加入織夢技術QQ群一起交流學習

☉首先聲明,只要是我們的vip會員全站所有資源均可以免費下載,不做任何限制(了解更多)

☉本站的源碼不會像其它下載站一樣植入大量的廣告。

☉本站提供的織夢源碼,都是做好測試好發布的,均可放心使用。

☉本站提供的織夢源碼,均帶數據及演示地址。可以在任一源碼詳情頁查看演示地址。

☉為了vip利益的最大化,我們還提供了vip贈品(了解更多

☉如有其他問題,請加網站客服QQ(9490489)進行交流。

相關教程

織夢模板_隨機Tags

古典網站模板 攝影機構網站模板 H5網站模板 化肥網站模板 健身器材網站模板 律師網站模板 城市規劃網站模板 落地頁網站模板 投資網站模板 石英石網站模板 汽修網站模板 時尚資訊織夢模板網站模板

推薦教程

首頁 VIP專區 靜態模板 會員中心
青娱乐视频精品分类在线播放