失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 一款JS+CSS实现的无缝平滑图片滚动代码

一款JS+CSS实现的无缝平滑图片滚动代码

时间:2019-09-03 21:05:53

相关推荐

一款JS+CSS实现的无缝平滑图片滚动代码

代码简介:

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

代码内容:

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>一款JS+CSS实现的无缝平滑图片滚动代码 - </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="/images/wall1_s.jpg" border="0" /></a>

<a href="#"><img src="/images/wall2_s.jpg" border="0" /></a>

<a href="#"><img src="/images/wall3_s.jpg" border="0" /></a>

<a href="#"><img src="/images/wall4_s.jpg" border="0" /></a>

<a href="#"><img src="/images/wall5_s.jpg" border="0" /></a>

<a href="#"><img src="/images/wall6_s.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>

<br />

<p><a href="">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>

代码来自:/webcode/9b1a6b68-fe17-4b92-a955-bfeff8db386f.html

如果觉得《一款JS+CSS实现的无缝平滑图片滚动代码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。