<!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秒一换轮播（鼠标选中旋转停止定时） 动画案例的更多相关文章

  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. js中的||与&&用法

    &&和||在JQuery源代码内尤为使用广泛,由网上找了些例子作为参考,对其用法研究了一下: &&: function a(){ alert("a" ...

  2. 小米2017秋招真题——电话号码分身问题（Java版）

    原题描述如下: 通过对各个数字对应的英文单词的分析,可以发现一些规律: 字母Z为0独占,字母W为2独占,字母U为4独占,字母X为6独占,字母G为8独占: 在过滤一遍0.2.4.6.8后,字母O为1独占 ...

  3. Java EE开发环境——MyEclipse2017破解 和 Tomcat服务器配置

    Java EE开发,我们可以搭建如下开发环境: 底层运行环境:jdk 和 jre. Web服务器:Tomcat 后台数据库:SQL Server 可视化集成开发环境:MyEclipse Java EE ...

  4. 课程作业02（关于Java的几点讨论）

    ---恢复内容开始--- 1.一个Java类文件中真的只能有一个公有类吗? public class Test { public static void main(String[] args) { } ...

  5. ES中const

      前  言 EScript 上一次总结了,ES中let和var的区别,今天在带大家了解另一个声明关键词:const. const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改 ...

  6. cocos2dx - 节点管理

    接上一节内容:cocos2dx - v2.3.3编辑器骨骼动画 本节主要Cocos2dx中节点的管理及应用 一般用法 用过Cocos2dx应该都有用过addChild,removeChild方法.或者 ...

  7. mybatis 和hibernate的区别

    mybaits 是不完全的orm(对象关系映射(Object Relational Mapping)框架,需要自己书写sql语句 mybatis学习难度必hibernate低适合关系型模型要求不高的软 ...

  8. SAP 月结F.19与GR/IR

    http://blog.sina.com.cn/s/blog_3eeba40101008v75.html 为什么要做月结?月结究竟都结些啥? 月结的目的和手段都不知道,只知道一部分.月结,为了出资产负 ...

  9. Python实现采集wordpress整站数据的爬虫

    最近爱上了python,就非常喜欢使用python来练手,在上次的基础上完善一下代码,实现采集wordpress程序的网站的整站数据的爬虫程序,本站也是采用的wordpress,我就拿吾八哥网(htt ...

  10. 浅谈 var 关键字

    提起 var关键子,程序员的第一反应就是JavaScript, 事实上这个关键子在其他语言中也有被采用. 比如说C#, 比如说kotlin, 用法和JavaScript中使用差不多,作为要声明变量的前 ...