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 相关文章推荐
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
express 项目分层实践详解
Dec 10 Javascript
vue-router传参用法详解
Jan 19 Javascript
localstorage实现带过期时间的缓存功能
Jun 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
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
探讨Vue.js的组件和模板
2017/10/27 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python类的用法实例浅析
2015/05/27 Python
python抽象基类用法实例分析
2015/06/04 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Django-migrate报错问题解决方案
2020/04/21 Python
实现向右循环移位
2014/07/31 面试题
技术员岗位职责范本
2015/04/11 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
opencv检测动态物体的实现
2021/07/21 Python
vue实现移动端div拖动效果
2022/03/03 Vue.js
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
解决 redis 无法远程连接
2022/05/15 Redis