JavaScript图片无缝轮播代码

概述innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWid 䚈௮加௧뙋௬5099,[置顶] iOS 学习资料整理x;ퟘ
Ÿএퟨ௪陻௯5072AndroID开机启动过程分析䥔
䚈௮加௧ >//

//  VIEwController.swift

INNERHTML:    设置或获得位于对象起始和结束标签内的 HTML

scrollHeight: 获得对象的转动高度。
scrollleft:   设置或获得位于对象左侧界和窗口中目前可见内容的最左端之间的距离
scrolltop:    设置或获得位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWIDth: 获得对象的转动宽度
offsetHeight: 获得对象相对版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetleft:   获得对象相对版面或由 offsetParent 属性指定的父坐标的计算左边位置
offsettop:    获得对象相对版面或由 offsettop 属性指定的父坐标的计算顶端位置
offsetWIDth: 获得对象相对版面或由父坐标 offsetParent 属性指定的父坐标的宽度

-----------------------------------------------------------------------

图片向上无缝转动

代码


<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="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" 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="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" 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)};//鼠标移开时重设定时器
-->
</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="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" 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="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" 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)};
-->
</script>

总结

以上是内存溢出为你收集整理的JavaScript图片无缝轮播代码全部内容，希望文章能够帮你解决JavaScript图片无缝轮播代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。