JS框架_(coolShow.js)图片旋转动画特效

百度云盘　　传送门　　密码：ble6

coolShow.js插件图片旋转动画效果

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>coolShow.js插件图片旋转动画特效</title>
<link href="css/coolShow.css" rel="stylesheet" type="text/css" />

<style>
p {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(-50%);
  font-size: 40px;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 50px black;
  text-transform: capitalize;
  font-family: 'Roboto','Helvetica','Arial',sans-serif;
  letter-spacing: 5px;
}
</style>

</head>

<p>Gary</p>

<!-- 代码部分begin -->
<body style = "background:#ecf0f1;">
<div class = "main">
    <div id = "coolShow"></div>
    <div id = "handBar"></div>
</div>
<script src = "js/jquery-1.7.2.min.js"></script>
<script src = "js/coolShow.js"></script>
<script>
/*
定义需要展示的图片以及图片的展示时间
*/
$(document).ready(function() { 
    $('#coolShow').coolShow({
        imgSrc:['images/1.png','images/2.png','images/3.png'],
        speed:40
    });
});
</script>
<!-- 代码部分end -->
</body>
</html>

index.html