JQuery实现banner图片的轮播效果

浏览数：37 / 时间：2015年06月09日

最近在复习jQuery，发现了一个好用的插件，可以方便地实现很多网站的banner轮播的效果，这个插件就是MyFocus了。

MyFoucus官网：http://demo.jb51.net/js/myfocus/

MyFocus非常小巧，它是一个独立的JS库，不需要依赖任何JS库，用它可以制作出网上可以看到的绝大多数轮播效果。下面就来说说

怎么使用吧：

1、首先到官方下载它的库文件

2、在HTML的script标签中引入MyFocus库文件。

3、在script标签中引入MyFocus的风格文件

4、link引入对应风格文件的样式表

5、在页面当中填充一个图片的列表(必须包含在一个叫pic的div中)

6、script代码：

 

[html] view plaincopy
 
  1. <script type="text/javascript">  
  2.         myFocus.set({  
  3.             id:‘picBox‘  
  4.         })  
  5.     </script>  



 

下面给出完整的head代码：

 

[html] view plaincopy
 
  1. <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>  
  2.     <script src="js/mf-pattern/mF_YSlider.js"></script>  
  3.     <link rel="stylesheet" href="js/mf-pattern/mF_YSlider.css">  
  4.     <script type="text/javascript">  
  5.         myFocus.set({  
  6.             id:‘picBox‘  
  7.         })  
  8.     </script>  

 

 

图片部分代码：

 

[html] view plaincopy
 
    1. <div class="ad" id="picBox">  
    2.         <div class="loading"><img src="images/loading.gif" alt="加载中"></div>  
    3.         <div class="pic">  
    4.             <ul>  
    5.                 <li><img src="images/ad2.jpg" alt=""></li>  
    6.                 <li><img src="images/ad3.jpg" alt=""></li>  
    7.                 <li><img src="images/ad4.jpg" alt=""></li>  
    8.             </ul>  
    9.         </div>  
    10.         </div><!--ad-->   

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 log com 使用 src java http class style 代码 log com 使用 src java http

相关文章

随机文章

您可能还喜欢

您可能还喜欢