1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<button id="start">开始</button>
<button id="stop">结束</button>
<div id="show"></div>
<script>
/*
setInterval(code,time)
* 参数
* code - 表示按照指定周期所执行的代码块
* 最简单的实现方式就是回调函数
* time - 表示指定周期，以毫秒为单位
* 返回值 - 作为当前定时器的标识(ID)
* 问题
* 导致第一次执行时，会出现指定时间的延迟
*/
//开始按钮
var start = document.getElementById('start')
var show = document.getElementById('show')
var t
start.addEventListener('click',function(){
showTime()
t = setInterval(showTime, 1000)
})
function showTime(){
var date = new Date()
show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds()
}
//结束按钮
/*
clearInterval(id)
* id - 表示setInterval()方法的返回值
*/
var stop = document.getElementById('stop')
stop.addEventListener('click',function(){
clearInterval(t)
})
</script>
</body>
</html>
原生的定时器，可以解决动画效果
这种通常用class切换状态比较好，一下是两张图片淡入淡出demo。通过js控制一个dom元素的class状态，可以产生想要的过渡动画<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background: #ccc
}
.content{
position: absolute
top: 30%
}
#box1{
position: absolute
border: 1px solid red
transition: all 1s/*过渡时间*/
}
#box2{
position: absolute
border: 1px solid red
transition: all 1s/*过渡时间*/
}
.up{
/*图片向上状态*/
-webkit-transform: translateY(-100%)
transform: translateY(-100%)
opacity: 0
}
.down{
/*图片向下状态*/
-webkit-transform: translateY(100%)
transform: translateY(100%)
opacity: 0
}
</style>
</head>
<body>
<button onclick="fadeInOut()">淡入淡出</button>
<div class="content">
<!--图片1-->
<div id="box1" class=""><img src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/></div>
<!--图片2-->
<div id="box2" class="down"><img src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/w%3D500/sign=c27d4835de3f8794d3ff482ee21a0ead/024f78f0f736afc3290994e8b919ebc4b7451231.jpg"/></div>
</div>
<script>
function fadeInOut(){
console.log(1)
document.getElementById("box1").className="up"
document.getElementById("box2").className=""
}
</script>
</body>
</html>
