流动图片切换效果制作

流动图片切换效果制作

 

<!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 massa astumosto Unde omnis iste natus errsit rem aper</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>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 massa astumosto Unde omnis iste natus errsit rem aper</span></div></li>

                                               <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">&lt;</a><a href="#" class="play"><em>stop</em><span>play</span></a> <a href="#" class="next">&gt;</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">&lt;</a>

                            <a href="#" class="button button2" data-type="nextPage">&gt;</a>

                   </div>

                  

         </div>

        

</div>

 

</body>

</html>

推荐阅读