zoukankan      html  css  js  c++  java
  • TouchSlide

    HTML:

            <div id="slideBox" class="slideBox">
    
                <div class="bd">
                    <ul>
                        <li>
                            <a class="pic" href="#"><img src="images/csse1.jpg" /></a>
                            <a class="tit" href="#">铭瑞建筑责任有限公司</a>
                        </li>
                        <li>
                            <a class="pic" href="#"><img src="images/csse1.jpg"/></a>
                            <a class="tit" href="#">铭瑞建筑责任有限公司</a>
                        </li>
                        <li>
                            <a class="pic" href="#"><img src="images/csse1.jpg"/></a>
                            <a class="tit" href="#">+++++++</a>
                        </li>
                        <li>
                            <a class="pic" href="#"><img src="images/csse1.jpg"/></a>
                            <a class="tit" href="#">+++++++</a>
                        </li><li>
                            <a class="pic" href="#"><img src="images/csse1.jpg"/></a>
                            <a class="tit" href="#">+++++++</a>
                        </li>
                    </ul>
                </div>
    
                <div class="hd">
                    <ul></ul>
                </div>
            </div>

    CSS:

    .slideBox{ position:relative; width:100%;  height:auto;  margin:10px auto;margin-bottom: 40px }
    .slideBox .hd{ position:absolute; height:28px; line-height:28px; bottom:-43px; right:50%;margin-right:-110px; z-index:1; }
    .slideBox .hd li{ display:inline-block; width:30px; height:3px; background:#969696; text-indent:-9999px;  margin:0 6px;   }
    .slideBox .hd li.on{ background:#df4044;}
    .slideBox .bd{ position:relative; z-index:0; }
    .slideBox .bd li{ position:relative;  }
    .slideBox .bd li img{ width:100%; display:block;   }
    .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
    .slideBox .bd li .tit{ display:block; width:100%;margin-top: 10px; text-indent:10px; height:28px; line-height:28px; color:#333333;   }

    js

        <script src="js/TouchSlide.1.1.js"></script>
     <script type="text/javascript">
                TouchSlide({
                    slideCell:"#slideBox",
                    titCell:".hd ul",
                    mainCell:".bd ul",
                    effect:"leftLoop",
                    autoPlay:true,
                    autoPage:true
                });
            </script>
  • 相关阅读:
    SpringBoot自动配置原理(七)
    SpringBoot 集成Shiro
    Shiro配置跳过权限验证
    rsync+ssh同步备份文件
    okhttp3设置代理(http/https)
    Spring RestTemplete支持Https安全请求
    电商课题V:分布式锁
    电商课题:对付秒杀器等恶意访问行为的简单梳理
    电商课题:客户端的IP地址伪造、CDN、反向代理、获取的那些事儿
    电商课题I:集群环境下业务限流
  • 原文地址:https://www.cnblogs.com/wzzl/p/4923538.html
Copyright © 2011-2022 走看看