zoukankan      html  css  js  c++  java
  • li列表自动左右滚动

    一、效果

    二、代码

      <div class="recommend">
                <ul>
                    <li class="recommend-list fancybox-thumb" rel="fancybox-thumb">
                        <p class="recommend-title">DH08B2-XL推土机</p>
                        <img src="images/xiaotuituji2.png">
                        <p class="view">
                            <a href="#">
                                <span class="inquiry">我要询价</span>
                            </a>
                            <a href="#">
                                <span class="information">查看详情</span>
                            </a>
                        </p>
                    </li>
                    <li class="recommend-list fancybox-thumb" rel="fancybox-thumb">
                        <p class="recommend-title">DH08B2-XL推土机</p>
                        <img src="images/xiaotuituji2.png">
                        <p class="view">
                            <a href="#">
                                <span class="inquiry">我要询价</span>
                            </a>
                            <a href="#">
                                <span class="information">查看详情</span>
                            </a>
                        </p>
                    </li>
                    <li class="recommend-list fancybox-thumb" rel="fancybox-thumb">
                        <p class="recommend-title">DH08B2-XL推土机</p>
                        <img src="images/xiaotuituji2.png">
                        <p class="view">
                            <a href="#">
                                <span class="inquiry">我要询价</span>
                            </a>
                            <a href="#">
                                <span class="information">查看详情</span>
                            </a>
                        </p>
                    </li>
                    <li class="recommend-list fancybox-thumb" rel="fancybox-thumb">
                        <p class="recommend-title">DH08B2-XL推土机</p>
                        <img src="images/xiaotuituji2.png">
                        <p class="view">
                            <a href="#">
                                <span class="inquiry">我要询价</span>
                            </a>
                            <a href="#">
                                <span class="information">查看详情</span>
                            </a>
                        </p>
                    </li>
                    <li class="recommend-list fancybox-thumb" rel="fancybox-thumb">
                        <p class="recommend-title">DH08B2-XL推土机</p>
                        <img src="images/xiaotuituji2.png">
                        <p class="view">
                            <a href="#">
                                <span class="inquiry">我要询价</span>
                            </a>
                            <a href="#">
                                <span class="information">查看详情</span>
                            </a>
                        </p>
                    </li>
                </ul>
               
            </div>
    
            <script type="text/javascript">
                jQuery(".recommend").slide({
                    mainCell: "ul",
                    autoPlay: true,
                    effect: "left",
                    vis: 4,
                    scroll: 2,
                    autoPage: true,
                    pnLoop: false
                });
            </script>

    三、插件

  • 相关阅读:
    【原创】用python写的一个监测本地进程CPU占用的程序
    CSS清除浮动的7种方法以及优缺点
    JavaScript函数作用域
    BOM的概念以及相关操作
    文件与文件系统的压缩与打包
    CSRF
    netstat 命令详解
    httpd安装
    ubuntu 耳机没声音
    Linu正常使用MobaXterm
  • 原文地址:https://www.cnblogs.com/wangyuxue/p/13320938.html
Copyright © 2011-2022 走看看