您的位置：首页 > Web前端 > JavaScript

最简单的图片轮播--利用myfocus js焦点图库插件

2016-07-06 19:58 711 查看

图片轮播有很多种实现方式，可以借助于第三方插件，也可以手写js代码。这里说的是myfocus js焦点图库。

</pre><p></p><p><span style="font-size: 18px;"><span style="color:rgb(51,51,51); font-family:Verdana,Geneva,sans-serif; line-height:22px">myFocus的标准风格使用，只需简单3步：</span></span></p><p><span style="font-family:Verdana,Geneva,sans-serif; font-size:18px; color:#333333"><span style="line-height:22px">第一步：</span></span></p><p><span style="font-size:18px"><span style="white-space:pre"></span>在html的<head>标签内引入myFocus库文件：<span style="font-size:18px; white-space:pre"><script type="text/javascript" src="js/myfocus-2.0.1.min.js"</span>第二步：</span><span style="white-space:pre"><span style="font-size:18px">创建标准的(myFocus)html结构，并填充你的内容：</span></span></p><p><span style="white-space:pre"><span style="font-size:18px"><span style="white-space:pre"></span></span></span></p><pre code_snippet_id="1748705" snippet_file_name="blog_20160706_2_3998412" name="code" class="html"><span style="white-space:pre">	</span><div id="boxID">
<span style="white-space:pre">			</span><div class="loading">
<span style="white-space:pre">				</span><img src="image/loading.gif" alt="" />
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">			</span><div class="pic">
<span style="white-space:pre">				</span><ul>
<span style="white-space:pre">					</span><li><a href="#"><img src="image/naxin.jpg" thumb=""
<span style="white-space:pre">							</span>text="纳新" /></a></li>
<span style="white-space:pre">					</span><li><a href="#"><img src="image/guzhangbaoxiu.jpg"
<span style="white-space:pre">							</span>thumb="" text="故障报修" /></a></li>
<span style="white-space:pre">				</span></ul>
<span style="white-space:pre">			</span></div>
<span style="white-space:pre">		</span></div>

第三步:

在第一步代码之后的任意一个位置调用(建议在<head>标签结束前调用)

<script type="text/javascript">
myFocus.set({id:'boxID'});
</script>
<script type="text/javascript">
myFocus.set({
id:'boxID',//焦点图盒子ID
pattern:'mF_fancy',//风格应用的名称
time:2,//切换时间间隔(秒)
trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
width:1024,//设置图片区域宽度(像素)
height:465,//设置图片区域高度(像素)
txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});

到此为止，一个轮播图片切换OK了，还有很多的风格。具体的请参考官方demo，地址http://demo.jb51.net/js/myfocus/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 图片轮播 javascript

相关文章推荐

新的分享

章节导航