精华内容
下载资源
问答
  • 本篇文章主要给大家讲述了用jquery如何写出一个PC端轮播图效果的实例,有兴趣的朋友参考下。
  • 案例效果:原生JS-实现pc端轮播图效果案例:轮播图需求实现效果: 案例:轮播图需求 布局:ul下有很多li标签;浮动在一行; 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden; ...

    案例效果:原生JS-实现pc端轮播图效果

    案例:轮播图需求

    • 布局:ul下有很多li标签;浮动在一行;
    • 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;
    • 功能需求:
      • 序号轮播
      • 左右按钮的轮播
      • 自动轮播
      • 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播

    实现效果:

    在这里插入图片描述
    html部分

    <div class="box" id="box">
            <div class="inner" id="inner">
                <ul id="imglist">
                    <li>
                        <a href="#"><img src="images/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/5.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/6.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="list">
                    <i class="current">1</i>
                    <i>2</i>
                    <i>3</i>
                    <i>4</i>
                    <i>5</i>
                    <i>6</i>
                </div>
                <div class="arrow">
                    <span class="arrow-left">&lt;</span>
                    <span class="arrow-right">&gt;</span>
                </div>
            </div>
        </div>
    

    css部分

    * {
                margin: 0;
                padding: 0;
            }
            
            ul {
                list-style: none;
            }
            
            .box {
                width: 730px;
                height: 454px;
                padding: 8px;
                border: 1px solid green;
                margin: 100px auto;
            }
            
            .inner {
                position: relative;
                overflow: hidden;
                height: 454px;
            }
            
            #imglist {
                width: 700%;
                position: absolute;
                left: 0;
                transition: left 300ms linear;
            }
            
            li {
                float: left;
            }
            
            .list {
                position: absolute;
                bottom: 20px;
                left: 50%;
                margin-left: -85px;
            }
            
            .list i {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #fff;
                color: #333;
                float: left;
                font-style: normal;
                line-height: 20px;
                font-size: 14px;
                text-align: center;
                margin-right: 10px;
                cursor: pointer;
            }
            
            .list i:last-child {
                margin-right: 0;
            }
            
            .list i.current {
                background-color: skyblue;
                color: #fff;
            }
            
            .arrow {
                position: absolute;
                width: 100%;
                top: 50%;
                margin-top: -30px;
            }
            
            .arrow-left,
            .arrow-right {
                width: 30px;
                height: 60px;
                position: absolute;
                font: 20px/60px "consolas";
                color: #fff;
                background-color: rgba(0, 0, 0, .3);
                text-align: center;
                cursor: pointer;
            }
            
            .arrow-right {
                right: 0;
            }
    

    js部分:

     // 获取DOM
        var yuan = document.querySelectorAll("i");
        var li = document.querySelector("ul li");
        var ul = document.querySelector("ul");
        var imgs = document.querySelector("#imglist");
        var right = document.querySelector(".arrow-right");
        var left = document.querySelector(".arrow-left");
        var box = document.querySelector(".box");
        window.onload = function() {
            //------------------------------------这里是点击小圆圈,控制图片的切换
            //循环小圆点 注册小圆点
            for (var i = 0; i < yuan.length; i++) {
                //我们需要这里面的i 必须提前拿出来,要不最后i的值就是最后一个数值了
                yuan[i].num = i;
                //注册事件
                yuan[i].onmouseover = function() {
                    // 现在要循环将样式移除
                    for (var j = 0; j < yuan.length; j++) {
                        yuan[j].classList.remove("current");
                    }
                    //这里是为了将点击的小圆点 增加上样式
                    this.classList.add("current");
                    var num = this.num;
                    //到这里的思路就是点击小圆点 将图片进行移动,向左面移动,上面css做了相应的定位操作
                    //移动的距离就是 n 乘以 一张图片的宽度,
                    //n 就是选择的小圆点的 坐标-----i(num)
                    //图片的宽度 box.offsetWidth
                    var left = num * li.offsetWidth;
                    // console.log(num, box.offsetWidth, left);
                    imgs.style.left = `-${left}px`;
    
                    //这里小原点联动左右按钮
                    for (var p = 0; p < yuan.length; p++) {
                        //清除全部样式(小圆点)
                        yuan[p].classList.remove("current");
                    }
                    //给当前的小圆点增加样式
                    yuan[num].classList.add("current");
                    //这里这个位置比较关键,在上面设置完样式之后,记得将此num赋值给全局的index
                    index = this.num;
    
    
                }
            }
            //------------------------------------以上是点击小圆圈,控制图片的切换
            //------------------------------------下面是开始右面轮播,控制图片的切换
            //首先定义一个全局的index,这个index的作用依旧是控制图片的切换
            var index = 0;
            right.onclick = function() {
                index++;
                //这里要对index做一下判断,如果不做判断,可以试想一下,
                //只要你一点击,index就会无限的增大,增大到你“无法自拔”
                if (index == ul.children.length) {
                    //如果坐标为6的话,显示应该显示第1张图片,所以要复位 即index=0
                    index = 0;
                }
                var left = index * li.offsetWidth;
                // console.log(index, box.offsetWidth, left);
                imgs.style.left = `-${left}px`;
    
                //点击右面增加联动小圆点的效果
                for (var n = 0; n < yuan.length; n++) {
                    //清除全部样式(小圆点)
                    yuan[n].classList.remove("current");
                }
                //给当前的小圆点增加样式
                yuan[index].classList.add("current");
            };
            //------------------------------------以上是结束右面轮播,控制图片的切换
    
            //------------------------------------下面是开始左面轮播,控制图片的切换
            left.onclick = function() {
                index--;
                //这里同右点击一样,需要做一下判断,
                console.log(index);
                if (index == -1) {
                    index = ul.children.length - 1;
                }
                var left = index * li.offsetWidth;
                // console.log(index, box.offsetWidth, left);
                // console.log(left);
                imgs.style.left = `-${left}px`;
    
                //这个位置做的是 左面点击联动小圆点
                for (var m = 0; m < yuan.length; m++) {
                    //清除全部样式(小圆点)
                    yuan[m].classList.remove("current");
                }
                //给当前的小圆点增加样式
                yuan[index].classList.add("current");
            };
            //------------------------------------上面是结束左面轮播,控制图片的切换
            //------------------------------------开始设置自动轮播
            var timer = setInterval(function() {
                right.onclick();
            }, 1000);
            //------------------------------------以上是自动轮播结束
            //------------------------------------设置鼠标进来就停止开始
            box.onmouseover = function() {
                clearInterval(timer);
            };
            //------------------------------------设置鼠标进来就停止结束
            //------------------------------------设置鼠标出去就停止开始
            box.onmouseout = function() {
                timer = setInterval(function() {
                    right.onclick();
                }, 1000);
            };
            //------------------------------------设置鼠标出去就停止结束
        }
    

    未完待续,本篇文章做的PC端的处理,目前从6页-1页,1页到6页还有点小瑕疵,会及时更新上的,其他功能一切正常,欢迎大家评论

    展开全文
  • 首先,在图片的克隆问题上,PC端只需在原有最后一张图片后添加p1的克隆,而移动端因为触屏滚动的需求 在p1的前面需要再添加原有最后一张图片的克隆 其次,PC端在实现滚动动画效果时采用的方法是在 js 使用 animate ...

    首先,在图片的克隆问题上,PC端只需在原有最后一张图片后添加p1的克隆,而移动端因为触屏滚动的需求 在p1的前面需要再添加原有最后一张图片的克隆

    其次,PC端在实现滚动动画效果时采用的方法是在 js 使用 animate 动画函数,而移动端则是采用 css3 的过渡效果实现滚动动画

    ul.style.transition = 'all .3s';  //c3过渡效果 (ul存放图片)
    ul.style.transform = 'translateX('+ translateX +'px)';

    最大区别是,PC端是通过鼠标事件完成对元素的操作,而移动端则是通过触屏事件来完成

    常见的触屏事件如下:

    触屏touch事件说明
    touchstart手指触摸到一个DOM元素时触发
    touchmove手指在一个DOM元素上滑动时触发
    touchend手指从一个DOM元素上移开时触发

    触摸事件对象( TouchEvent )

    最常用:targetTouches 正在触摸当前DOM元素的手指列表

    // 触摸事件对象
            // 1. 获取元素
            // 2. 手指触摸DOM元素事件
            var div = document.querySelector('div');
            div.addEventListener('touchstart', function(e) {
                // console.log(e);
                // touches 正在触摸屏幕的所有手指的列表 
                // targetTouches 正在触摸当前DOM元素的手指列表
                // 如果侦听的是一个DOM元素,他们两个是一样的
                // changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
                // 因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
                console.log(e.targetTouches[0]);
                // targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
    
    
            });
            // 3. 手指在DOM元素身上移动事件
            div.addEventListener('touchmove', function() {
    
    
            });
            // 4. 手指离开DOM元素事件
            div.addEventListener('touchend', function(e) {
                // console.log(e);
                // 当我们手指离开屏幕的时候,就没有了 touches 和 targetTouches 列表
                // 但是会有 changedTouches
    
    
            });

    关于自动播放-无缝滚动功能,判断条件是等到图片滚动完毕再去判断,在PC端是等动画函数执行完去判断,而移动端是等c3过渡完成后判断 需要添加检测过渡完成事件 transitionend

    总的来说,移动端相较于PC端更便利,因为在开发过程中无需考虑浏览器兼容性问题

    展开全文
  • pc端轮播图引入插件

    2019-09-24 14:10:58
    1.引入bootstrap的css文件和js...2.利用一下这个demo块引入轮播图,也可以详见官方文档。 <div id="demo" class="carousel slide banner-image" data-ride="carousel"> <ul class="carousel-indicator...

    1.引入bootstrap的css文件和js文件,记得在之前引入jq的js文件。

    2.利用一下这个demo块引入轮播图,也可以详见官方文档。

    <div id="demo" class="carousel slide banner-image" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li data-target="#demo" data-slide-to="0" class="active"></li>
                        <li data-target="#demo" data-slide-to="1"></li>
                    </ul>
                    <div class="carousel-inner" style="height:340px">
                        <div class="carousel-item active">
                            <img src="../../img/banner.png">
                        </div>
                        <div class="carousel-item">
                            <img src="../../img/banner.png">
                        </div>
                    </div>

                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>

    3.相应的设置图片宽高等,审查元素,修改对应的class就行。

    展开全文
  • pc端轮播图 css、js

    2021-07-21 11:30:57
    这是一个轮播图的效果。 <div class="main"> <div class="focus"> <a href="javascript:;" class="arrow-l"> &lt; </a> <!-- 右侧按钮 --> <a..

    这是一个轮播图的效果。

     <div class="main">
                <div class="focus">
                    <a href="javascript:;" class="arrow-l">
                        &lt;
                     </a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:;" class="arrow-r"> &gt; </a>
                    <ul>
                        <li><img src="upload/focus.png" alt=""></li>
                        <li><img src="./upload/focus1.jpg" alt=""></li>
                        <li><img src="./upload/focus2.jpg" alt=""></li>
                        <li><img src="./upload/focus3.jpg" alt=""></li>
    
                    </ul>
                    <ol class="circle">
                    </ol>
                </div>

    这是基本的htm框架,如果只是想做一个轮播图的效果。只需要一个大盒子然后需要将轮播的图片放到ul里面。然后就是左右箭头,还有下面的圆点。这都不是重点。大家应该都会,下面是js代码。原生js写的。

    在我们写之前我们需要知道,这个轮播图我们要实现几个功能。

    1.鼠标放在轮播图上左右箭头显示,不放上去就不显示。

    2.点击下面的圆点实现图片的切换

    3.右箭头实现图片切换,左箭头实现图片切换

    4.箭头切换的图片和下面的小圆点一一对应

    5.自动播放图片

    下面让我慢慢的给你们扣代码,

    window.addEventListener('load', function() {
        //获取元素
        var arrow_l = document.querySelector('.arrow-l');
        var arrow_r = document.querySelector('.arrow-r');
        var focus = document.querySelector('.focus');
        var focuswidth = focus.offsetWidth;
        focus.addEventListener('mouseenter', function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            clearInterval(timer);
            timer = null;
        })
        focus.addEventListener('mouseleave', function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            timer = setInterval(function() {
                // 手动调用点击事件
                arrow_r.click();
            }, 2500);
        })
        var ul = focus.querySelector('ul');
        var ol = focus.querySelector('.circle');
        for (var i = 0; i < ul.children.length; i++) {
            //创建小li
            var li = document.createElement('li');
            ol.append(li);
            //给小li增加自定义属性
            li.setAttribute('index', i);
            // 点击小li,排他思想
            li.addEventListener('click', function() {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                //把索引赋值给num,
                num = index; //控制箭头步伐
                circle = index; //控制小圆圈的步伐
                animate(ul, -(index * focuswidth));
            })
        }
        ol.children[0].className = 'current';
        var first = ul.children[0].cloneNode(true);
        ul.append(first);
        //num控制右侧按钮
        var num = 0;
        //circle 控制圆点
        var circle = 0;
        var flag = true;
        // 右侧按钮做法
        arrow_r.addEventListener('click', function() {
                if (flag) {
                    flag = false;
                    if (num == ul.children.length - 1) {
                        ul.style.left = 0;
                        num = 0;
                    }
                    num++;
                    animate(ul, -num * focuswidth, function() {
                        flag = true;
                    });
                    circle++;
                    if (circle == ul.children.length - 1) {
                        circle = 0;
                    }
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    ol.children[circle].className = 'current';
                }
            })
            // 左侧按钮做法
        arrow_l.addEventListener('click', function() {
    
            if (flag) {
                flag = false;
                if (num == 0) {
                    // 跳到最后一张图片,复制的图片上去
                    ul.style.left = -(ul.children.length - 1) * focuswidth + 'px';
                    num = ul.children.length - 1;
                }
                num--;
                animate(ul, -num * focuswidth, function() {
                    flag = true;
                });
                circle--;
                if (circle < 0) {
                    circle = ol.children.length - 1;
                }
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'current';
            }
        })
        var timer = this.setInterval(function() {
                // 手动调用点击事件
                arrow_r.click();
            }, 2500)
            //动画函数
        function animate(obj, target, cellBack) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                    cellBack && cellBack();
                }
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15)
        }
    })

    第一步应该是最简单的,获取焦点图的盒子然后添加监听事件,实现左右箭头显示的功能。

    第二步   先创建元素(因为不知道以后是否轮播图会增加图片,所以这里是创建元素li),利用排他思想实现圆点点击。给创建的小li 设置自定义属性 index。然后调用写好的动画函数(一般是封装好的),这个目标距离就是你的索引数乘上图片的宽度,因为我们动的是ul 所以这里是负数。

    第三步   右侧图片切换,左侧图片切换  和上面的圆点切换差不多。但是这里需要注意的是:这里我把第一张图片复制了放在了最后面。原理就是当我们切换到复制的那个照片的时候,控制箭头的变量会直接变成0,这样就可以继续进行切换了。

     第四步  要做到你的圆点和你的箭头做到同步,可以再设置一个变量,当点击左右按钮的时候这个控制圆点的变量会随着一起变化。而且需要把之前的索引赋值给控制左右箭头和小圆点同步的变量。这样就不会出现你点击箭头但是你的小圆点和图片现在所在的张数不匹配的情况。

    第五步  加一个节流阀 

     把左侧按钮和右侧按钮切换的代码放入节流阀中,当我们的动画结束后才可以执行下一个。这样就不会出现狂按箭头图片疯狂切换导致的bug。

    第六步  

     设置一个定时器,设置手动调用点击事件,当时间到了,他就会自动调用这个事件。

    做到这里就差不多结束了,轮播图我感觉最难的就是做到箭头切换和下面的圆点做到同步,还有的就是右侧按钮切换到最后一张再点一下其实是先到第一张的复制然后瞬间到了本身的第一张。左侧按钮也是到了本身的第一张然后瞬间就到了第一张的复制。

    展开全文
  • pc端轮播图插件SuperSlide使用

    千次阅读 2018-08-22 17:47:11
    1.进入官网下载(http://www.superslide2.com/downLoad.html)==》进入demo文件夹 ==》找到需要的效果; 2.各个参数可查看文档详细说明:http://www.superslide2.com/param.html ... 属于jq插件,使...
  • react的pc端轮播图组件

    2020-03-11 19:42:47
    今天写了一个 react的轮播组件 上面有一个进度条 当进度条走完的时候就轮播到下一张图片 https://github.com/zhaoyunchong/reactCarousel.git
  • // 10.自动播放轮播图 var timer = setInterval(function() { // 手动调用事件 arrow_r.click(); },2000); })
  • 本文是在学习完移动端轮播图后进行编写,发现移动端和PC端的关于动画的显现还是有着版本的区别,但核心的思想还是不变,思考的逻辑也几乎相同 一、移动端框架的搭建 本文单以轮播图为框架,图片为本地图片,使用...
  • <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset
  • &lt;template&gt; &lt;div class="thnu_sowing"&gt; &lt;div id="carousel-example-generic"...-- 轮播图底部标签 --&gt; &lt;ol class="
  • slider PC端轮播插件 轮播图,背景渐变色
  • 主要为大家详细介绍了JavaScript实现PC端横向轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • PC端和移动端轮播图的实现动画函数封装PC端轮播图的实现移动端轮播图的实现总结 动画函数封装 函数第一步清除定时器为保证只开启一个定时器,不用var timer是为了不同对象使用这个函数时都要声明一个变量,所以给...
  • pc端-轮播图

    2020-03-19 04:51:04
    本篇目录轮播图 轮播图
  • 2020-09-09 02:10:03来源:脚本之家阅读:100作者:菜鸟向往蓝天本文实例为大家分享了JavaScript实现PC端横向轮播图的具体代码,供大家参考,具体内容如下步骤:第一步:先实现右侧按钮点击图片动起来;1.每次点击...
  • } 总结 以上所述是小编给大家介绍的JS实现点击拉拽轮播图pc端移动端适配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
  • PC端原生dom轮播图

    2019-12-29 13:29:36
    工作中有很多时候 不让你使用插件写轮播图 这个时候得用原生dom进行书写了 如果之前没有写过的话 还得花一俩个小时 去写 原生dom 写轮播图的 虽然代码可能长一点 好处就是 兼容性比较好 ......
  • react实现pc端图片轮播

    千次阅读 2018-08-21 09:36:26
    1.开始展示多张图片 效果:点击左右按钮的时候可以滑动,当向左滑动完成之后,有按钮消失;当像右滑动完成之后左按钮消失。 解决方法:可以直接使用jquery的动画效果。。。(开始想使用原生js,各种报错。。。...
  • PC端banner轮播效果

    2016-02-14 17:16:26
    PC端banner轮播效果 带左右箭头 底部圆点提示以及点击跳转
  • slide.js原生js写的轮播兼容 pc+移动端 插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动。...移动端跟pc端开发引用js文件直接下载slide-es5.js进行引入使用。html代码 ...
  • 本文通过实例代码给大家介绍了JS点击拉拽轮播图pc端移动端适配 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • <template> <div class="wrapper"> <div>21221</div>...div v-on:mouseover="stop()" v-on:mouseout="move()" class="swiper">...transition-group tag="ul" name="image">...
  • PC端-横向轮播图

    千次阅读 2020-02-04 20:46:53
    步骤: 第一步:先实现右侧按钮点击图片动起来; 每次点击图片走的距离; 起始位置已知,计算定时器每走一小步的距离;...第四步:无缝轮播:html结构修改,在当前结构分别加第一张图和最后一张; 判...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,118
精华内容 7,647
关键字:

pc端轮播图