精华内容
下载资源
问答
  • 轮播图制作

    2020-03-14 20:59:25
    功能需求: 1.鼠标经过轮播图,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片向左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面... 4.... 5.鼠标不经过轮播图轮播图也会自动播放 ...

    功能需求:

               1.鼠标经过轮播图,左右按钮显示,离开隐藏左右按钮

                2.点击右侧按钮一次,图片向左播放一张,以此类推,左侧按钮同理。

                3.图片播放的同时,下面小圆圈模块跟随一起变化

                4.点击小圆圈,可以播放相应图片。

                5.鼠标不经过轮播图,轮播图也会自动播放

                6.鼠标经过,轮播图模块,自动播放停止。

    js代码如下:

     var both = document.querySelector('.both');
            var ul = both.querySelector('ul');
            var ol = both.querySelector('.dian');
            var leftbtn = document.querySelector('.leftbtn');
            var rightbtn = document.querySelector('.rightbtn');
            var tuWidth = both.offsetWidth;
            var cricle = 0;
            var num = 0;
            //1.功能1 鼠标经过显示按钮 鼠标离开按钮消失
            both.addEventListener('mouseenter', function () {
                leftbtn.style.display = 'block';
                rightbtn.style.display = 'block';
                //停止计时器
                clearInterval(timer);
                timer = null;
            })
            both.addEventListener('mouseleave', function () {
                leftbtn.style.display = 'none';
                rightbtn.style.display = 'none';
                timer = setInterval(function(){
                //手动点击事件
                rightbtn.click();
            },2000);
            
            })
            //功能2 下面小圆等于 图片数 。小圆动态生成。
            for (var i = 0; i < ul.children.length ; i++) {
                //创建一个li
                var li = document.createElement('li');
    
                //把li插入到ol
                ol.appendChild(li);
                //记录当前小圆圈的索引号,通过自定义属性来做
                ol.children[0].className = 'current';
                li.setAttribute('index', i);
                // 功能3  实现鼠标点击其中一个小圆时 设置current类名 ,没有点击的则取消current类名
                li.addEventListener('click', function () {
                    for (i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    this.className = 'current';
                    //功能4 当点击一个小圆点时,图片显示对应小圆点的图片
                    //ul 移动距离为小圆圈索引号* 图片宽度。
                    var index = this.getAttribute('index');//小圆索引号
                    //当点击了某个li ,num获得索引号
                    num =  index ;
                    cricle  = index;
                    animate(ul, -index * tuWidth);
                })
    
            }
            //克隆第一张图片放在最后 为功能5做铺垫
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
             // 功能5 点击右侧按钮,图片滚动一张
        
            rightbtn.addEventListener('click', function () {
                if(num == ul.children.length -1){
                   ul.style.left = 0;
                   num= 0;
                }
                num++;
                animate(ul, -num * tuWidth);
                //声明一个变量使圆和图片一起变化。
              cricle++;
              if(cricle == ol.children.length){
                  cricle = 0;
              }
              for (i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    ol.children[cricle].className = 'current';
            })
            leftbtn.addEventListener('click', function () {
                if(num == 0){
                    num= ul.children.length-1;
                   ul.style.left = -num *tuWidth +'px';
                }
                num--;
                animate(ul, -num * tuWidth);
                //声明一个变量使圆和图片一起变化。
              cricle--;
              if(cricle < 0){
                  cricle =  ol.children.length -1;
              }
              for (i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    ol.children[cricle].className = 'current';
            })
            //自动播放功能
            var timer = setInterval(function(){
                //手动点击事件
                rightbtn.click();
            },2000);
            

                                 

    展开全文
  • 原标题:Axure教程:轮播图制作步骤详解不管是在PC端还是移动端,轮播图是常见的设计元素。下面详细讲解轮播图的制作步骤。 作为Axure初学者,把最近学到的记录下来,和大家一起学习。如何实现轮播图:循环展示轮播...

    原标题:Axure教程:轮播图制作步骤详解

    不管是在PC端还是移动端,轮播图是常见的设计元素。下面详细讲解轮播图的制作步骤。

    作为Axure初学者,把最近学到的记录下来,和大家一起学习。

    如何实现轮播图:

    循环展示轮播图片;

    将圆点与轮播图一一对应;

    实现前一张、后一张切换。

    1

    、所需元件

    首先我们需要准备以下元件:

    动态面板(1000*400)、圆(3个,15*15)、向左、向右按钮图片(50*50)。

    2、填充动态面板

    ①在动态面板中,填充内容,每个状态添加一个图片,这就是在轮播时展示的图片。

    将动态面板命名为“轮播图面板”,并在动态面板中添加3个状态,分别命名为“轮播图1”、“轮播图2”、“轮播图3”。如下图:

    双击面板中的状态,在每个状态中添加一张图片。如下图:

    3、添加事件(1)循环展示图片

    设置在载入时进行自动轮播动作。

    点击轮播图面板,在属性中双击【载入时】。

    在元件中选择【设置面板状态】,在右侧配置动作中,选择【轮播图面板】,选择状态【NEXT】,配置如下图。点击确定。

    (2)轮播图与选项圆点对应

    ①将圆点设置成选项组。(选项组作用:同一个选项组的元件,当其中一个部件被选中时,系统会自动取消选择其他部件。)

    同时选中三个圆(圆从左至右分别命名为“1”、“2”、“3”),鼠标右键,点击【设置选项组】,给选选项组命名后,点击确定。

    ②设置面板状态与圆点的对应关系。

    面板状态为轮播图1时,对应圆点1;面板状态为轮播图2时,对应圆点2;面板状态为轮播图3时,对应圆点3。

    点击轮播面板,在属性中双击【状态改变时】,【添加条件】,点击确定。条件状态设置如下:

    添加【选中】动作,选择椭圆1,点击确定。如下图:

    重复以上操作两次,条件为面板状态==轮播图2时,选中椭圆2;条件为面板状态==轮播图3时,选中椭圆3。如下图:

    ③点击圆点时展示对应图片,以及图片进入、退出方式的设置。

    点击椭圆1,双击【鼠标点击事件】,【设置面板状态】,选择【轮播图1】,选择动画方式。如下图:

    ④点击圆点出现对应图片后,需要循环展示图片,所以还需加上以下步骤。

    点击【设置面板】,选择【NEXT】状态,设置循环效果,如下图:

    对椭圆2、椭圆3进行同样的动作设置(椭圆2选择状态为轮播图2,椭圆3选择状态为轮播图3。)。

    (3)上一张/下一张操作

    ①点击向左按钮时,展示前一张图片。如果当前图片为第一张轮播图,则点击向左,出现第三张轮播图。

    【设置面板状态】,选择状态【轮播图3】,设置动画状态,如下图:

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    ②如果当前轮播图不是第一张图片,则显示前一张图片。

    选择【向左】元件,【鼠标单击事件】添加用例,添加条件,面板状态不等于轮播图1时,如下图:

    【设置面板状态】,勾选【轮播图面板】,选择【Previous】状态,设置动画。

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    ③点击向右按钮,出现下一张图片。如果当前图片为第三张轮播图,点击下一张,出现第一张图片。

    【设置面板状态】,选择状态【轮播图1】,设置动画状态,如下图:

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    ④如果当前图片不是第三张轮播图,点击向右按钮,出现下一张图片。

    选择【向右】元件,【鼠标单击事件】添加用例,添加条件,面板状态不等于轮播图3时,如下图:

    【设置面板状态】,勾选【轮播图面板】,选择【NEXT】状态,设置动画,如下图:

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    通过以上步骤,就可以在Axure中完成轮播图的制作啦。点击预览,即可看到轮播图的效果了~

    后续笔者会更新一系列Axure制作步骤详解。

    文件分享:http://pan.baidu.com/s/1jIAD2Vc ,密码:272m

    本文由 @ Olga93 原创发布于人人都是产品经理。未经许可,禁止转载。返回搜狐,查看更多

    责任编辑:

    展开全文
  • 简单的轮播图制作

    2020-08-15 10:41:33
    简单的轮播图制作 代码如下: html布局部分 css修饰部分 js部分代码 简单搭建就可以做一个轮播图了,但是文档里面引入的有tween.js部分主要作用是用来改变轮播的速度。

    简单的轮播图制作

    实际效果
    代码如下:
    html布局部分
    框架搭起来

    css修饰部分

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    js部分代码
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    简单搭建就可以做一个轮播图了,但是文档里面引入的有tween.js部分主要作用是用来改变轮播的速度。

    展开全文
  • 现在页面制作越来越便捷,制作轮播图也很简单。下面是轮播图的截图:一共有四页,这是其中的两页,下面让我们来看看代码: //这里引入jquery和bo0tstrap框架,是写代码更加简单便捷,也需要导入深css样式,不然轮播...

    现在页面制作越来越便捷,制作轮播图也很简单。

    下面是轮播图的截图:

    2441d7f0a335c5d160326c1bd5aa0ea4.png

    f86d3d6bbedf26ac94b8f3686db41969.png

    一共有四页,这是其中的两页,下面让我们来看看代码:

      //这里引入jquery和bo0tstrap框架,是写代码更加简单便捷,也需要导入深css样式,不然轮播图会出问题。

    展开全文
  • 轮播图制作(1)

    2020-03-10 23:38:04
    轮播图制作 <body> <div> <img src="img/1.jpg" class="imgs" alt=""> <a href="#" class="left"><</a> //此处的箭头也可以用图标做出来 <a href="#" class="right"&g...
  • banner轮播图制作

    2020-02-08 12:03:32
    之前做过几次banner的轮播图在后期都发现了一些问题,所以这次更新了最新版元素js制作轮播图的方法,效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...
  • html css+js实现轮播图制作 以及图片下方的文字描述部分一同轮播 可 自动切换 手动切换 效果图是对5张图片进行轮播的,点击左右箭头可以实现手动切换呦ヾ(≧▽≦*)o! 鼠标悬停在画面上时会停止轮播,已开后继续播放...
  • 很多电商、知识付费、运动类产品的首页位置都会通过轮播图的方式来展示重点推荐的内容,方便用户最快触达信息,对产品数据增长起到重要作用,接下来讲解下如何使用Axure呈现该原型。先看效果:我们先对整个流程进行...
  • 淘宝店铺首页全屏轮播图制作 | 浏览:1081 | 更新:2014-09-27 12:03 | 标签:淘宝 很多朋友都想要做全屏轮播图,接下来我来说说我的经验 工具/原料 美图秀秀 ...
  • JQuery轮播图制作

    2019-06-10 22:54:00
    鼠标移出时图片自动轮播  2.鼠标移入时图片暂停轮播  3.根据点击左、右按钮时图片显示上一张、下一张  4.显示小圆点对应显示图片 准备:  1.图片多张  2.jquery-1.12.4.min.js htm部分: <div ...
  • Jquery轮播图制作

    千次阅读 多人点赞 2015-12-30 10:45:44
    前言:网站是否让人感觉高端大气上档次,最重要的就是轮播图,所以做好轮播图尤为重要!以前要做图片轮播效果的时候,总是在网上找固定的模板复制粘贴进去,但是网上找来的资料总是有很多冗余的东西,而且不够精简,...
  • 简易轮播图制作

    2019-05-05 14:36:53
    其实这不能算是严格意义上的轮播图,我是借用了DOM HTML来解决的,只有个样子,但是对于新手来说,比较容易做出来,而且不难学` -----------------------HTML内容-------------------------------------------------...
  • 呼吸轮播图制作原理

    2018-10-08 20:11:17
    呼吸轮播图 轮播图:carousel 呼吸轮播图变种布局重点:所有的图片摞一起。 jquery选择元素的能力非常好,但是我们习惯将用到的元素,提前保存到变量。通常我们使用id选中元素。一般我们以$box。 左右按钮防流氓的...
  • 滚动轮播图制作原理

    2018-10-09 21:58:13
    滚动轮播图 滚动轮播图布局关键:是所有图片并排在一起,所以unit的宽要足够宽。 克隆第一张图片追加到最后一张 右按钮拉动策略:先拉动,再瞬移 左按钮拉动策略:先瞬移,再拉动 与呼吸轮播图一样,需要做防流氓...
  • Axure-轮播图制作

    2018-12-30 22:22:18
    视频1-5值得观看-讲解了网页轮播图制作,可以分为以下几步操作:创建一个动态面板并加入面板状态state1等,在state中加入需要的图片;右边菜单栏编辑交互属性:鼠标点击/页面加载等;设置面板状态(轮播方式,时间...
  • 呼吸轮播图制作

    2020-06-19 18:34:52
    一,技术分析: 1.html, 2.javascript 3.jquery 二,思路分析 html将界面写好,设置好左右按钮,以及图片对应的下标圆点,设置好信号量,信号量的... 三,代码如下: <...meta name="viewport" content="width=device
  • 原生js轮播图制作.zip

    2021-01-31 10:55:43
    适合初学js的同学

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,023
精华内容 809
关键字:

轮播图制作