建站素材 左右滚动图片JS,手动任意左右切换JS

[复制链接]
ARCHY明星会员实名认证 发表于 2012-9-14 01:04:53 [建站素材] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
这几天再做一个地方门户模板,看见湖北网的一个JS还不错就扒下来和大家分享下。

切换演示截图

切换演示截图


html代码如下:
  1. <div class="view-hover">
  2. <div class="mfscleftbnt"><a href="javascript:void(0);" id="goL"><img src="leftt.jpg"></a></div>
  3. <div id="shichi" class="mfsc">
  4. <ul>
  5. <li><a href="#" target="_blank"><img src="1.jpg" width="173" height="100"></a></li>
  6. <li><a href="#" target="_blank"><img src="2.jpg" width="173" height="100"></a></li>
  7. </ul>
  8. </div>
  9. <div class="mfsrightbnt"><a href="javascript:void(0);" id="goR"><img src="rightt.jpg"></a></div>
  10. </div>
  11. <script type="text/javascript" src="jquery.js"></script>
  12. <script type="text/javascript" src="kxbdSuperMarquee.js"></script>
  13. <script type="text/javascript">
  14.                 $(function(){//一次滚动一屏
  15.                 $('#shichi').kxbdSuperMarquee({
  16.                 distance:173,
  17.                 time:3,
  18.                 btnGo:{left:'#goL',right:'#goR'},
  19.                 direction:'left'
  20.         });
  21. });
  22.         </script>
复制代码
CSS代码:
  1. .mfscleftbnt, .mfsrightbnt {
  2. float: left;
  3. width: 15px;
  4. height: 106px;
  5. }
  6. .mfscleftbnt a, .mfsrightbnt a {
  7. width: 15px;
  8. height: 106px;
  9. display: block;
  10. }
  11. .mfsc {
  12. float: left;
  13. width: 143px;
  14. height: 106px;
  15. overflow: hidden;
  16. margin: 0 7px;
  17. _display: inline;
  18. }
  19. .mfsc ul li {
  20. float: left;
  21. padding: 0;
  22. width: 143px;
  23. }
  24. .mfsc ul li img {
  25. display: block;
  26. }
复制代码
需要的图片素材

材料.rar (30.89 KB, 下载次数: 1, 售价: 5 元宝)




上一篇:第四章 CSS 边框border与边界padding和margin
下一篇:站帮网大讲堂第八期 Discuz防灌水策略技巧

大神点评5

坏小子 发表于 2012-9-26 09:53:27 [建站素材] 显示全部楼层
先看看怎么样!  
我不服 发表于 2012-9-26 09:53:27 [建站素材] 显示全部楼层
围观来了哦才  
百度娘 发表于 2012-9-26 09:53:27 [建站素材] 显示全部楼层
都是那么过来的,支持哈  
201498 发表于 2014-12-15 10:29:43 [建站素材] 显示全部楼层
都是那么过来的,支持哈  
201498 发表于 2014-12-15 10:30:26 [建站素材] 显示全部楼层

都是那么过来的,支持哈
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表