JS图片无缝滚动(简单利于使用)


Posted in Javascript onJune 17, 2013

原样复制后,几乎不需要改动就能用了!有问题大家讨论

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚动代码</title>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.left_1{ width:500px; height:100px; margin:0 auto;}
.left_1 ul{}
.left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;}
.left_1 p{ width:50px; he
 100px; line-height:100px;}
.left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;}
</style>
<script language="javascript">
function scrollSZ(con_id,speed,direct){
 var con,items,heightHalf,heightAll;
 var timer;
 speed = parseInt(speed);//获取设置的速度参数
 con = document.getElementById(con_id);
 con.style.overflow = "hidden";
 if(direct == "top"){
  direct = "top";
 }else if(direct == "bottom"){
  direct = "bottom";
 }else{
  direct = "top";
 } con.innerHTML +=con.innerHTML;
 con.innerHTML +=con.innerHTML;
 items = getChildNodes(con);
 if(items.length < 1){
  return;
 }
 heightAll = 0;
 for(var i=0;i<items.length;i++){
  var numTop,numBottom;
  if (!!window.ActiveXObject){
   numTop = items[i].currentStyle["marginTop"];
   numBottom = items[i].currentStyle["marginBottom"];
  }else{
   numTop = document.defaultView.getComputedStyle(items[i],null)["marginTop"];
   numBottom = document.defaultView.getComputedStyle(items[i],null)["marginBottom"];
  }
  numTop = parseInt(numTop);
  numBottom = parseInt(numBottom);
  numTop += numBottom;
  if(numTop >0){
   heightAll += numTop;
  }
  heightAll += items[i].offsetHeight;
 }
 heightHalf = heightAll/2;
 if(direct == "bottom"){
  con.scrollTop = heightHalf;
  timer = setInterval(_scrollBottom,speed); 
 }else if(direct == "top"){
  timer = setInterval(_scrollTop,speed);
 }
 con.onmouseover = function(){
  if(timer){
   clearInterval(timer);
   timer = null;
  }
 };
 con.onmouseout = function(){
  if(!timer){
   if(direct == "top"){
    timer = setInterval(_scrollTop,speed);
   }else if(direct == "bottom"){
    timer = setInterval(_scrollBottom,speed);
   }
  }
 };
 function _scrollTop(){
  if(con.scrollTop < heightHalf){
   con.scrollTop += 2;
  }else{
   con.scrollTop = 0;
  }
 }
 function _scrollBottom(){
  if(con.scrollTop > 0){
   con.scrollTop -= 2;
  }else{
   con.scrollTop = heightHalf;
  }
 }
}
function scrollSP(con_id,speed,direct){
 var con,innerCon,timer,items,widthAll,widthHalf;
 speed = parseInt(speed);
 con = document.getElementById(con_id);
 con.style.overflow = "hidden";
 items = getChildNodes(con);
 if(items.length == 1){
  innerCon = items[0];
 }else{
  return;
 }
 innerCon.innerHTML += innerCon.innerHTML;
 innerCon.innerHTML += innerCon.innerHTML;
 items = getChildNodes(innerCon);
 if(items.length<1){
  return;
 }
 widthAll = 0;
 for(var i=0;i<items.length;i++){
 }
 for(var i=0;i<items.length;i++){
  var numLeft,numRight;
  if (!!window.ActiveXObject){
   items[i].style.styleFloat = "left";
   numLeft = items[i].currentStyle["marginLeft"];
   numRight = items[i].currentStyle["marginRight"];
  }else{
   items[i].style.cssFloat = "left";
   numLeft = document.defaultView.getComputedStyle(items[i],null)["marginLeft"];
   numRight = document.defaultView.getComputedStyle(items[i],null)["marginRight"];
  }
  numLeft = parseInt(numLeft);
  numRight = parseInt(numRight);
  numLeft += numRight;
  if(numLeft>0){
   widthAll += numLeft;
  }
  widthAll += items[i].offsetWidth;
 }
 widthHalf = widthAll/2;
 innerCon.style.width = widthAll+"px";
 if(direct == "left"){
  direct = "left";
 }else if(direct == "right"){
  direct = "right";
 }else{
  direct = "left"
 }
 if(direct == "left"){
  timer = setInterval(_scrollLeft,speed);
 }else if(direct == "right"){
  con.scrollLeft = widthHalf;
  timer = setInterval(_scrollRight,speed);
 }
 con.onmouseover = function(){
  if(timer){
   clearInterval(timer);
   timer = null;
  }
 }
 con.onmouseout = function(){
  if(direct == "left"){
   timer = setInterval(_scrollLeft,speed);
  }else{
   timer = setInterval(_scrollRight,speed);
  }
 }
 function _scrollLeft(){
  if(con.scrollLeft<widthHalf){
   con.scrollLeft += 2;
  }else{
   con.scrollLeft = 0;
  }
 }
 function _scrollRight(){
  if(con.scrollLeft>0){
   con.scrollLeft -= 2;
  }else{
   con.scrollLeft = widthHalf;
  }
 }
}
function getChildNodes(obj){//获取元素子节点
 var childList,list;
 childList = new Array();
 list = obj.childNodes;
 for(var i=0;i<list.length;i++){
  if(list[i].nodeType == 1)
  childList[childList.length] = list[i];
 }
 return childList;
}
</script>
</head>
<body>


<div id="left_1" class="left_1">
 <div class="left_1_i">
  <p>1</p>
     <p>2</p>
     <p>3</p>
     <p>4</p>
     <div>b</div>
     <div>a</div>
 </div>
</div>
<script language="javascript">scrollSP("left_1",10,"right");</script>
</body>
</html>
 
Javascript 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
js二级地域选择的实现方法
Jun 17 #Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 #Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 #Javascript
js特效,页面下雪的小例子
Jun 17 #Javascript
js弹出窗口之弹出层的小例子
Jun 17 #Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 #Javascript
You might like
理解和运用PHP中的多态性[译]
2011/08/02 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JS判定是否原生方法
2013/07/22 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
解决DataFrame排序sort的问题
2018/06/07 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
shell的种类有哪些
2015/04/15 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
大学生党课思想汇报
2013/12/29 职场文书
理想演讲稿范文
2014/05/21 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技