基于myFocus的简单图片过度效果

基于myFocus的简单的图片淡入淡出过度效果的js幻灯片，带标题和加载动画。myFocus是比较强大，简单易用，易于扩展的js焦点图库，它自带27种幻灯效果，3种自定义幻灯效果。更多关于myFocus可以访问：myFocus js焦点图库 1、引入下面的css和js文件：

<script type="text/javascript" src="js/myfocus.js"></script>
<link href="images/css.css" rel="stylesheet" type="text/css" />

2、在body添加下面的代码：

<div id="myFocus">
    <div class="loading"><span>请稍候...</span></div><!--载入画面-->
    <ul class="pic"><!--内容列表-->
        <li><a href="http://www.5imoban.net/"><img src="images/1.jpg" thumb="" alt="模板网，提供各种网页模板" text="" /></a></li>
        <li><a href="http://www.5imoban.net/"><img src="images/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="" /></a></li>
        <li><a href="http://www.5imoban.net/"><img src="images/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="" /></a></li>
        <li><a href="http://www.5imoban.net/"><img src="images/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="" /></a></li>
    </ul>
</div>

3、调用代码在myFocus.js文件里面，参数详解见下面：

myFocus.setting({
    style:'mF_classicHC',//风格样式
    id:'myFocus',//焦点图ID
    trigger:'click',//按钮切换模式：'click'(点击触发)/'mouseover'(悬停触发,默认有0.1秒延迟，可以自行添加参数'delay:毫秒'设置)
    time:4,//切换图片的时间间隔，单位秒
    txtHeight:26,//文字层高，26为推荐，0为隐藏
    width:380,//宽(大图)，注意:整个焦点图的宽等于或大于图片宽
    height:246//高(大图)，注意同上
});

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！