今天小慕推荐个简单的实用的js图片滑动效果,非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是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> </head> <body> <style type="text/css"> #demo {background:#FFF;overflow:hidden;border:1px dashed #CCC;width:500px;} #demo img {border:3px solid #F2F2F2;height:90px;} #indemo {float:left;width:800%;} #demo1 {float:left;} #demo2 {float:left;} </style> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="http://www.amuker.com/"><img src="http://www.amuker.com/content/templates/J2/images/randoms/23.jpg" border="0" /></a> <a href="http://www.amuker.com/"><img src="http://www.amuker.com/content/templates/J2/images/randoms/11.jpg" border="0" /></a> <a href="http://www.amuker.com/"><img src="http://www.amuker.com/content/templates/J2/images/randoms/16.jpg" border="0" /></a> <a href="http://www.amuker.com/"><img src="http://www.amuker.com/content/templates/J2/images/randoms/18.jpg" border="0" /></a> <a href="http://www.amuker.com/"><img src="http://www.amuker.com/content/templates/J2/images/randoms/22.jpg" border="0" /></a> <a href="http://www.amuker.com/"><img src="http://www.amuker.com/content/templates/J2/images/randoms/7.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>
---
转载请注明本文标题和链接:《非常实用的JS图片滚动代码(无缝、平滑)》