zoukankan      html  css  js  c++  java
  • jQuery 轮播图版本四:(jquery.SuperSlide.2.1.1.js)做轮播图,多张图向左翻页

    效果如下

     1.HTML部分

    <div class="four_box">
            <div class="cont1200">
                <div class="picScroll-left">
                    <div class="hd">
                        <a class="next"><img src="__IMG__/index/white_right.png" alt=""></a>
                        <a class="prev"><img src="__IMG__/index/white_left.png" alt=""></a>
                    </div>
                    <div class="bd">
                        <ul class="picList">
                            <li>
                                <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" /></a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" /></a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" /></a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" /></a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" /></a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" /></a></div>
                            </li>
                        </ul>
                    </div>
                </div>
    
            </div>
        </div>

    2.CSS部分

    .four_box{
        background:url(../../images/index/bg_3.png) no-repeat;
        background-size: 100% auto;
        
    }
    .four_box .cont1200{
        padding: 150px 0 10px;
        height: 400px;
    }
    .picScroll-left{ width:100%;margin:0 auto;position:relative;  }
    .picScroll-left .hd .prev{position: absolute;top:35%;left: -56px;
         cursor:pointer;}
    .picScroll-left .hd .next{position: absolute;top:35%;right: -52px;}
    .picScroll-left .hd .prevStop{ background-position:-60px 0; }
    .picScroll-left .hd .nextStop{ background-position:-60px -50px; }
    .picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
    .picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; }
    .picScroll-left .hd ul li.on{ background-position:0 0; }
    .picScroll-left .bd ul{ overflow:hidden; zoom:1;height: 360px; }
    .picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
    .picScroll-left .bd ul li .pic{ text-align:center; }
    .picScroll-left .bd ul li .pic img{ display:block; width: 282px; height: 360px;}
    .picScroll-left .bd ul li .title{ line-height:24px;   }

    3.JS部分

    <script type="text/javascript" src="__JS__/common/jquery-1.9.1.min.js"></script>
       <script type="text/javascript" src="__JS__/common/jquery.SuperSlide.2.1.1.js"></script>
    <script>
        $(function () {
           jQuery(".picScroll-left").slide({
                titCell: ".hd ul",
                mainCell: ".bd ul",
                autoPage: true,
                effect: "left",
                autoPlay: true,
                vis: 4,
                trigger: "click"
            });
        })
    </script>
  • 相关阅读:
    Eclipse建立Java工程中的三个JRE选项的区别(Use an execution environment JRE,Use a project specific JRE,Use default JRE)
    Maven项目报错:Missing artifact****和ArtifactDescriptorException: Failed to read artifact descriptor for***和Cannot change version of project facet Dynamic web module to 2.5
    使用jdk的keytool 生成CA证书的方法
    Linux shell逐行读取文件的方法
    ArrayList的实现原理
    时间复杂度总结
    RPC的原理总结
    hashcode和equals方法的区别和联系
    消息队列的应用场景总结
    Java中IO流中的装饰设计模式(BufferReader的原理)
  • 原文地址:https://www.cnblogs.com/ting-0424/p/13893771.html
Copyright © 2011-2022 走看看