• swiper


    <div class="bs-part4">
    	<div class="bs-homebox" id="superSlideWrapper">
            <ul id="wws13" class="bsjst">
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
                <li>
                    <img src="static/picture/20210128111529.jpg" class="zj_img">
                </li>
    		</ul>
            <a href="javascript:void(0)" class="super-slide-btn prev">
           		<img src="static/picture/left_ro.png">
            </a>
            <a href="javascript:void(0)" class="super-slide-btn next">
           		<img src="static/picture/right_ro.png">
            </a>
        </div>
    </div>
    
    .bs-part4 {
    	overflow: hidden;
    	margin-top: 30px;
    }
    .bsjst {
    	display: block;
    	white-space: nowrap;
    }
    .bsjst li {
         285px;
        height: 374px;
        margin-right: 20px;
        display: inline-block;
    }
    #superSlideWrapper {
    	position: relative
    }
    .bs-part4 .next img {
    	top: 130px;
    	position: absolute;
    	right: 10px;
    }
    .prev img {
    	top: 130px;
    	position: absolute;
    	left: 10px;
    }
    

    一个页面可以重复使用, 需要id不同。 具体参数查看 SuperSlide

    $(document).ready(function() {
        $('#superSlideWrapper').slide({
            mainCell: ".bsjst",
            autoPlay: true,//自动播放,true为是
            effect: "left",//方向或速度
            vis: 4,//可见的数量
            autoPage: true//自动页面
        });
    });
    
  • 相关阅读:
    简单破解.net(C#)程序
    URL和URI
    Java JDK安装和配置(Windows)
    函数式编程语言
    Http
    drf 序列化获取商品分类数据
    npm install 安装依赖报错
    27-----BBS论坛
    26-----BBS论坛
    25-----BBS论坛
  • 原文地址:https://www.cnblogs.com/cyapi/p/15333440.html
Copyright © 2020-2023  润新知