功能整合(二):轮播图(可控)、事件流
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
功能整合(二):轮播图(可控)、事件流相关推荐
- vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
- JS 效果集合(回到顶部、轮播图、瀑布流、图片帧播放)
回到顶部 <style type="text/css">#btn {width:40px; height:40px; position:fixed; right:65p ...
- vue后台系统管理项目-商城轮播图管理功能
商城轮播图管理功能 功能介绍: 1.轮播图列表分页功能: 2.轮播图添加功能: 3.轮播图编辑功能: 4.轮播图删除功能: 5.轮播图启用禁用功能: 6.轮播图获取排序号功能: 7.轮播图查看详情功能 ...
- 置顶带滚动效果_前端面试:如何实现轮播图效果?
本文将实现如上所示的轮播图.源代码 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E ...
- Axure动态面板实现轮播图
Axure中不乏许多的高级功能,其中轮播图是我们在页面中常见的一个高级功能,轮播图的做法有很多种,但是就我个人而言认为使用动态面板做轮播简单点.今天就让我们来学习一下Axure中动态面板实现轮播图吧. ...
- animate用法 js原生_animate动画、原生JS实现轮播图
写在前面 最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
- 原生js实现轮播图实例教程
原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
- Web APIs介绍(四)——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
- 《锋迷商城》——首页:轮播图
<锋迷商城>系列项目 链接: <一> 项目搭建 链接: <二>数据库的创建 链接: <三>业务流程设计 链接: <四>业务流程实现:用户管理 ...
- 轮播图制作,详细步骤及 HTML+CSS+JS 完整代码
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
最新文章
- ORB-SLAM3系列-多地图管理
- HDU 3046Pleasant sheep and big big wolf(切最小网络流)
- DDR读写简介及相关
- 5.STM32外设都有哪几类寄存器?(详解)
- 论文笔记之:RATM: RECURRENT ATTENTIVE TRACKING MODEL
- 在Azure安装nginx后反向代理出现的错误
- java中 d_Java 中的 syncronized 你真的用对了吗
- 【干货】”首个“ .NET Core 验证码组件
- 每个产品经理都应该知道的机器学习术语
- cygwin使用笔记
- 【大型网站运维之道 天道 人道 运维之道】
- Virtio: An I/O virtualization framework for Linux
- 有一天我突然接到他的电话
- android 进程间通信---bind的前世
- Java 实验5 T5
- html带提示的行号编辑框,文本框中显示行号[兼容IE/FF浏览器}
- Lucene2.4.0一般查询结果过滤与排行
- ctags linux,ctags --- 每天一个 Linux 命令
- java里的文件显示繁体_java保存繁体网页打开后出现乱码
- wo-27s管理员账户和密码_“无法使用内置管理员账户打开”应用
热门文章
- 怎样能做好百度竞价推广?不妨参考下这篇竞价推广的日常工作流程
- 安装sql server 2016 always on配置dtc支持时遇到的问题
- 鸟哥的Linux私房菜10.16 vim程序编辑器
- [转载]利用@media screen实现网页布局的自适应,@media screen and
- percona server修改数据目录datadir为/data/mysql:
- 新年新气象,祝所有朋友心想事成
- 基于ARP的网络扫描工具netdiscover常用命令集合大学霸IT达人
- 数据包编辑工具bittwiste
- 缩略图信息提取工具vinetto
- 轻量级Web渗透测试工具jSQL