用按钮控制图片左右滚动

用按钮控制图片左右滚动

 用按钮控制图片左右滚动,默认不会滚动的

演示 XML/HTML Code<div class="layout">  
    <div class="hotPic">  
        <div class="JQ-slide">  
            <div class="JQ-slide-nav"><a class="prev" href="javascript:void(0);">‹</a><a class="next" href="javascript:void(0);">›</a></div>  
            <div class="wrap">  
                <ul class="JQ-slide-content imgList">  
                    <li>  
                        <a href="#" class="img"><img src="../erlianhaote.png" width="140" height="100" /></a>  
                        <a href="#" class="txt">二连浩特</a>  
                    </li>  
                    <li>  
                        <a href="#" class="img"><img src="../dalian.jpg" width="140" height="100" /></a>  
                        <a href="#" class="txt">大连</a>  
                    </li>  
                    <li>  
                        <a href="#" class="img"><img src="../sanya.jpg" width="140" height="100"  /></a>  
                        <a href="#" class="txt">三亚</a>  
                    </li>  
                    <li>  
                        <a href="#" class="img"><img src="../dandong.png" width="140" height="100"  /></a>  
                        <a href="#" class="txt">丹东</a>  
                    </li>  
                    <li>  
                        <a href="#" class="img"><img src="../zhoushan.jpg" width="140" height="100" /></a>  
                        <a href="#" class="txt">中山</a>  
                    </li>  
                    <li>  
                        <a href="http://www.freejs.net" class="img"><img src="../freejs.jpg" width="140" height="100"  /></a>  
                        <a href="#" class="txt">freejs</a>  
                    </li>  
                    <li>  
                        <a href="#" class="img"><img src="../mohe.png" width="140" height="100"  /></a>  
                        <a href="#" class="txt">漠河</a>  
                    </li>  
                </ul>  
            </div>  
        </div>  
    </div>    
</div>    
 JavaScript Code<script type="text/javascript">  
$(function (){  
      
    /* 用按钮控制图片左右滚动 */  
    $(".hotPic .JQ-slide").Slide({  
        effect:"scroolLoop",  
        autoPlay:false,  
        speed:"normal",  
        timer:3000,  
        steps:1  
    });  
      
});  
</script>  
除了jq库以外，还用了slide.js JavaScript Code/** 
 * @author ͷ 
 */  
(function($){  
    $.fn.Slide=function(options){  
        var opts = $.extend({},$.fn.Slide.deflunt,options);  
        var index=1;  
        var targetLi = $("." + opts.claNav + " li", $(this));//Ŀ  
        var clickNext = $("." + opts.claNav + " .next", $(this));//һť  
        var clickPrev = $("." + opts.claNav + " .prev", $(this));//һť  
        var ContentBox = $("." + opts.claCon , $(this));//Ķ  
        var ContentBoxNum=ContentBox.children().size();//Ԫظ  
        var slideH=ContentBox.children().first().height();//Ԫظ߶ȣ൱ڹĸ߶  
        var slideW=ContentBox.children().first().width();//Ԫؿȣ൱ڹĿ  
        var autoPlay;  
        var slideWH;  
        if(opts.effect=="scroolY"||opts.effect=="scroolTxt"){  
            slideWH=slideH;  
        }else if(opts.effect=="scroolX"||opts.effect=="scroolLoop"){  
            ContentBox.css("width",ContentBoxNum*slideW);  
            slideWH=slideW;  
        }else if(opts.effect=="fade"){  
            ContentBox.children().first().css("z-index","1");  
        }  
          
        return this.each(function() {  
            var $this=$(this);  
            //  
            var doPlay=function(){  
                $.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);  
                index++;  
                if (index*opts.steps >= ContentBoxNum) {  
                    index = 0;  
                }  
            };  
            clickNext.click(function(event){  
                $.fn.Slide.effectLoop.scroolLeft(ContentBox, targetLi, index, slideWH, opts,function(){  
                    for(var i=0;i<opts.steps;i++){  
                        ContentBox.find("li:first",$this).appendTo(ContentBox);  
                    }  
                    ContentBox.css({"left":"0"});  
                });  
                event.preventDefault();  
            });  
            clickPrev.click(function(event){  
                for(var i=0;i<opts.steps;i++){  
                    ContentBox.find("li:last").prependTo(ContentBox);  
                }  
                ContentBox.css({"left":-index*opts.steps*slideW});  
                $.fn.Slide.effectLoop.scroolRight(ContentBox, targetLi, index, slideWH, opts);  
                event.preventDefault();  
            });  
            //Զ  
            if (opts.autoPlay) {  
                autoPlay = setInterval(doPlay, opts.timer);  
                ContentBox.hover(function(){  
                    if(autoPlay){  
                        clearInterval(autoPlay);  
                    }  
                },function(){  
                    if(autoPlay){  
                        clearInterval(autoPlay);  
                    }  
                    autoPlay=setInterval(doPlay, opts.timer);  
                });  
            }  
              
            //Ŀ¼  
            targetLi.hover(function(){  
                if(autoPlay){  
                    clearInterval(autoPlay);  
                }  
                index=targetLi.index(this);  
                window.setTimeout(function(){$.fn.Slide.effect[opts.effect](ContentBox, targetLi, index, slideWH, opts);},200);  
                  
            },function(){  
                if(autoPlay){  
                    clearInterval(autoPlay);  
                }  
                autoPlay = setInterval(doPlay, opts.timer);  
            });  
        });  
    };  
    $.fn.Slide.deflunt={  
        effect : "scroolY",  
        autoPlay:true,  
        speed : "normal",  
        timer : 1000,  
        defIndex : 0,  
        claNav:"JQ-slide-nav",  
        claCon:"JQ-slide-content",  
        steps:1  
    };  
    $.fn.Slide.effectLoop={  
        scroolLeft:function(contentObj,navObj,i,slideW,opts,callback){  
            contentObj.animate({"left":-i*opts.steps*slideW},opts.speed,callback);  
            if (navObj) {  
                navObj.eq(i).addClass("on").siblings().removeClass("on");  
            }  
        },  
          
        scroolRight:function(contentObj,navObj,i,slideW,opts,callback){  
            contentObj.stop().animate({"left":0},opts.speed,callback);  
              
        }  
    }  
    $.fn.Slide.effect={  
        fade:function(contentObj,navObj,i,slideW,opts){  
            contentObj.children().eq(i).stop().animate({opacity:1},opts.speed).css({"z-index": "1"}).siblings().animate({opacity: 0},opts.speed).css({"z-index":"0"});  
            navObj.eq(i).addClass("on").siblings().removeClass("on");  
        },  
        scroolTxt:function(contentObj,undefined,i,slideH,opts){  
            //alert(i*opts.steps*slideH);  
            contentObj.animate({"margin-top":-opts.steps*slideH},opts.speed,function(){  
                for( var j=0;j<opts.steps;j++){  
                    contentObj.find("li:first").appendTo(contentObj);  
                }  
                contentObj.css({"margin-top":"0"});  
            });  
        },  
        scroolX:function(contentObj,navObj,i,slideW,opts,callback){  
            contentObj.stop().animate({"left":-i*opts.steps*slideW},opts.speed,callback);  
            if (navObj) {  
                navObj.eq(i).addClass("on").siblings().removeClass("on");  
            }  
        },  
        scroolY:function(contentObj,navObj,i,slideH,opts){  
            contentObj.stop().animate({"top":-i*opts.steps*slideH},opts.speed);  
            if (navObj) {  
                navObj.eq(i).addClass("on").siblings().removeClass("on");  
            }  
        }  
    };  
})(jQuery);  
 
原文地址:http://www.freejs.net/article_jquerytupiantexiao_62.html