摘要:[javascript] 一般网站都有图片左右滚动的特效 下面就是jquery图片滚动插件 

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

[javascript]
一般网站都有图片左右滚动的特效 下面就是jquery图片滚动插件 

一般网站都有图片左右滚动的特效 下面就是jquery图片滚动插件[javascript] view plaincopyprint?jQuery.fn.imageScroller = function(params){ 
    var p = params || { 
        next:"buttonNext", 
        prev:"buttonPrev", 
        frame:"viewerFrame", 
        scrolltime:3000, 
        width:100, 
        child:"a", 
        auto:true 
    };  
    var _btnNext = $("#"+ p.next); 
    var _btnPrev = $("#"+ p.prev); 
    var _imgFrame = $("#"+ p.frame); 
    var _width = p.width; 
    var _height = p.height; 
    var _child = p.child; 
    var _auto = p.auto; 
    var _itv; 
    var _scrolltime=p.scrolltime; 
    var _turndirection=p.turndirection; 
     
    var turnLeft = function(){ 
        _btnPrev.unbind("click",turnLeft); 
        if(_auto) autoStop(); 
        _imgFrame.animate( {marginLeft:-_width}, 'slow', '', function(){ 
            _imgFrame.find(_child+":first").appendTo( _imgFrame ); 
            _imgFrame.css("marginLeft",0); 
            _btnPrev.bind("click",turnLeft); 
            if(_auto) autoPlay(); 
        }); 
    }; 
     
    var turnRight = function(){ 
        _btnNext.unbind("click",turnRight); 
        if(_auto) autoStop(); 
        _imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame ); 
        _imgFrame.css("marginLeft",-_width); 
        _imgFrame.animate( {marginLeft:0}, 'slow' ,'', function(){ 
            _imgFrame.find(_child+":last").remove(); 
            _btnNext.bind("click",turnRight); 
            if(_auto) autoPlay();  
        }); 
    }; 
     
     
    var turnTop = function(){ 
        _btnPrev.unbind("click",turnTop); 
        if(_auto) autoStop(); 
        _imgFrame.animate( {marginTop:-_height}, 'slow', '', function(){ 
            _imgFrame.find(_child+":first").appendTo( _imgFrame ); 
            _imgFrame.css("marginTop",0); 
            _btnPrev.bind("click",turnTop); 
            if(_auto && _turndirection=='turnTop') autoTopPlay(); 
        }); 
    }; 
     
    _btnNext.css("cursor","hand").click( turnRight ); 
    _btnPrev.css("cursor","hand").click( turnLeft ); 
     
    var autoPlay = function(){ 
      _itv = window.setInterval(turnLeft, _scrolltime); 
    }; 
    var autoTopPlay = function(){ 
      _itv = window.setInterval(turnTop, _scrolltime); 
    }; 
    var autoStop = function(){ 
        window.clearInterval(_itv); 
    }; 
    if(_auto && _turndirection=='turnTop') 
    { 
            autoTopPlay(); 
    } 
    else{ autoPlay();} 
}; 
 
 
    $(function() 
    { 
         
         
         $("#tjzt").imageScroller({ 
            frame:"tjzt_ul",  //p 或者ul id号  
            width:310,   //li的宽度  
            child:"li",  //子项目类型  
            auto:true,  //是否自动滚动  
            scrolltime:5000   //每个图片滚动间隔时间  
        });          
    }); 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_8825.html