JQuery左右无缝轮播

版权声明：转载请注明出处：http://blog.csdn.net/Guobeibei_123 https://blog.csdn.net/Guobeibei_123/article/details/80816940

点击右边的按钮不会动，点击左边的按钮开始轮播

HTML代码部分

<div class="global_module prolist">
                <h3>新款上市</h3>
                <div class="prolist_content">
                    <ul>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" title="免烫高支棉衬衣" alt="假装有图片" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
                        </li>
                        <li>
                            <a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
                        </li>
                    </ul>
                </div>
                <p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif" alt="" /></p>
            </div>

JQuery代码部分

//图片点击无缝左右切换轮播
$（function（）{
            //定义索引值为0
            var right = 0;
            //定义div的ul li的数量个数
            var numbered = $(".prolist_content ul li").length;
            //当向左点击时图片的翻转效果，当图片到底时，返回开始
            $(".goLeft").click(function () {
                cutImag(right);
                if (right > 0) {
                    right = right - 4;
                } else {
                    right = 0;
                }
            });
            //当向右点击时图片在开始不会动，图片运行后返回首页
            $(".goRight").click(function () {
                cutImag(right);
                if (right < numbered - 4) {
                    right = right + 4;
                } else {
                    right = 0;
                }
            });
            //封装图片的左边边框以及索引值
            function cutImag(right) {
                $(".prolist_content").stop(true, false).animate({ marginLeft: -140 * right }, 1000);
            }
});