javascript实现列表滚动的方法


Posted in Javascript onJuly 30, 2015

本文实例讲述了javascript实现列表滚动的方法。分享给大家供大家参考。具体如下:

index.html如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <link rel="stylesheet" type="text/css" href="css/global.css" />
 <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
 <script type="text/javascript" src="js/scroll_img.js"></script>
 <title>图片列表滚动</title>
</head>
<body>
<div class="scroll_img_wrap clearfix">
 <p class="left_btn"><a href="javascript:void(0)"><img src="images/btn.jpg" /></a></p>
 <div id="scroll_img">
  <ul class="scroll_img_list clearfix">
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information1</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information2</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information3</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information4</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
    <p><a href="#">information5</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
    <p><a href="#">information6</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
    <p><a href="#">information7</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
    <p><a href="#">information8</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information9</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information10</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information11</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information12</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information13</a></p>
   </li>
   <li>
    <p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
    <p><a href="#">information14</a></p>
   </li>
  </ul>
 </div>
 <p class="right_btn"><a href="javascript:void(0)"><img src="images/btn.jpg" /></a></p>
</div>
</body>
<script type="text/javascript">
(function(){
 var test=new scroll_img('scroll_img',150,590,140,10);
 test.initialize();
 $('.left_btn').click(function(){
  test.stop();
  test.left();
  test.autoplay();
 });
 $('.right_btn').click(function(){
  test.stop();
  test.right();
  test.autoplay();
 });
})();
</script>
</html>

scroll_img.js如下:

function scroll_img(target,distance,show_width,li_width,mr){
 this.distance=distance;  //每次移动距离
 this.target=$("#"+target);
 this.show_width=show_width; //显示区域宽度
 this.li_width=li_width;  //items宽度
 this.mr=mr;     //items间距
 this.scrollbar=$("#"+target).find('ul');
 this.position=0;
 this.direction=1;
}
scroll_img.prototype={
 version:1.00,
 author:"yangfeifei",
 date:2011-11-21,
 initialize:function(){
  var t=this;
  t.scrollbar.css('position','relative');
  //初始动作
  t.autoplay();
  t.scrollbar.mouseover(function(){t.stop();});  //鼠标移到图片上停止自动播放
  t.scrollbar.mouseout(function(){t.autoplay();}); //鼠标移出图片开始自动播放
 },
 right:function(){
  var t=this;
  (-t.position)<t.total_length()?t.position-=t.distance:t.position=t.position;
  if((-t.position)<t.total_length()){
   t.scrollbar.animate({left:t.position},500);
   t.direction=1;
  }
  if((-t.position)==t.total_length()){
   t.scrollbar.animate({left:t.position},500);
   t.direction=-1;
  }
 },
 left:function(){
  var t=this;
  (-t.position)>0?t.position+=t.distance:t.position=t.position;
  if((-t.position)>0){
   t.scrollbar.animate({left:t.position},500);
   t.direction=-1;
  }
  if((-t.position)==0){
   t.scrollbar.animate({left:t.position},500);
   t.direction=1;
  }
 },
 total_length:function(){
  var t=this,
  total_num=t.scrollbar.find('li').length;
  return total_num*(t.li_width+t.mr)-(t.mr+t.show_width);
 },
 autoplay:function(){
  var t=this;
  t.setInt=setInterval(function(){
   t.direction==1?t.right():t.left();
  },3000);
 },
 stop:function(){
  var t=this;
  clearInterval(t.setInt);
 }
}

global.css如下:

/*CSS reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:arial,"宋体";}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:bold;}
ol,ul{list-style-type:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}/*font-size:100%;的作用主要是改变它默认的大小,继承父体的字体大小*/
q:before,q:after{content:' ';}
abbr,acronym{border:0;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*主体css*/
.scroll_img_wrap{width:612px;margin: 10px auto;}
 #scroll_img{width:590px;overflow:hidden;float:left;*position:relative;border: 1px #ccc solid;}/*可视区域宽度*/
  .scroll_img_list{width:9999px;}
   .scroll_img_list li{float:left;width:140px;margin-right:10px;}/*items*/
   .scroll_img_list li p{text-align:center;}
   .scroll_img_list li p a{text-decoration:none;color:#666;}
 .left_btn,.right_btn{float:left;}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript 数组的 uniq 方法
Jan 23 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
常用jQuery选择器总结
Jul 11 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
详解Node.JS模块 process
Aug 31 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 #Javascript
javaScript实现滚动新闻的方法
Jul 30 #Javascript
javascript中递归函数用法注意点
Jul 30 #Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 #Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 #Javascript
使用js复制链接中的部分文字的方法
Jul 30 #Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 #Javascript
You might like
缓存技术详谈―php
2006/12/14 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python中引用与复制用法实例分析
2015/06/04 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python制作exe文件简单流程
2019/01/24 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
处罚决定书范文
2015/06/24 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis