zoukankan      html  css  js  c++  java
  • 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//自动页面
        });
    });
    
  • 相关阅读:
    mininet 多径传输网络仿真
    mininet 多径仿真双路由双网卡
    mininet仿真星型拓扑
    mininet 三个路由器两个终端的仿真
    mininet 两个路由器两个终端仿真
    mininet 仿真一个路由器两个终端
    mininet 两个交换机两个终端的仿真
    mininet 一个交换机两个终端的仿真
    ps命令
    df命令
  • 原文地址:https://www.cnblogs.com/cyapi/p/15333440.html
Copyright © 2011-2022 走看看