图片无缝滚动代码(向左/向下/向上)

您可能感兴趣的文章:

  • 无缝滚动改进版支持上下左右滚动(封装成函数)
  • JS左右无缝滚动(一般方法+面向对象方法)
  • 基于jQuery的图片左右无缝滚动插件
  • jcarousellite.js
    基于Jquery的图片无缝滚动插件
  • Jquery与JS两种方法仿twitter/新浪微博
    高度自适应无缝滚动实现代码
  • 基于jQuery的上下无缝滚动应用(单行或多行)
  • 走马灯效果代码js
    appendChild实现的无缝滚动
  • js 实现无缝滚动 兼容IE和FF
  • 简单的无缝滚动程序-仅几行代码
  • 彻底搞懂JS无缝滚动代码

复制代码 代码如下:

图片上无缝滚动
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
–>
</style>
向上滚动
<div id=”demo”>
<div id=”demo1″>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
</div>
<div id=”demo2″></div>
</div>
<script>
<!–
var speed=10; //数字越大速度越慢
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function()
{clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function()
{MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
–>
</script>
图片下无缝滚动
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
–>
</style>
向下滚动
<div id=”demo”>
<div id=”demo1″>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
</div>
<div id=”demo2″></div>
</div>
<script>
<!–
var speed=10; //数字越大速度越慢
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop–
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function()
{clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function()
{MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
–>
</script>
图片左无缝滚动
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
向左滚动
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<script>
<!–
var speed=10; //数字越大速度越慢
var tab=document.getElementById(“demo”);
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
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
–>
</script>
图片右无缝滚动
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
向右滚动
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
<a href=”#”><img
src=”” border=”0″
/></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<script>
<!–
var speed=10; //数字越大速度越慢
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft–
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
–>
</script>

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和
demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>图片滚动</title>
</head>
<body>
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img src=”/jscss/demoimg/wall_s1.jpg” border=”0″
/></a>
<a href=”#”><img src=”/jscss/demoimg/wall_s2.jpg” border=”0″
/></a>
<a href=”#”><img src=”/jscss/demoimg/wall_s3.jpg” border=”0″
/></a>
<a href=”#”><img src=”/jscss/demoimg/wall_s4.jpg” border=”0″
/></a>
<a href=”#”><img src=”/jscss/demoimg/wall_s5.jpg” border=”0″
/></a>
<a href=”#”><img src=”/jscss/demoimg/wall_s6.jpg” border=”0″
/></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<script>
<!–
var speed=10;
var tab=document.getElementById(“demo”);
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
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
–>
</script>
</body>
</html>

先了解一下对象的几个的属性:
innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight:
获取对象的滚动高度。

非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注