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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
js实现全选和全不选
Jul 28 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php7下的filesize函数
2019/09/30 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
python 类详解及简单实例
2017/03/24 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python实现二维数组输出为图片
2018/04/03 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python 写一个文件分发小程序
2020/12/05 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
个人自我评价分享
2013/12/20 职场文书
旷课检讨书1000字
2014/02/14 职场文书
大学生村官考核材料
2014/05/23 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
天河观后感
2015/06/11 职场文书
呐喊读书笔记
2015/06/30 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
React中的Context应用场景分析
2021/06/11 Javascript