织梦cms用CSS做滑动效果的图片

先看下效果演示吧！（备注：由于做的匆忙，图片素材不是太好，所以效果要比想像中的差，感兴趣的朋友可以自己尝试）
用CSS做滑动效果的图片的代码如下（这样做好的好处是 避免了使用FLASH  降低网页体积 对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=" /static/upload/image/20231003/d4lprnr4jxk.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/ykibtonmkkh.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/an4tc4zdal2.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/cjxdoedqv3n.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"> <img src=" /static/upload/image/20231003/w3kjcctgvis.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>

本文标签：

声明：本文由代码号注册/游客用户【紫南】供稿发布，本站不对用户发布的织梦cms用CSS做滑动效果的图片信息内容原创度和真实性等负责。如内容侵犯您的版权或其他权益，请留言并加以说明。站长审查之后若情况属实会及时为您删除。同时遵循 CC 4.0 BY-SA 版权协议，尊重和保护作者的劳动成果，转载请标明出处链接和本声明内容。本文作者：紫南» /dmh/11284.html

很赞哦！ (0)