欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

HTML基础必学列表

流动图片切换效果制作

 

<!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.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">&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.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">&lt;</a>

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

                   </div>

                  

         </div>

        

</div>

 

</body>

</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h16862.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-01-07 11:09 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。