手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JS图片无缝滚动(简单利于使用)
JS图片无缝滚动(简单利于使用)
摘要:原样复制后,几乎不需要改动就能用了!有问题大家讨论复制代码代码如下:滚动代码*{margin:0;padding:0;}ul,li{list...

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

复制代码 代码如下:

<!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">

<div>

<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>

【JS图片无缝滚动(简单利于使用)】相关文章:

纯javascript实现四方向文本无缝滚动效果

理解javascript定时器中的单线程

JS实现简单路由器功能的方法

创建表格,并添加事件

无间断滚动marquee的详细用法解析

JavaScript中的条件判断语句使用详解

在JavaScript的正则表达式中使用exec()方法

JavaScript实现Flash炫光波动特效

Javascript 字符串模板的简单实现

JS实现浏览器菜单命令

精品推荐
分类导航