<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片切换
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<style type="text/css">
body{
margin: 0;
}
#scrollimg{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000000;
}
#scrollimg img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="scrollimg">
<img src="http://images.forwallpaper.com/files/images/8/8b77/8b77099e/200241/abstract-color-bokeh-lights-wheels-abstraction-colors-bokeh-light-circles-1920x1080.jpg">
<img src="http://attachments.gfan.com/forum/attachments2/day_111125/111125144842a0f58eb23b7a1e.jpg" style="display: none;">
<img src="http://img2.niutuku.com/desk/130220/21/21-niutuku.com-995.jpg" style="display: none;">
</div>
<script>
$(function() {
var numpic = $('#scrollimg img').size() - 1;
var nownow = 0;
var inout = 0;
var TT = 0;
var SPEED = 5000;
var imgclomns = $('#scrollimg').find('img');
var imgtxt = $('#imgtxt').find('div.pic_info');
function Scroll() {
var LL = nownow - 1;
if (numpic >= 1) {
if (nownow < numpic) {
imgclomns.eq(LL).fadeOut();
imgtxt.eq(LL).hide();
imgclomns.eq(nownow).fadeIn(500);
imgtxt.eq(nownow).fadeIn(800);
nownow++;
} else {
imgclomns.eq(LL).fadeOut();
imgtxt.eq(LL).hide();
imgclomns.eq(nownow).fadeIn(500);
imgtxt.eq(nownow).fadeIn(800);
nownow = 0;
}
} else {
imgclomns.eq(0).fadeIn(700);
imgtxt.eq(0).fadeIn(1000);
window.clearInterval(TT);
}
}
Scroll();
TT = setInterval(Scroll, SPEED);
})
</script>
</body>
</html>
转载于:https://www.cnblogs.com/wteng/p/5395476.html
相关资源：html背景轮播js代码
