您当前的位置是:首页-JQuery

JQ手动滚动插件

【发表于】:2011/5/5 18:05:00  已被访问:577次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手动滚动插件</title>
<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, p, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, button, input, textarea, img, blockquote, th, td { margin:0; padding:0; }
a { text-decoration:none; }
ul, ol { list-style:none; }
img { border:none; }
#warpper{width:653px;
         height:auto;
   overflow:hidden;
   margin:0 auto;}
#main{ width:592px;
       height:120px;
    overflow:hidden;
    float:left;
    margin:20px auto;
    position:relative; }
#content{
             height:120px;
    overflow:hidden; }
#content ul{ 
             height:120px;
    overflow:hidden;}
#content ul li {  float:left; margin:10px 0px; text-align:center; width:146px;  }
.prev,.next { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer;  background-position:0 -400px; margin-top:60px;}
.next{ width:31px; float:right; background-position:-30px -400px; }

</style>
<script type="text/Javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/Javascript">
/*说明:
以下是插件默认值,都为空 
$.fn.adfocus.defaults = {
     auto: "",  //自动播放  true为自动播放,false为不自动播放;
  imgbox: "", //图片层;
  leftbtn: "", //左侧按钮;
  rightbtn: "",  //右侧按钮;
  num: "", //总图片数量
  timer: "" // 时间间隔
 
  第二次做的插件,无缝滚动图!共享给大家一起探讨!
  注意是,ul一定要设置宽度,不然IE不会有动画的效果!
  本次动画是根据li标签的宽度移动,所以样式里请设置好li标签宽度!
 
  注意: 总图片数量必须大于显示图片数量2个,比如显示图片数量是4个,那总图片必须大于6个,这样才能实现左右都无缝滚动无缝滚动!
    如果只实现向左自动无缝滚动,只需要设置5个!
  
  转载请注明出处*********
  作者:颓废小魔
  QQ: 305009858    谢绝不良访问!
  MSN:lwqiang1988@hotmail.com
 
};*/
$.fn.imgauto = function (options) {
    var opts = $.extend($.fn.imgauto.defaults, options);
    return this.each(function () {
        var scrollTimer;
  var lbtn=$(opts.leftbtn); //左侧按钮
  var rbtn=$(opts.rightbtn); //右侧按钮
  var imgListbox=$(opts.imgbox); //图片层
  var imglistAuto=imgListbox.children();
  var imglistWidth = imglistAuto.children().width(); // 图片层字节点的宽度
  imgListbox.css({width: imglistWidth*opts.num,
         "margin-left": -imglistWidth}).children().children().last().prependTo(imglistAuto);
  if(opts.auto=="true"){
    function mytimer(){
   scrollTimer = setInterval(function(){
       left();                           //页面自动滚动函数
     }, opts.timer );}
   
    mytimer(); //调用函数,使页面一开始就滚动
   imglistAuto.hover(function(){clearInterval(scrollTimer);},
            function(){mytimer();})
   rbtn.hover(function(){
        clearInterval(scrollTimer);    //点击后清除计时器
        rbtn.click(function(){
                 rightclick();
                        });
        
        },function(){
         mytimer();
         
         });
   lbtn.hover(function(){
        clearInterval(scrollTimer);
        lbtn.click(function(){
                 leftclick();
                        });
        },function(){
         mytimer();
         });
  
   }
 
//自动播放为FALSE 执行以下
 if(opts.auto=="false"){
        lbtn.click(function(){
       leftclick();
       });
  rbtn.click(function(){
       rightclick();
       });
  };
  
function leftclick(){
       if(!imglistAuto.is(":animated")){     //判断是否处于动画状态
       left();
       }
      
}
function rightclick(){
                      if(!imglistAuto.is(":animated")){
        right();
        }
}
//左侧滚动函数
   function left(){
   
  imglistAuto.animate({"margin-left" : -imglistWidth +"px" },600,function(){
         imglistAuto.css({marginLeft:0}).children().first().appendTo(imglistAuto); //appendTo能直接移动元素
   }
   );
   
    }  
   
//右侧滚动函数
   function right(){
     imglistAuto.animate({"margin-left" : +imglistWidth +"px" },600,function(){
         imglistAuto.css({marginLeft:0}).children().last().prependTo(imglistAuto); //appendTo能直接移动元素
   }
   );
    }        
    });
};

//以下是插件默认值,都为空 
$.fn.imgauto.defaults = {
  auto: "",  //自动播放;
  imgbox: "", //图片层;
  leftbtn: "", //左侧按钮;
  rightbtn: "",  //右侧按钮;
  num: "", //总图片数量
  timer: "" // 时间间隔
};
//以下是插件调用 赋值
$(function () {

    $("#warpper").imgauto({
        auto: "true",  //自动播放;
    imgbox: "#content", //图片层;
    leftbtn: ".prev", //左侧按钮;
    rightbtn: ".next", //右侧按钮;
    num: "6", //总图片数量
    timer: "1000" // 时间间隔
    });
})

</script>

</head>

<body>
<div id="warpper">
<span class="prev"></span>
 <div id="main"> <!--滚动主体部分-->
 <div id="content">
  <ul >
   <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a></li>
   <li><a href="#"><img src="img/02.jpg" alt="海贼王" /></a></li>
   <li><a href="#"><img src="img/03.jpg" alt="海贼王" /></a></li>
   <li><a href="#"><img src="img/04.jpg" alt="海贼王" /></a></li>
   <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a></li>
   <li><a href="#"><img src="img/02.jpg" alt="海贼王" /></a></li>
  </ul>
  </div>
 </div><!--滚动主体部分end-->
 <span class="next"></span>
</div>

</body>
</html>

 
上下篇: JQuery+CSS实现当前页(导航) jquery用ul模拟表单Select列表菜单效果

最新推荐信息