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

站长资源 2024/11/24 佚名

2 0 1

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

复制代码代码如下:
<!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>

图片,无缝,滚动

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“JS图片无缝滚动(简单利于使用)”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

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

jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例

js二级地域选择的实现方法

评论“JS图片无缝滚动(简单利于使用)”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接