• 用按钮控制图片左右滚动

  • 发布日期:2013-10-22 19:48:58   作者:piperzero  
  • 用按钮控制图片左右滚动,默认不会滚动的
    \
     
    <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>    
    
    <script type="text/javascript">  
    $(function (){  
          
        /* 用按钮控制图片左右滚动 */  
        $(".hotPic .JQ-slide").Slide({  
            effect:"scroolLoop",  
            autoPlay:false,  
            speed:"normal",  
            timer:3000,  
            steps:1  
        });  
          
    });  
    </script>  
    

    除了jq库以外,还用了slide.js


    /** 
     * @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);  
    

     

热门搜索: 图片  
  • 相关推荐
    • 点击排行