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>
  • 相关阅读:
    Leetcode Spiral Matrix
    Leetcode Sqrt(x)
    Leetcode Pow(x,n)
    Leetcode Rotate Image
    Leetcode Multiply Strings
    Leetcode Length of Last Word
    Topcoder SRM 626 DIV2 SumOfPower
    Topcoder SRM 626 DIV2 FixedDiceGameDiv2
    Leetcode Largest Rectangle in Histogram
    Leetcode Set Matrix Zeroes
  • 原文地址:https://www.cnblogs.com/ting-0424/p/13893771.html
Copyright © 2011-2022 走看看