多张图片从左向右的滚动效果，html 带左右按钮 js
多张图片从左向右的滚动效果，html 带左右按钮 js，//鼠标移走恢复滚动,需要判断原先的移动方向。
多张图片从左向右的滚动效果，html 带左右按钮 js
- <!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 type=”text/css”> - *{
margin:0;
padding:0;
}
#content {
height: 125px;
width: 340px;
border: 1px solid #0000CC;
position:absolute;
top:50px;
left:50px;
}
#the_left {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/left.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo {
background-color: #e1e1e1;
float: left;
height: 125px;
width: 300px;
overflow:hidden;
}
#the_right {
background-color: #eeeeee;
float: left;
height: 125px;
width: 20px;
background-image: url(images/right.jpg);
background-repeat: no-repeat;
background-position: center;
}
#demo1 {
float: left;
height: 125px;
}
#indemo {
float: left;
height: 125px;
width: 1000px;
}
#demo2 {
float: left;
height: 125px;
}
a img{
filter:alpha(opacity=60);
border:0;
}
a:hover img{
filter:alpha(opacity=100);
} - </style>
</head>
<body> - <div id=”content”>
<div id=”the_left”></div>
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img src=”yuchai.gif”/></a>
<a href=”#”><img src=”yuchai.gif”/></a>
<a href=”#”><img src=”yuchai.gif”/></a>
<a href=”#”><img src=”yuchai.gif”/></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<div id=”the_right”></div>
</div>
<script>
var flag;
var MyMar_left;
var MyMar_right;
var speed=5;
var demo=document.getElementById(“demo”);
var demo1=document.getElementById(“demo1”);
var demo2=document.getElementById(“demo2”);
var button_left=document.getElementById(“the_left”);
var button_right=document.getElementById(“the_right”);
//将demo1的内容赋值给demo2，实现无缝隙滚动
demo2.innerHTML=demo1.innerHTML;
//向左滚动方法
function Marquee_left(){
flag=0;
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth;
}else{
demo.scrollLeft++;
}
}
//向右滚动方法
function Marquee_right(){
flag=1;
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth;
else{
demo.scrollLeft–;
}
}
//左边按钮
button_left.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval(“Marquee_left()”,speed);
};
//右边按钮
button_right.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval(“Marquee_right()”,speed);
};
//鼠标放在图片上体制滚动
demo.onmouseover=function(){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
};
//鼠标移走恢复滚动,需要判断原先的移动方向
demo.onmouseout=function(){
if(flag==0){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_left=setInterval(“Marquee_left()”,speed);
}if(flag==1){
clearInterval(MyMar_left);
clearInterval(MyMar_right);
MyMar_right=setInterval(“Marquee_right()”,speed);
}
}; - </script>
</body>
</html>
更新时间： 2022-09-08
本文地址：https://www.lzb6.com/website/program/135.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！
