魔扣论坛

魔扣源码论坛业务
查看: 841|回复: 1

[织梦教程] 织梦dedecms用CSS做滑动效果的图片

[复制链接]
  • TA的每日心情

    22 小时前
  • 签到天数: 2951 天

    [LV.Master]开坛老将

    7万

    主题

    227

    回帖

    27万

    积分

    管理员

    Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30Rank: 30

    魔扣币
    745587
    贡献
    157871
    威望
    32799

    最佳新人活跃会员热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2020-6-2 00:17:34 | 显示全部楼层 |阅读模式
    魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x
    用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>

    会员购买:>> 点击购买 << | 魔扣币购买:>> 点击购买 <<
    承接业务:服务器代维丨网站托管丨SEO
    联系客服:微信:morko-net | QQ:1367681973

    该用户从未签到

    4

    主题

    256

    回帖

    517

    积分

    高级魔扣

    Rank: 4

    魔扣币
    257
    贡献
    257
    威望
    0
    发表于 2020-6-2 09:11:50 | 显示全部楼层
    太生气了,魔扣源码论坛太好了,无法HOLD住啦 >_<......
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    • 联系我们
    • 新浪微博 :
    • 在线客服 :魔扣科技 
    • 源码QQ群 :魔扣源码论坛官方总群
    • 联系邮箱 :charlin#morko.net
    • 微信扫一扫
    快速回复 返回顶部 返回列表