轮播图，手机端、移动端一网打尽。

最新推荐文章于 2022-06-21 10:56:00 发布
最新推荐文章于 2022-06-21 10:56:00 发布
阅读量450 收藏 1
点赞数 1
分类专栏： 前端随笔 文章标签： jquer 轮播图 移动端 触摸事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30236067/article/details/82820380
版权

直接上代码。
有bug，请留言。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>

    </head>

    <body>
        <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
        <style type="text/css">
            body {
                background-color: #000000;
            }
            
            * {
                margin: 0;
                padding: 0;
            }
            
            .m-slider {
                width: 100%;
                margin: 0 auto 10px !important;
            }
            
            #slider {
                width: 100%;
                overflow: hidden;
            }
            
            .m-slider .cnt {
                position: relative;
                left: 0;
                width: 2000%;
            }
            
            .m-slider .cnt li {
                float: left;
                width: 5%;
                height: 450px;
                overflow: hidden;
            }
            
            .m-slider .cnt img {
                display: block;
                width: 100%;
                height: 450px;
                vertical-align: top;
            }
            
            .m-slider .cnt p {
                margin: 10px 0;
            }
            
            .m-slider .icons {
                text-align: center;
                color: #000;
                position: relative;
                z-index: 999;
                margin-top: 220px;
            }
            
            .m-slider .icons span {
                background: #fff;
                border-radius: 5px;
                box-shadow: 0 0 2px #b0b0b0 inset;
                display: inline-block;
                height: 10px;
                margin: 0 5px;
                overflow: hidden;
                text-indent: -99em;
                width: 10px;
            }
            
            .m-slider .icons .curr {
                background: #db192a;
            }
            
            .nr {
                list-style: none;
                width: 10px;
                height: 10px;
                background: #fff;
                border-radius: 10px;
                float: left;
                margin-right: 10px;
                margin-bottom: 0px;
            }
        </style>
        <div class="m-slider">
            <div id="slider">
                <ul id="m-slider" class="cnt">
                    <li>
                        <a href="#1"><img src="http://www.jq22.com/img/cs/500x300-1.png" class="imga">
                            <p>1</p>
                        </a>
                    </li>
                    <li>
                        <a href="#2"><img src="http://www.jq22.com/img/cs/500x300-2.png" class="imga">
                            <p>2</p>
                        </a>
                    </li>
                    <li>
                        <a href="#3"><img src="http://www.jq22.com/img/cs/500x300-3.png" class="imga">
                            <p>3</p>
                        </a>
                    </li>
                    <li>
                        <a href="#4"><img src="http://www.jq22.com/img/cs/500x300-4.png" class="imga">
                            <p>4</p>
                        </a>
                    </li>
                    <li>
                        <a href="#1"><img src="http://www.jq22.com/img/cs/500x300-5.png" class="imga">
                            <p>5</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- <div id="icons" class="icons"><span class="curr">1</span>
<span>2</span> <span>3</span> <span>4</span> <span>5</span>
</div> -->
            <ul id="icons" class="icons">
                <li class="nr curr"></li>
                <li class="nr"></li>
                <li class="nr"></li>
                <li class="nr"></li>
                <li class="nr"></li>
            </ul>
        </div>
        <script type="text/javascript">
            //
            $(document).ready(function() {

                var $slider = $('#m-slider');
                var $icons = $('#icons');
                var $li = $slider.children('li');
                var $li_ = $(".icons").children('li');
                var WIDTH = $li.width();
                var mod = $('.imga')
                var SIZE = $li.size();
                var ox, mx, ux, sumx, scroll, i = 0,
                    bool = false,
                    staut = true;
                var lb = document.querySelector(".m-slider");
                var lb_img = document.querySelector(".cnt img");
                var img = document.querySelectorAll(".lb .lb_img img")
                var lis = document.querySelectorAll(".icons  li");
                var b = 2;
                // 初始化手指坐标点
                var startPoint = 0;
                var startEle = 0;
                //手指按下
                lb.addEventListener("touchstart", function(e) {
                    startPoint = e.changedTouches[0].pageX;

                    startEle = lb_img.offsetLeft;
                    console.log('startPoint' + startPoint);
                    clearInterval(timer)
                });

                //手指滑动
                lb.addEventListener("touchmove", function(e) {
                    var currPoint = e.changedTouches[0].pageX;
                    var disX = currPoint - startPoint;
                    var left = startEle + disX;
                    lb_img.style.left = left + "px";
                    console.log('left' + left);
                });
                //当手指抬起的时候，
                lb.addEventListener("touchend", function(e) {
                    var currPoint = e.changedTouches[0].pageX;
                    var disX = -(currPoint - startPoint);
                    var left = startEle + disX;
                    console.log('disX' + disX);
                    if(disX > 120) {
                        i++; //下一个
                        if(i == SIZE) {
                            i = 0;
                            $slider.parent().scrollLeft(0);
                        }
                        $slider.parent().stop().animate({
                            scrollLeft: (i) * WIDTH
                        }, 300, function() {})
                        $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
                    }
                    if(disX < -120) {
                        i--;
                        if(i == -1) {
                            i = 4;
                        }
                        $slider.parent().stop().animate({
                            scrollLeft: (i) * WIDTH
                        }, 300, function() {})
                        $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
                    }
                })
                $slider.append($li.first().clone());
                //console.log(WIDTH + '-' + SIZE);

                $li.find('a').click(function() {
                    //阻止轮播元素的默认点击事件
                    return false;
                });
                for(var a = 0; a < $li_.length; a++) {
                    $li_[a].index = a;
                    $li_[a].onmouseover = function() {

                        var j = this.index;
                        sumx > 0 && i < SIZE && i++; //下一个
                        sumx < 0 && i > 0 && i--; //上一个
                        $slider.parent().stop().animate({
                            scrollLeft: (j) * WIDTH
                        }, 300, function() {})
                        $icons.find('.curr').removeClass('curr').end().children().eq(j).addClass('curr');
                        console.log("i=" + i);
                    }
                }
                $slider.mousedown(function(e) {
                    //鼠标左键轮播区域
                    if(e.target.tagName == 'IMG' && e.button == 0) {
                        //左键图片
                        staut = true;
                        //初始化拖拽,状态为true,可以触发点击事件
                        sumx = 0;
                        //初始化鼠标偏移为0
                        bool = true;
                        //记录左键状态
                        ox = e.pageX;
                        //记录鼠标初始坐标
                        scroll = $slider.parent().scrollLeft();
                        //记录初始轮播水平滚动偏移
                        e.preventDefault();
                        //阻止鼠标点击默认事件
                    }
                });
                $slider.mousemove(function(e) {
                    //鼠标在轮播区域移动
                    if(bool) { //左键状态
                        staut = false;
                        //已经拖拽,状态为false,不再触发点击事件
                        mx = e.pageX;
                        //记录鼠标实时坐标
                        sumx = ox - mx;
                        //记录鼠标坐标偏移
                        $slider.parent().scrollLeft(scroll + sumx);
                    }
                });
                $slider.mouseout(function(e) {
                    //鼠标离开轮播区域
                    if(bool) {
                        //左键状态
                        staut = true;
                        //已经拖拽,但是离开了轮播区域,
                        //状态为true,可以触发点击事件
                        bool = false; //释放左键状态
                        sumx > 0 && i < SIZE && i++; //下一个
                        console.log(i);
                        sumx < 0 && i > 0 && i--; //上一个
                        $slider.parent().stop().animate({
                            scrollLeft: i * WIDTH
                        }, 300, function() {
                            if(i == SIZE) {
                                i = 0;
                                $slider.parent().scrollLeft(0);
                            }
                            $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
                        }); //完成拖拽
                    }
                });
                $slider.mouseup(function(e) {
                    //鼠标释放,完成click事件
                    bool = false;
                    //释放左键状态
                    if(staut && e.button == 0) {
                        //没有拖拽或者拖拽失效,且是左键,触发点击事件
                        window.location.href = $(e.target).parent().attr('href');
                        //触发点击事件
                    } else if(!staut && e.button == 0) {
                        //成功拖拽,且是左键
                        sumx > 0 && i < SIZE && i++; //下一个
                        sumx < 0 && i > 0 && i--; //上一个
                        $slider.parent().stop().animate({
                            scrollLeft: i * WIDTH
                        }, 300, function() {
                            console.log(i + "左滑");

                            if(i == SIZE) {
                                //最后一个
                                i = 0;
                                $slider.parent().scrollLeft(0); //归位
                            }
                            $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
                        }); //完成拖拽
                    }
                });

                function setSlider() {
                    if(i < SIZE)
                        i++ //下一个
                        $slider.parent().stop().animate({
                            scrollLeft: i * WIDTH
                        }, 300, function() {
                            if(i == SIZE) { //最后一个
                                i = 0;
                                $slider.parent().scrollLeft(0);
                            }
                            $icons.find('.curr').removeClass('curr').end().children().eq(i).addClass('curr');
                        }); //完成拖拽
                }
                var timer = setInterval(function() {
                    setSlider();
                }, 3000);
                $slider.hover(function() {
                    if(timer) {
                        clearInterval(timer);
                        timer = null;
                    }
                }, function() {
                    timer = setInterval(function() {
                        setSlider();
                    }, 3000);
                });
                $(window).resize(function() {
                    WIDTH = $li.width();
                    $slider.parent().scrollLeft(i * WIDTH); //归位
                    //console.log(WIDTH + '-' + i);
                });
            });
        </script>

    </body>

</html>
核心已转储911
关注
专栏目录
奥维地图电脑端手机端不能用了，有没有可替代的地图工具
GISWorld3D的博客
05-08 3583
事假背景 2020年11月27日左右，国内谷歌地图、谷歌地形、历史影像全面被封，无法正常访问查看，接下来就是国内的比较大的地图厂商接连被约谈，紧接着就是各大平台发布自己的解决方案。 奥维互动地图是国内起步较早也是做的比较优秀的地图软件，来看奥维发布的公告： 根据国家测绘主管部门的要求，奥维互动地图浏览器在v8.8版本后做以下修改 下架未经依法审核批准的地图如谷歌系列地图、Bing地图等 暂停轨迹发布和搜索功能 暂停本地对象的同步功能，届时用户也将无法查看自己账户下的云端数
手机移动端轮播图切换js插件
12-18
超好用的 手机移动端轮播图切换js插件，支持 多图轮播，无缝切换
移动端轮播图
bin_2659017380的博客
10-22 200
Document <script> window.onload = function () { var wrap = document.querySelector('.wr...
HTML5实现手机客户端轮播图欢迎页面
09-30
一个简单的HTML5页面，使用fullPage.js插件做的轮播图页面，可以直接放在Android项目中的 assets 文件夹下作为app欢迎页面来使用，结构简单，替换图片就可以放入你的项目中 另外，没有积分的同学 到http://blog.csdn.net/qingchen1016/article/details/51457258 文章下面给我留言我发给你，或者任意一篇下留言都可以
手机端轮播图（焦点图）和hammer.js教程
01-18
手机端轮播图（焦点图）和hammer.js教程http://blog.csdn.net/libin_1/article/details/50534625
使用swiper制作手机端轮播图
蹦哒哒的王小哲
06-21 375
制作手机端轮播图
OpenCV仿射变换图像校正常见问题与解决方案：图像校正疑难杂症一网打尽
[OpenCV仿射变换图像校正常见问题与解决方案：图像校正疑难杂症一网打尽](https://cos.codec.wang/cv2_image_transformation_sample.jpg) # 1. OpenCV仿射变换图像校正简介 **1.1 仿射变换** 仿射变换是一种几何...
硬盘图标一网打尽 v1.1免费版
12-11
为您提供硬盘图标一网打尽下载，硬盘图标一网打尽是一款批量提取图标的软件，利用硬盘图标一网打尽能够批量的提取同一个文件夹下所有的文件的图标并保存，功能简单，但非常好用。功能介绍　该软件可自动扫描你硬盘上...
手机端html实现滑动图片轮播完整代码，带透明圆点
01-13
手机端html实现滑动图片轮播完整代码，带透明圆点，找了好多，这是自己根据别人改好的代码，可完美移植至微信公众号，及基于html5开发的app中
手机网站，整站，有轮播图。
04-19
手机网站模板，适用于各种手机系统，安卓ios。亲测可用。
移动端轮播图原生实现
柱哥的博客
09-29 2725
slidebanner.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;vie
移动端实现轮播图
qq_14815199的博客
05-03 3284
一段调试过的移动端轮播图代码
手机端轮播图插件
weixin_34166472的博客
05-11 356
手机端轮播图实现: 对应插件:af.carousel.js见附件 使用方法: Js代码 /*** * *@paramcarouselId *@paramcarousel_dotsId *@paramautoPlay:是否自动播放轮播图 *@paramisCache:不传值默认为t...
移动端轮播
qq_37133856的博客
03-27 504
      // 轮播 (function () { var Banner =document.querySelector(".Banner"); //轮播大图 盒子 var B_ul =document.querySelector(".Banner .B-img ul"); //轮播 图片UL B_ul.innerHTML+=B_ul.innerHTML; /...
PHP Imagick：图片处理利器，裁剪、旋转、特效一网打尽
PHP Imagick 是一个强大的PHP扩展，它使PHP能够调用ImageMagick库的功能，从而实现对图片的高级处理，如剪切、旋转、锐化、减色和增加特效。ImageMagick本身是一个跨平台的图像处理工具集，支持超过185种图片文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值