1.轮播图

可实现:

自动轮播(加载完成后调用定时器)、鼠标移入停止(停止定时器)、鼠标移出开始(开始定时器),点击切换(点击事件)

 1 window.onload = function(){
 2     /*轮播图*/
 3     //自动加载
 4     s = setInterval(down,2000);
 5 }
 6 /*控制轮播图的定时器*/
 7 //定义一个变量作为数组下标
 8 var lbnum = 0;
 9 function down(yyNum){
10     //定义一个图片路径数组
11     var lbimgArr = ['../resoures/images/shouye/24401108web1.png','../resoures/images/shouye/2440_1.png','../resoures/images/shouye/412pcshoujiao244011081.png'];
12     //找到图片所在的div
13     var bann = document.getElementById('banner');
14     //找到小圆圈存为数组
15     var yArr = document.getElementsByClassName('xyy');
16     //自动给小圆圈设置样式
17     for(var i = 0;i < yArr.length; i++){
18         yArr[i].style.backgroundPosition = '0px 0px';
19     }
20     if(yyNum == 0 || yyNum == 1 || yyNum == 2){
21         lbStop();
22         yArr[yyNum].style.backgroundPosition = '0px -18px';
23         bann.setAttribute('src',lbimgArr[yyNum]);
24     }else{
25         yArr[lbnum].style.backgroundPosition = '0px -18px';
26         bann.setAttribute('src',lbimgArr[lbnum]);
27         lbnum++;
28         if(lbnum == lbimgArr.length){
29             lbnum = 0;
30         }
31     }
32 }
33 //开始定时器
34 function lbStart(){
35     s = setInterval(down,2000);
36 }
37 //停止定时器
38 function lbStop(){
39     clearInterval(s);
40 }

轮播图代码示例

2.事件流

多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流”。

比如:给一个大的div加鼠标移出事件,只要鼠标放在子级元素上就会被判定为移出。

以下两个都可以添加事件,但是如果与事件流有关,要用Add..

obj.setAttribute('onClick','show()');  //不能取消事件流
obj.addEventListener('click',show());  //可以取消事件流

 1 function appOut(overNum){    //根据情况,可给事件传参
 2     function isMouseLeaveOrEnter(e, handler) {
 3         var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
 4             while (reltg && reltg != handler){
 5              reltg = reltg.parentNode;
 6             }
 7         return (reltg != handler);
 8         }
 9         //找到默认显示的div
10         var div1 = document.getElementsByClassName('onMover')[overNum];
11         //找到默认隐藏的div
12         var div2 = document.getElementsByClassName('divb_t')[overNum];
13         div2.οnmοuseοut=function(ev){
14         var ev=ev||window.event;
15         if(!isMouseLeaveOrEnter(ev,div2)){
16           return false;
17         }
18         div2.style.height = '310px';
19         div2.style.display = 'none';
20         div1.style.opacity = '1';
21         }
22 }    

事件流代码示例

转载于:https://www.cnblogs.com/flypea93/p/8852997.html

功能整合(二):轮播图(可控)、事件流相关推荐

  1. vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)...

    1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...

  2. JS 效果集合(回到顶部、轮播图、瀑布流、图片帧播放)

    回到顶部 <style type="text/css">#btn {width:40px; height:40px; position:fixed; right:65p ...

  3. vue后台系统管理项目-商城轮播图管理功能

    商城轮播图管理功能 功能介绍: 1.轮播图列表分页功能: 2.轮播图添加功能: 3.轮播图编辑功能: 4.轮播图删除功能: 5.轮播图启用禁用功能: 6.轮播图获取排序号功能: 7.轮播图查看详情功能 ...

  4. 置顶带滚动效果_前端面试:如何实现轮播图效果?

    本文将实现如上所示的轮播图.源代码 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E ...

  5. Axure动态面板实现轮播图

    Axure中不乏许多的高级功能,其中轮播图是我们在页面中常见的一个高级功能,轮播图的做法有很多种,但是就我个人而言认为使用动态面板做轮播简单点.今天就让我们来学习一下Axure中动态面板实现轮播图吧. ...

  6. animate用法 js原生_animate动画、原生JS实现轮播图

    写在前面 最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...

  7. 原生js实现轮播图实例教程

    原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...

  8. Web APIs介绍(四)——offset/client/scroll/轮播图/本地存储

    1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...

  9. 《锋迷商城》——首页:轮播图

    <锋迷商城>系列项目 链接: <一> 项目搭建 链接: <二>数据库的创建 链接: <三>业务流程设计 链接: <四>业务流程实现:用户管理 ...

  10. 轮播图制作,详细步骤及 HTML+CSS+JS 完整代码

    1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...

最新文章

  1. ORB-SLAM3系列-多地图管理
  2. HDU 3046Pleasant sheep and big big wolf(切最小网络流)
  3. DDR读写简介及相关
  4. 5.STM32外设都有哪几类寄存器?(详解)
  5. 论文笔记之:RATM: RECURRENT ATTENTIVE TRACKING MODEL
  6. 在Azure安装nginx后反向代理出现的错误
  7. java中 d_Java 中的 syncronized 你真的用对了吗
  8. 【干货】”首个“ .NET Core 验证码组件
  9. 每个产品经理都应该知道的机器学习术语
  10. cygwin使用笔记
  11. 【大型网站运维之道 天道 人道 运维之道】
  12. Virtio: An I/O virtualization framework for Linux
  13. 有一天我突然接到他的电话
  14. android 进程间通信---bind的前世
  15. Java 实验5 T5
  16. html带提示的行号编辑框,文本框中显示行号[兼容IE/FF浏览器}
  17. Lucene2.4.0一般查询结果过滤与排行
  18. ctags linux,ctags --- 每天一个 Linux 命令
  19. java里的文件显示繁体_java保存繁体网页打开后出现乱码
  20. wo-27s管理员账户和密码_“无法使用内置管理员账户打开”应用

热门文章

  1. 怎样能做好百度竞价推广?不妨参考下这篇竞价推广的日常工作流程
  2. 安装sql server 2016 always on配置dtc支持时遇到的问题
  3. 鸟哥的Linux私房菜10.16 vim程序编辑器
  4. [转载]利用@media screen实现网页布局的自适应,@media screen and
  5. percona server修改数据目录datadir为/data/mysql:
  6. 新年新气象,祝所有朋友心想事成
  7. 基于ARP的网络扫描工具netdiscover常用命令集合大学霸IT达人
  8. 数据包编辑工具bittwiste
  9. 缩略图信息提取工具vinetto
  10. 轻量级Web渗透测试工具jSQL