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 相关文章推荐
js网页版计算器的简单实现
Jul 02 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
layui实现三级导航菜单
Jul 26 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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
微信API接口大全
2015/04/15 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python实现合并两个数组的方法
2015/05/16 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python 导入文件过程图解
2019/10/15 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
详解Python 最短匹配模式
2020/07/29 Python
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
村官学习十八大感想
2014/01/15 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
安装工程师岗位职责
2015/02/13 职场文书
Python if else条件语句形式详解
2022/03/24 Python