所属分类:网页特效-焦点图/幻灯片,动画效果
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="all">
<!--必要样式-->
<link rel="stylesheet" href="demo.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>
$(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>'
});
});
<div class="inside">
<div id="slide">
<div class="gallery">
<ul class="items">
<li><img src="images/900x500_1.jpg" 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.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
<li><img src="images/900x500_3.jpg" 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.jpg" 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.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li>
<li><img src="images/900x500_6.jpg" alt="" /><div class="banner"><span>Woluptatem accusantium dolor massa astumosto Unde omnis iste natus errsit rem aper</span></div></li>
<li><img src="images/900x500_7.jpg" 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.jpg" 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.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
<li><img src="images/900x500_2.jpg" 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.jpg" 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.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li>
<li><img src="images/900x500_5.jpg" alt="" /><div class="banner"><span>Woluptatem accusantium dolor massa astumosto Unde omnis iste natus errsit rem aper</span></div></li>
<li><img src="images/900x500_6.jpg" 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.jpg" 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.jpg" 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.jpg" 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.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
<li><img src="images/900x500_3.jpg" 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.jpg" 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.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_2.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_3.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_4.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_5.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_6.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_7.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_8.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_1.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_2.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_3.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_4.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_5.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_6.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_7.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_8.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_1.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_2.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_3.jpg" alt="" /></span></a></li>
<li><a href="#"><span><img src="images/70x70_4.jpg" 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>