原生javascript实现图片自动轮播和点击轮播代码
时间:2020-04-20
本文章向大家介绍原生javascript实现图片自动轮播和点击轮播代码,主要包括原生javascript实现图片自动轮播和点击轮播代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;} .wrap ul{position: absolute;} .wrap ul li{height: 170px;} .wrap ol{position: absolute;right: 10px;bottom: 10px;} .wrap ol li{height: 20px;width: 20px; background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;} .wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;} </style> </head> <body> <!-- wrap包裹录播的图片以及可点击跳转的按钮 --> <div class="wrap" id="wrap"> <ul id="pic"> <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> <script type="text/javascript"> window.οnlοad=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; // 定义并调用自动播放函数 if(timer){ clearInterval(timer); timer=null; } timer=setInterval(autoplay,2000); // 定义图片切换函数 function autoplay(){ index++; if(index>=list.length){ index=0; } changeoptions(index); } // 鼠标划过整个容器时停止自动播放 wrap.οnmοuseοver=function(){ clearInterval(timer); } // 鼠标离开整个容器时继续播放至下一张 wrap.οnmοuseοut=function(){ timer=setInterval(autoplay,2000); } // 遍历所有数字导航实现划过切换至对应的图片 for(var i=0;i<list.length;i++){ list[i].id=i; list[i].οnmοuseοver=function(){ clearInterval(timer); changeoptions(this.id); } } function changeoptions(curindex){ for(var j=0;j<list.length;j++){ list[j].className=''; pic.style.top=0; } list[curindex].className='active'; pic.style.top=-curindex*170+'px'; index=curindex; } } </script> </body> </html>
原文地址:https://www.cnblogs.com/xiewangfei123/p/12735992.html
- Linux下squid代理缓存服务环境部署
- linux下清除Squid缓存的方法记录
- memcached缓存知识简单梳理
- Idea 常用快捷键
- silverlight中如何方便在多个"场景"即Xaml文件之间随意切换?
- 电子签名实现的思路、困难及解决方案
- JavaScript排序算法详解
- 事件处理需小心
- Mysql读写分离方案-MySQL Proxy环境部署记录
- Mysql读写分离方案-Amoeba环境部署记录
- linux系统终端命令提示符设置(PS1)记录
- 从MapX到MapXtreme2004[10]-根据zoom值修改显示范围
- Linq to Sql中Single写法不当可能引起的数据库查询性能低下
- 获得定长字符串
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Openssl实现双向认证教程(附服务端客户端代码)
- centos8使用Docker部署Django项目的详细教程
- ubuntu18.04 安装qt5.12.8及环境配置的详细教程
- 安装Ubuntu20.04与安装NVIDIA驱动的教程
- Ubuntu下安装nvidia显卡驱动(安装方式简单)
- Ubuntu 20.04 apt 更换国内源的实现方法
- Android设计模式之单例模式解析
- Android屏蔽软键盘并且显示光标的实例详解
- Android实现底部缓慢弹出菜单
- Ubuntu20的tzselect设置时间失效的问题,树莓派服务器(推荐)
- 安装Ubuntu 20.04后要做的事(小白教程)
- Ubuntu20.04安装Python3的虚拟环境教程详解
- Android编程实现播放视频时切换全屏并隐藏状态栏的方法
- Android UI设计与开发之仿人人网V5.9.2最新版引导界面
- PopupWindow使用方法详解