myFocus焦点图插件

2024-10-16 21:10:11

注意

1.焦点图初始化ID和图片最外层ID保持一致

2.图片列表外面必须包裹一个div，且id必须为pic

http://demo.jb51.net/js/myfocus/tutorials.html

http://demo.jb51.net/js/myfocus/api.html

<script src="js/myfocus-2.0.1.min.js"></script>
<script src="js/mf-pattern/mF_YSlider.js"></script>
<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css">

<script>
　　myFocus.set({
　　　　id:'picBox'
　　　　pattern:'mF_YSlider'//样式

　　})
</script>

<div class="ad" id="picBox">

　　<div class="loading">
　　　　<img src="data:images/loading.gif">
　　</div>

<div class="pic">
　　　　<ul>
　　　　　　<li><img src="data:images/ad2.jpg"></li>
　　　　　　<li><img src="data:images/ad3.jpg"></li>
　　　　　　<li><img src="data:images/ad4.jpg"></li>
　　　　</ul>
　　</div>
</div>

ps：样式设计的时候要把多余的部分隐藏

使用overflow的时候要设置宽度

.ad{
　　height: 280px;
　　width: 100%;
　　overflow: hidden;
}

最新文章

热门文章