html 简单图像旋转器（jQuery）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 简单图像旋转器（jQuery）相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Image Rotator (jQuery)</title>
<style>
html {
background-color: #5a5a5a;
}
.rotator {
margin: 30px;
}
.rotator h1 {
color: #fff;
text-align: center;
font: 700 1.2em 'Droid Sans', helvetica, arial, sans-serif;
}
#photo_show {
height:400px;
width:400px;
margin: auto;
}
#photo_show img {
display: block;
width: 400px;
height: 400px;
padding: 4px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
position: absolute;
z-index: 0;
}
#photo_show .previous {
z-index: 1;
}
#photo_show .current {
z-index: 2;
}
</style>
</head>
<body>
<div class="rotator">
<h1 class="text-center">Simple Image Rotator (jQuery)</h1>
<div id="photo_show">
<img src="http://lorempixel.com/400/400/city/1/" alt="Photo City 1" class="current" />
<img src="http://lorempixel.com/400/400/city/2/" alt="Photo City 2" />
<img src="http://lorempixel.com/400/400/city/3/" alt="Photo City 3" />
<img src="http://lorempixel.com/400/400/city/4/" alt="Photo City 4" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js"></script>
<script>
$(function () {
setInterval('rotateImages()', 3000);
});
function rotateImages() {
var currentPhoto = $('#photo_show img.current');
var nextPhoto = currentPhoto.next();
if (nextPhoto.length === 0) {
nextPhoto = $('#photo_show img:first');
}
currentPhoto.removeClass('current').addClass('previous');
nextPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
currentPhoto.removeClass('previous');
}
);
}
</script>
</body>
</html>
以上是关于html 简单图像旋转器（jQuery）的主要内容，如果未能解决你的问题，请参考以下文章