码迷,mamicode.com
首页 > 其他好文 > 详细

TouchSlide

时间:2015-10-30 16:46:23      阅读:429      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

TouchSlide

标签:

原文地址:http://www.cnblogs.com/wzzl/p/4923538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!