javascript图片向左循环滚动的方法（支持ie6\ie7\ie8\ff\360浏览器的 ）
2个回答
展开全部
<!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=utf-8" />
<title>无标题文档</title>
<style>
.abc{
float:left;
width:100px;
height:20px;
background:#00FF00;
border:1px solid #FF0000;
}
</style>
<script>
var scr;
var dir=0;
var div1;
var div2;
var div3;
var div4;
//向左移动
function scrollleft(){
if(div1.scrollLeft>=div2.scrollWidth){
div1.scrollLeft=0;
scrollleft();
}else{
div1.scrollLeft+=10;
}
}
//停止
function scrollstop(){
clearInterval(scr);
}
//向右移动
function scrollright(){
if(div1.scrollLeft<=0){
div1.scrollLeft=div2.scrollWidth;
}else{
div1.scrollLeft-=10;
}
}
//开始移动
function scrollstart(){
div3.innerHTML=div2.innerHTML;
if(dir==0)
scr=setInterval("left()",200);
else
scr=setInterval("right()",200);
}
function right(){
if(scr)
clearInterval(scr);
dir=1;
div3.innerHTML=div2.innerHTML;
scr=setInterval("scrollright()",200);
}
function left(){
if(scr)
clearInterval(scr);
dir=0;
div3.innerHTML=div2.innerHTML;
scr=setInterval("scrollleft()",200);
}
window.onload=function (){
div1=document.getElementById("div1");
div2=document.getElementById("div2");
div3=document.getElementById("div3");
div4=document.getElementById("div4");
scrollstart();
}
</script>
</head>
<body>
<div id="div1" style="width:500px; overflow:hidden;">
<div id="div4" style="width:2100px;" onmouseover="scrollstop()" onmouseout="scrollstart()">
<div id="div2" style="width:1020px; float:left;">
<div id="mydiv1" class="abc">1</div>
<div id="mydiv2" class="abc">2</div>
<div id="mydiv3" class="abc">3</div>
<div id="mydiv4" class="abc">4</div>
<div id="mydiv5" class="abc">5</div>
<div id="mydiv6" class="abc">6</div>
<div id="mydiv7" class="abc">7</div>
<div id="mydiv8" class="abc">8</div>
<div id="mydiv9" class="abc">9</div>
<div id="mydiv10" class="abc">10</div>
</div>
<div id="div3" style="width:1020px; float:left;"></div>
</div>
</div>
<div>
<input type="button" name="left" id="left" value="向左移动" onclick="left()" />
<input type="button" name="right" id="right" value="向右移动" onclick="right()" />
</div>
</body>
</html>
这没有ff其它的都支持，试试
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.abc{
float:left;
width:100px;
height:20px;
background:#00FF00;
border:1px solid #FF0000;
}
</style>
<script>
var scr;
var dir=0;
var div1;
var div2;
var div3;
var div4;
//向左移动
function scrollleft(){
if(div1.scrollLeft>=div2.scrollWidth){
div1.scrollLeft=0;
scrollleft();
}else{
div1.scrollLeft+=10;
}
}
//停止
function scrollstop(){
clearInterval(scr);
}
//向右移动
function scrollright(){
if(div1.scrollLeft<=0){
div1.scrollLeft=div2.scrollWidth;
}else{
div1.scrollLeft-=10;
}
}
//开始移动
function scrollstart(){
div3.innerHTML=div2.innerHTML;
if(dir==0)
scr=setInterval("left()",200);
else
scr=setInterval("right()",200);
}
function right(){
if(scr)
clearInterval(scr);
dir=1;
div3.innerHTML=div2.innerHTML;
scr=setInterval("scrollright()",200);
}
function left(){
if(scr)
clearInterval(scr);
dir=0;
div3.innerHTML=div2.innerHTML;
scr=setInterval("scrollleft()",200);
}
window.onload=function (){
div1=document.getElementById("div1");
div2=document.getElementById("div2");
div3=document.getElementById("div3");
div4=document.getElementById("div4");
scrollstart();
}
</script>
</head>
<body>
<div id="div1" style="width:500px; overflow:hidden;">
<div id="div4" style="width:2100px;" onmouseover="scrollstop()" onmouseout="scrollstart()">
<div id="div2" style="width:1020px; float:left;">
<div id="mydiv1" class="abc">1</div>
<div id="mydiv2" class="abc">2</div>
<div id="mydiv3" class="abc">3</div>
<div id="mydiv4" class="abc">4</div>
<div id="mydiv5" class="abc">5</div>
<div id="mydiv6" class="abc">6</div>
<div id="mydiv7" class="abc">7</div>
<div id="mydiv8" class="abc">8</div>
<div id="mydiv9" class="abc">9</div>
<div id="mydiv10" class="abc">10</div>
</div>
<div id="div3" style="width:1020px; float:left;"></div>
</div>
</div>
<div>
<input type="button" name="left" id="left" value="向左移动" onclick="left()" />
<input type="button" name="right" id="right" value="向右移动" onclick="right()" />
</div>
</body>
</html>
这没有ff其它的都支持，试试
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
