图片定时右滑左滑

it2022-05-08  18

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><title>图片向右滚动</title><style type="text/css">#demoo {background: #FFF;overflow:hidden;border: 1px ;width: 300px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 1000%;}#demo1 {float: left;}#demo2 {float: left;}</style><script>window.onload = function (){

var speed=1;var tab=document.getElementById("demoo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;

function Marquee(){if(tab.scrollLeft<=0)tab.scrollLeft+=tab1.offsetWidth <!-- 等价于 tab.scrollLeft=tab.scrollLeft-tab1.offsetWidth-->else{tab.scrollLeft--;}}var MyMar=setInterval(Marquee,speed);

tab.οnmοuseοver=function(){ clearInterval(MyMar)};

tab.οnmοuseοut=function(){ MyMar=setInterval(Marquee,speed)};}</script></head><body>

<div id="demoo"><div id="indemo"><div id="demo1"><a><img src="imag1.jpg" width="300" height="500"></a><a><img src="imag2.jpg" width="300" height="500"></a><a><img src="imag3.jpg" width="300" height="500"></a><a><img src="imag4.jpg" width="300" height="500"></a></div><div id="demo2"></div></div></div></body></html>

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><title>图片滚动</title><style type="text/css">#demoo {background: #FFF;overflow:hidden;border: 1px ;width: 300px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 1000%;}#demo1 {float: left;}#demo2 {float: left;}</style><script>window.onload = function (){

var speed=1;var tab=document.getElementById("demoo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;

function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidth <!-- 等价于 tab.scrollLeft=tab.scrollLeft-tab1.offsetWidth-->else{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);

tab.οnmοuseοver=function(){ clearInterval(MyMar)};

tab.οnmοuseοut=function(){ MyMar=setInterval(Marquee,speed)};}</script></head><body>

<div id="demoo"><div id="indemo"><div id="demo1"><a><img src="imag1.jpg" width="300" height="500"></a><a><img src="imag2.jpg" width="300" height="500"></a><a><img src="imag3.jpg" width="300" height="500"></a><a><img src="imag4.jpg" width="300" height="500"></a></div><div id="demo2"></div></div></div></body></html>

转载于:https://www.cnblogs.com/moliwanzi/p/3938992.html

相关资源:垃圾分类数据集及代码

最新回复(0)