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>

 

三、插件

SuperSlide