jQuery轮播图之上一张下一张

最新推荐文章于 2023-06-13 11:30:49 发布

李_lym

最新推荐文章于 2023-06-13 11:30:49 发布

阅读量2.2k

点赞数

分类专栏： jquery 文章标签：十一的博客 jQuery轮播图

本文链接：https://blog.csdn.net/sinat_40900884/article/details/80870183

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

如图实例：

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 () {
        var page = 1;//定义第一页
        var ice = 4;//定义个4
        var lenq = $('.prolist_content ul li').length;//获取li标签的个数
        var page_count = Math.ceil(lenq / ice);//分成页数，向上取整
        var none_unit_width = $('.prolist').width();//获取整个div的宽度
        var $parent = $('.prolist_content');//对这个图片div进行挪动

        $('.goRight').click(function () {
            if (page == page_count) {//总页数=1
                $parent.animate({ left: 0 }, 800);//不移动
                page = 1;
            } else {
                $parent.animate({ left: '-=' + none_unit_width }, 1000);//移动特效left=left-none_unit_width
                page++;
            }

        });
        $('.goLeft').click(function () {
            if (!$parent.is

(':animated')) {//匹配这个div没有执行动画效果的所有元素
                if (page == 1) {//没有点击过右键，page=1
                    $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800);//让它移动到了最后一页
                    page = page_count;//更新page=页数
                } else {
                    $parent.animate({ left: "+=" + none_unit_width }, 800)
                    page--;
                }
            }

        })
    })