HTML 3秒一换轮播(鼠标选中旋转停止定时) 动画案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>广告轮播</title> <script type="text/javascript" src="tzy.js" language="JavaScript"></script> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body onload="lunbozantin()"> <div> <p><b>我是轮播图片</b></p> <img src="1.jpg" alt="lol图片" id="tupian" onMouseOver="stoplunbo()" onMouseOut="lunbozantin()"> </div> </body> </html>
*{ margin:0px; padding:0px; } div{ width: 508px; height: 330px; margin: 100px auto; padding: 5px; background-color: coral; } p{ width: 528px; height: 30px; text-align: center; font-family: "楷体"; line-height: 30px; font-size: 25px; } img{ width: auto; height: auto; background-color: deepskyblue; -webkit-transition: width 1s, height 1s, -webkit-transform 1s; /*暂定高宽无变化自动,有变化则为1秒*/ transition: width 1s, height 1s, transform 1s; } img:hover{ width: auto; height: auto; transform:rotate(360deg); -webkit-transform:rotate(360deg); }
var arr = new Array("1.jpg","2.jpg","3.jpg","4.jpg"); var count = 1; var b; function lunbo() { a = document.getElementById("tupian"); a.src =arr[count]; count++; if(count==4){ count=0; } } function stoplunbo(){ clearInterval(b); }function lunbozantin() { b = setInterval(lunbo,3000); }
HTML 3秒一换轮播(鼠标选中旋转停止定时) 动画案例的更多相关文章
- 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
- js各种特效轮播图,选项卡,放大镜,窗口拖拽,楼层跳转
// 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...
- JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
- 自实现PC端jQuery版轮播图
最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...
- 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- Bootstrap 轮播插件
一.轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...
- iOS-图片轮播-SDCycleSCrollView的使用
介绍: SDCycleScrollView 是一款非常强大的轮播图第三方. 轮播流畅,手滑流畅.使用方便.自定义简单. 可以更改pageControl. 一. Demo地址 https://pan.b ...
随机推荐
- String Problem hdu 3374 最小表示法加KMP的next数组
String Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- Free Goodies UVA - 12260 贪心
Free Goodies Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu [Submit ...
- Angular学习笔记(一)
本文为原创文章,转载请标明出处 目录 架构 模块 组件 模板 元数据 数据绑定 指令 服务 依赖注入 模板与数据绑定 1. 架构 模块 Angular 应用是模块化的,并且 Angular 有自己的模 ...
- python中package注意事项
个人工作中的SSD.Cardreader.Camera.Audio模块文档组织形式如下: RclLib __init__.py RclLegacy.py modules AgilentOp.py Uv ...
- 实战之elasticsearch集群及filebeat server和logstash server
author:JevonWei 版权声明:原创作品 实战之elasticsearch集群及filebeat server和logstash server 环境 elasticsearch集群节点环境为 ...
- ZOJ3508 The War 贪心,最大流
传送门:I Am Here 常规解法是贪心,但是在复习最大流的写法,因此用sap来写的.思路是很好想的 #include<cstdio> #include<cstdlib> # ...
- HDU2036 改革春风吹满地
第一次看到这题果断放弃,毕竟几何白痴,第二次刷没做的题的时候突然想到这个三角形面积的向量法:S=|x1*y2-x2*y1| 但是此题可能是凹多边形,所以不能加绝对值,可以画个凹四边形看看. HDU2 ...
- structs2的核心和工作原理
在学习struts2之前,首先我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Struts设计的第一目标就是使MVC模式应用于web程序设计.在这儿MVC模式的 ...
- 压缩SQLServer数据库日志的一个存储过程
use master --注意,此存储过程要建在master数据库中 go if exists (select * from dbo.sysobjects where id = object_id(N ...
- wpf 中英文版编写
var uriC = new Uri("/YTManage.Language;component/Chinese.xaml", UriKind.Relative); // 得到资源 ...