花荣老师的博客

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
* jQuery实现 幻灯片
* @author MoXie SysTem128@GMail.Com
* @edited by 花荣 www.masalife.com
*
* IE6,7 Firefox2.0 Opera 9.25 测试通过
* 初始参数详见 getTrigger() 注释
* 方法集
* 1,prev() 上一帧
* 2,next() 下一帧
* 3,jump(frameNo) 跳到帧 frameNo:帧 (以0起始)
* 4,stop() 停止滚动
* 5,goOn() 继续滚动
**/
var marqueeBox = {
    // 当前Box对象
    "jBox":null,
    //当前位置 integer
    "cFrame":0,
    //当前位置 integer
    "setCFrame":function(cFrame){
        return this.cFrame = cFrame;
    },
    //目标帧 integer
    "targetFrame":0,
    //是否显示记录列表
    "isShowList":false,
    //是否显示记录列表
    "childEleName":"div",
    //是否显示记录列表
    "speed":"slow",
    // 是否跑动
    "isRuning":true,
    "isMouseEven":true,
    "startRun":function(){
        return this.isRuning = true;
    },
    "stopRun":function(){
        return this.isRuning = false;
    },
    // 帧集合
    "getFrameList":function(){
        return jQuery("."+this.frameClass,this.jBox);
    },
    // 帧识别 Class 名
    "frameClass":null,
    // 总帧数 integer
    "getUFrame":function(){
        return this.getFrameList().length;
    },
    // 获取下N帧
    "getNextFrame":function(neNum){
        neNum = (neNum==undefined)?1:neNum;
        var neFrame = this.cFrame+neNum;
        neFrame = (neFrame < this.getUFrame())?neFrame:0;
        return neFrame;
    },
    //获取上N帧
    "getPreFrame":function(prNum){
        prNum = (prNum==undefined)?1:prNum;
        var prFrame = this.cFrame-prNum;
        prFrame = (prFrame>=0)?prFrame:this.getUFrame()-1;
        return prFrame;
    },
    "changeFrame":function(){
        this.getFrameList().css("display","none");
        //        jQuery(this.childEleName+":eq("+this.targetFrame+")",this.getFrameList()).fadeIn(this.speed);
        this.getFrameList().eq(this.targetFrame).fadeIn(this.speed);
        this.setCFrame(this.targetFrame);
    },
    // 上一帧
    "prev" : function(){
        // 获取上帧地址
        this.targetFrame = this.getPreFrame();
        // 换帧
        this.changeFrame();
    },
    // 下一帧
    "next" : function(){
        // 获取下帧地址
        this.targetFrame = this.getNextFrame();
        // 换帧
        this.changeFrame();
    },
    // 跳到帧
    "jump" : function(frameNo){
        if (frameNo < this.getUFrame() && frameNo >= 0)
        {
            // 获取下帧地址
            this.targetFrame = frameNo;
            // 换帧
            this.changeFrame();
        }
    },
    //停止
    "stop" : function(){
        this.stopRun();
    },
    //停止
    "goOn" : function(){
        this.startRun();
    },
    //运行
    "run" : function(){
        if (this.isRuning)
        {
            this.next();
        }
    },
    // 初始化
    "init" : function(jBox,frameClass,childEleName,speed,isRuning,isMouseEven){
        this.jBox = jBox;
        this.frameClass = frameClass;
        // 子集 主元素名
        if (typeof(childEleName) != "undefined")
        {
            this.childEleName = childEleName;
        }
        // 淡出速度
        if (typeof(speed) != "undefined")
        {
            this.speed = speed;
        }
        // 是否自动运行
        if (typeof(isRuning)!="undefined")
        {
            this.isRuning = isRuning;
        }
        // 是否自动运行
        if (typeof(isMouseEven)!="undefined" && isMouseEven!="undefined")
        {
            this.isMouseEven = isMouseEven;
        }
        // 绑定鼠标控制事件
        if (this.isMouseEven){
            this.getFrameList().mouseover(function(){
                marqueeBox.stop();
            });
            this.getFrameList().mouseout(function(){
                marqueeBox.goOn();
            });
        }
    },
    /**
    * 触发器参数
    * 1,boxId 幻灯块 ID
    * 2,timeOut 间隔时间
    * 3,frameClass 帧标识Class名称
    * 4,childEleName 帧标识 元素名称 默认 div
    * 5,speed 帧淡出速度   默认 slow
    * 6,isRuning 是否自动运行 默认 true
    * 7,isMouseEven 是否支持鼠标事件(鼠标在帧上时暂时停止)  默认 true
    * 方法集
    * 1,prev() 上一帧
    * 2,next() 下一帧
    * 3,jump(frameNo) 跳到帧 frameNo:帧 (以0起始)
    * 4,stop() 停止滚动
    * 5,goOn() 继续滚动
    **/
    "getTrigger":function(boxId,timeOut,frameClass,childEleName,speed,isRuning,isMouseEven){
        jBox = jQuery("#"+boxId);
        // 初始化幻灯机
        marqueeBox.init(jBox,frameClass,childEleName,speed,isRuning,isMouseEven);
        // 载入动作
        window.setInterval("marqueeBox.run()",timeOut);
    }
}
</script>  
 
<script type="text/javascript">
    jQuery(document).ready(function(){
        marqueeBox.getTrigger("marq", 2000, "slide", "li", "slow", true,false);
    });
</script>

<style type="text/css">
    .slide{
        display:none;
    }
    .a {
	    float:left;
    }
</style>

<div>
    <ul id="marq">
	    <li class="slide" style="display:block"><img src=1.png width=100 height=100></li>
	    <li class="slide"><img src=2.png width=100 height=100></li>
	    <li class="slide"><img src=3.png width=100 height=100></li>
	    <li class="slide"><img src=4.png width=100 height=100></li>
	    <li class="slide"><img src=5.png width=100 height=100></li>
    </ul>
    <BR>
    <LI class="a"><a href='#' onclick='marqueeBox.stop();marqueeBox.jump(0);marqueeBox.goOn();' style='display:block;margin:1px;background:CYAN'>1   </a></LI>
    <LI class="a"><a href='#' onclick='marqueeBox.stop();marqueeBox.jump(1);marqueeBox.goOn();' style='display:block;margin:1px;background:CYAN'>2   </a></LI>
    <LI class="a"><a href='#' onclick='marqueeBox.stop();marqueeBox.jump(2);marqueeBox.goOn();' style='display:block;margin:1px;background:CYAN'>3   </a></LI>
    <LI class="a"><a href='#' onclick='marqueeBox.stop();marqueeBox.jump(3);marqueeBox.goOn();' style='display:block;margin:1px;background:CYAN'>4   </a></LI>
    <LI class="a"><a href='#' onclick='marqueeBox.stop();marqueeBox.jump(4);marqueeBox.goOn();' style='display:block;margin:1px;background:CYAN'>5   </a></LI>
</div>