jQuery-实现上一页、下一页、选中、滑动功能

最新推荐文章于 2023-05-22 08:44:15 发布

佛佛ง

最新推荐文章于 2023-05-22 08:44:15 发布

阅读量1.6k

点赞数

分类专栏： jQuery学习笔记

本文链接：https://blog.csdn.net/LzzMandy/article/details/102860706

版权

jQuery学习笔记专栏收录该内容

29 篇文章 1 订阅

订阅专栏

功能简介：

1、点击向左、向右的绿色箭头，实现左滑和右滑分页展示；

2、点击某个小圆点，页面跳转到第几页；

3、当鼠标在页面上横向滑动距离超过50px时，页面滑动，切小圆点跟着变动；

dom结构如下：

界面逻辑如下：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> </title>
    <link href="style2.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        var downX=0;
        var downY=0;
        var img_count = 22;// 假设有10张图片
        var page = 1;
        var i = 4; //每版放4个图片
        var page_count = Math.ceil(img_count / i);   //只要不是整数，向下取整
        $(function () {
            var $parent = $("div.v_show");//根据当前点击元素获取到父元素
            var $v_show = $parent.find("div.v_content_list"); //寻找到“内容展示区域”
            var $v_content = $parent.find("div.v_content"); //寻找到“内容展示区域”外围的DIV元素
            var v_width = $v_content.width();
            // 追加图片内容
            var _html = "";
            for (var i = 0; i < img_count; i++) {
                _html += '<li >'
                    + '<a href="#">'
                    + '<img src="img/' + (i + 1) + '.jpg" alt="迪丽热巴" />'
                    + '</a>'
                    + '<h4>'
                    + '<a href="#">迪丽热巴</a>'
                    + '</h4>'
                    + '<span>播放:<em>28,276</em></span>'
                    + '</li>';
            }
            $("#listInfo").append(_html);
            // 追加小圆点
            var _html2 = '<span class="current"></span>';
            for (var i = 1; i < page_count; i++) {
                _html2+='<span></span>';
            }
            $("#tips").append(_html2);

            // key1:禁止拖动图片;也可以在img便签上加 ondragstart="return false;" 但对IE 没有效果
            $('img').on('mousedown', function (e) {
                e.preventDefault();//web浏览器阻止默认事件
            })

            // 点击圆点
            $(".highlight_tip span").click(function () {
                $(".highlight_tip span.current").removeClass("current");//找到class是current的元素，去掉current
                $(this).addClass("current");//当前元素添加current
                var _index = $(".highlight_tip span").index(this) + 1;
                if (!$v_show.is(":animated")) {    //判断“内容展示区域”是否正在处于动画
                    // 加入当前index+1>page值，向后滑动；否者向前滑动
                    if (_index > page) {
                        $v_show.animate({ left: '-=' + v_width * (_index - page) }, "slow");
                    } else {
                        $v_show.animate({ left: '+=' + v_width * (page - _index) }, "slow");
                    }
                    page = _index;
                }
            });

            // 往左 按钮
            $("span.prev").click(function () {
                gotoLeft($v_show,$parent,v_width);
            });
            // 向右 按钮
            $("span.next").click(function () {    //绑定click事件
                gotoRight($v_show,$parent,v_width);
            });
            
            // 鼠标事件，当滑动的距离大于50时，滚动
            $(".v_content").mousedown(function (e) {
                downX=e.pageX;
                downY=e.pageY;
            }).mouseup(function (e) {
                var upX=e.pageX;
                var upY=e.pageY;
                var x=upX-downX;
                var y=upY-downY;
                if(x>50){//向右滑
                    gotoLeft($v_show,$parent,v_width);
                }else if(x<-50){//向左
                    gotoRight($v_show,$parent,v_width);
                }else{
                    return;
                }
            });
        });
        // 向左滑动
        function gotoLeft(obj,objp,v_width){
            if (!obj.is(":animated")) {    //判断“内容展示区域”是否正在处于动画
                if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
                    obj.animate({ left: '-=' + v_width * (page_count - 1) }, "slow");
                    page = page_count;
                } else {
                    obj.animate({ left: '+=' + v_width }, "slow");
                    page--;
                }
                objp.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
            }
        };
        // 向右滑动
        function gotoRight(obj,objp,v_width){
            if (!obj.is(":animated")) {    //判断“内容展示区域”是否正在处于动画
                if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
                    obj.animate({ left: '0px' }, "slow"); //通过改变left值，跳转到第一个版面
                    page = 1;
                } else {
                    obj.animate({ left: '-=' + v_width }, "slow");  //通过改变left值，达到每次换一个版面
                    page++;
                }
                objp.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
            }
        }
    </script>
</head>

<body>
    <div class="v_show">
        <!-- 1 头部 -->
        <div class="v_caption">
            <h2 class="cartoon" title="绝世美人">绝世美人</h2>
            <div class="highlight_tip" id="tips">
            </div>
            <div class="change_btn">
                <span class="prev"></span>
                <span class="next"></span>
            </div>
        </div>
        <!-- 内容 -->
        <div class="v_content">
            <div class="v_content_list">
                <ul id="listInfo">
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

佛佛ง

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery-实现上一页、下一页、选中、滑动功能

功能简介：1、点击向左、向右的绿色箭头，实现左滑和右滑分页展示；2、点击某个小圆点，页面跳转到第几页；3、当鼠标在页面上横向滑动距离超过50px时，页面滑动，切小圆点跟着变动；dom结构如下：界面逻辑如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www....
复制链接

扫一扫