1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>广告轮播</title>
  6.     <script type="text/javascript" src="tzy.js" language="JavaScript"></script>
  7.     <link rel="stylesheet" href="tzy.css" type="text/css">
  8. </head>
  9. <body onload="lunbozantin()">
  10. <div>
  11.     <p><b>我是轮播图片</b></p>
  12.     <img src="1.jpg" alt="lol图片" id="tupian" onMouseOver="stoplunbo()" onMouseOut="lunbozantin()">
  13. </div>
  14. </body>
  15. </html>
  1. *{
  2.     margin:0px;
  3.     padding:0px;
  4. }
  5. div{
  6.     width: 508px;
  7.     height: 330px;
  8.     margin: 100px auto;
  9.     padding: 5px;
  10.     background-color: coral;
  11. }
  12. p{
  13.     width: 528px;
  14.     height: 30px;
  15.     text-align: center;
  16.     font-family: "楷体";
  17.     line-height: 30px;
  18.     font-size: 25px;
  19. }
  20. img{
  21.     width: auto;
  22.     height: auto;
  23.     background-color: deepskyblue;
  24.     -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  25.     /*暂定高宽无变化自动,有变化则为1秒*/
  26.     transition: width 1s, height 1s, transform 1s;
  27. }
  28. img:hover{
  29.     width: auto;
  30.     height: auto;
  31.     transform:rotate(360deg);
  32.     -webkit-transform:rotate(360deg);
  33. }
  1. var arr = new Array("1.jpg","2.jpg","3.jpg","4.jpg");
  2. var count = 1;
  3. var b;
  4. function lunbo() {
  5.     a = document.getElementById("tupian");
  6.     a.src =arr[count];
  7.     count++;
  8.     if(count==4){
  9.         count=0;
  10.     }
  11. }
  12. function stoplunbo(){
  13.     clearInterval(b);
  14. }function lunbozantin() {
  15.     b = setInterval(lunbo,3000);
  16. }

HTML 3秒一换轮播（鼠标选中旋转停止定时） 动画案例的更多相关文章

  1. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  2. js各种特效轮播图，选项卡，放大镜，窗口拖拽，楼层跳转

    // 透明度轮播图 // img:轮播图片 // dot:轮播点 // lbtn:左箭头 // rbtn:右箭头 // banner:轮播盒子 // active:轮播点选中效果类名 // time: ...

  3. JavaScript实现图片轮播组件

    效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...

  4. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  5. 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  6. 聊一聊 bootstrap 的轮播图插件

    今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...

  7. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  8. Bootstrap 轮播插件

    一．轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...

  9. iOS-图片轮播-SDCycleSCrollView的使用

    介绍: SDCycleScrollView 是一款非常强大的轮播图第三方. 轮播流畅,手滑流畅.使用方便.自定义简单. 可以更改pageControl. 一. Demo地址 https://pan.b ...

随机推荐

  1. hdu4704 Sum 2013 Multi-University Training Contest 10 数论题

    Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Subm ...

  2. hdu1166 敌兵布阵

    敌兵布阵 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动 ...

  3. dubbo负载均衡策略及对应源码分析

    在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用.我们还可以扩展自己的负责均衡策略,前提是你已经从一个小白变成了大牛,嘻嘻 1.Random LoadBalance 1 ...

  4. spring框架总结（03）重点介绍（Spring框架的第二种核心掌握）

    1.Spring的AOP编程 什么是AOP?  ----- 在软件行业AOP为Aspect Oriented Programming  也就是面向切面编程,使用AOP编程的好处就是:在不修改源代码的情 ...

  5. 【框架学习与探究之消息队列--EasyNetQ（1）】

    前言 本文欢迎转载,实属原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7603554.html 废话 既然都是废话了,所以大家就可以跳过了,这里是博主有事没事 ...

  6. C# XML序列化

    /// <summary> /// XML序列化为指定对象 /// Author:taiyonghai /// Time:2016-08-22 /// </summary> / ...

  7. 三分钟浅谈TT猫的前端优化

    首先看一张访问TT猫首页的截图: 测试环境为谷歌浏览器,暂且不讨论其它浏览器,截图下方我们可以观察到以下参数: DOMContentLoaded:1.42s | Load:2.31s 以上参数是在CT ...

  8. 给tableView设置headerView时遇到的问题

    在ViewDidLoad里面设置了 self.tableView.tableHeaderView = 自定义的View 然后在模拟器上运行后,发现这个HeaderView挡住了后面的Cell,也就是c ...

  9. python检查IP地址正确性

    一.自动动手,丰衣足食 #encoding=utf-8 import os,sys def check_ip(ipaddr): addr = ipaddr.strip().split('.') #切割 ...

  10. Python系列之内置函数

    内置函数 一.数学运算类: abs(a):求绝对值如果参数是个复数则返回复数的模. a = abs(-1) print(a) >>>1 compilex([real[, imag]] ...