jquery 图片水平滚动代码

最新推荐文章于 2022-11-07 21:29:11 发布

jingmin

最新推荐文章于 2022-11-07 21:29:11 发布

阅读量559

点赞数

分类专栏： javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/jingmin/article/details/19750091

版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>

<style type="text/css"></style>

<script type="text/javascript"><!--
(function($){

$.fn.scrollPic=function(_options){
  var defaults={
   height:"80px",
   width:"800px",
   itemWidht:"80px",
   itemMargin:"4px",
   speed:30
   };
  var opts=$.extend(defaults,_options);
  this.each(function(){
   //设置样式
   var _itemWidth=parseInt(opts.itemWidht)+parseInt(opts.itemMargin)*2;
   var _totalWidth=_itemWidth*$(this).find("li").size();
   var _thisObject=$(this);
   var _scrollStatic=true;
   var _ulObject=_thisObject.find("ul");
   var _itemHeight=parseInt(opts.height)-parseInt(opts.itemMargin)*2;
   _thisObject.css({width:opts.width,height:opts.height,overflow:"hidden"})
   _ulObject.css({width:_totalWidth+"px",margin:"0px",padding:"0px","list-style-type":"none"})
   _ulObject.find("li").css({width:opts.itemWidht,margin:opts.itemMargin,float:"left",height:_itemHeight});
   scrollMain=function(){
    _thisObject.find("ul").animate({"margin-left":"-=2px"},opts.speed,"swing",function(){
     if(! _scrollStatic)
      return;
     var _marginLeft=parseInt(_ulObject.css("margin-left"));
     if(_marginLeft+_itemWidth<0){
      _ulObject.append(_ulObject.find("li:first").clone());
      _ulObject.find("li:first").remove();
      _ulObject.css("margin-left",(_marginLeft+_itemWidth)+"px");
     }
     _timeId=setTimeout(scrollMain,0);
    })
   };
   _thisObject.hover(function(){
    //alert(_timeId);
    clearTimeout(_timeId);
    _scrollStatic=false;

   },function(){
    _timeId=setTimeout(scrollMain,10);
    _scrollStatic=true;
   });
   scrollMain();

  });

}
})(jQuery);

$(function(){
$("#showPic").scrollPic({height:"120px",speed:10});
});

//--></script>
</head>
<body>
<div id="showPic">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
</div>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。