<!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秒一换轮播（鼠标选中旋转停止定时） ?动画案例
原文地址：https://www.cnblogs.com/ttzzyy/p/7535867.html