<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>大气流动图片切换效果相册js特效代码</title> <meta name="description" content="大气流动图片切换效果相册js特效代码。" /> <meta name="keywords" content="大气,流动图片,切换效果,相册,js特效,特效代码" /> <meta name="author" content="js代码" /> <meta name="Copyright" content="js代码" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/uCarousel.js"></script> <script type="text/javascript" src="js/tms-0.4.1.js" ></script> <!--必要样式--> <link rel="stylesheet" href="css/demo.css" type="text/css" media="all"> <script type="text/javascript"> $(document).ready(function(){
$('.gallery')._TMS({ show:0, pauseOnHover:true, prevBu:'.prev', nextBu:'.next', playBu:'.play', duration:10000, preset:'zoomer', pagination:$('.img-pags').uCarousel({show:10,shift:0}), pagNums:false, slideshow:7000, numStatus:true, banners:'fromRight',// fromLeft, fromRight, fromTop, fromBottom waitBannerAnimation:false, progressBar:'<div class="progbar"></div>' });
}); </script> </head> <body>
<div id="main">
<div class="inside">
<div id="slide"> <div class="gallery"> <ul class="items"> <li><img src="images/900x500_1.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_2.webp" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li> <li><img src="images/900x500_3.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_4.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_5.webp" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li> <li><img src="images/900x500_6.webp" alt="" /><div class="banner"><span>Woluptatem accusantium dolor <li><img src="images/900x500_7.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_8.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_1.webp" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li> <li><img src="images/900x500_2.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_3.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_4.webp" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li> <li><img src="images/900x500_5.webp" alt="" /><div class="banner"><span>Woluptatem accusantium dolor <li><img src="images/900x500_6.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_7.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_8.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_1.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_2.webp" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li> <li><img src="images/900x500_3.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> <li><img src="images/900x500_4.webp" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li> </ul> </div> <a href="#" class="prev"><</a><a href="#" class="play"><em>stop</em><span>play</span></a> <a href="#" class="next">></a> </div><!-- slider end -->
<div class="pag"> <div class="img-pags"> <ul> <li><a href="#"><span><img src="images/70x70_1.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_2.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_3.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_4.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_5.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_6.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_7.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_8.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_1.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_2.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_3.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_4.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_5.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_6.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_7.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_8.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_1.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_2.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_3.webp" alt="" /></span></a></li> <li><a href="#"><span><img src="images/70x70_4.webp" alt="" /></span></a></li> </ul> </div> <a href="#" class="button button1" data-type="prevPage"><</a> <a href="#" class="button button2" data-type="nextPage">></a> </div>
</div>
</div>
</body> </html> |
