<!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>