2 sinat 18323561 sinat_18323561 于 2016.01.29 08:40 提问

网页跑马灯的图片切换特效是如何实现的?

网站里跑马灯图片在切换时的特效是如何用JavaScript实现的,求具体的源代码。

5个回答

WinsenJiansbomber
WinsenJiansbomber   2016.01.29 08:46

用脚本可以做,CSS3也可以做了。

showbo
showbo   Ds   Rxr 2016.01.29 08:53
WinsenJiansbomber
WinsenJiansbomber   2016.01.29 08:54
 <!DOCTYPE>
<html>
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="jimbowhy" />
 </head>
 <body>
  <div id="box" style="position:relative;background:pink;width:300px;height:300px;"></div>
  <script type="text/javascript">
  (function(){
    var s = 2;
    var box = document.getElementById("box");
    var l = +box.getAttribute("left");
    l = l<s? 600:l-s;
    box.setAttribute("left",l);
    box.style.left=l+"px";
    setTimeout(arguments.callee, 30);
  })()
  </script>
 </body>
</html>

u014180504
u014180504   2016.01.29 17:16

用JQ插件,自己动手搞一个就知道了,其实就是拿别人的插件用到自己的程序里

91program
91program   Ds   Rxr 2016.01.29 09:07
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
android 跑马灯图片展示+10种切换特效
利用viewpaper 实现跑马灯图片轮换 并可设置10多种动画效果。是从实际项目中抽取出的demo,完整代码导入开发环境就可以运行,仔细查看demo中跑马灯图片有惊喜哦!
网页制作用JavaScript实现不同风格的图片切换效果
用JavaScript实现不同风格的图片切换效果只需简单的几个步骤就可以实现。 主要运用效果资源包。
html中利用js实现简单图片轮换效果
图片轮播 window.onload = function() { flag = 0; obj1 = document.getElementById("slider"); obj2 = document.getElementsByTagName("li"); obj2[0].style.backgroundColo
利用CSS3实现图片切换特效
利用label标签和:checked,并使用到了transform和transition属性。实现简单,相比JS而言,非常方便,且效果更佳,有兴趣可以拷贝代码,修改图片路径,运行看看效果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,
网页标题栏实现走马灯效果
<script type="text/javascript"> var dir="left"; function scroll(){ var title = document.title; if (dir == "left") { var firstch = title.charAt(0); var le
网页中图片切换特效--【绝对有价值】
网页中图片切换特效--【绝对有价值】<br>网页中图片切换特效--【绝对有价值】<br>网页中图片切换特效--【绝对有价值】<br>网页中图片切换特效--【绝对有价值】
js简单实现图片切换效果
js简单实现图片切换效果 body{ margin: 0; padding: 0; } .adbody{ width:100%; height:100%; } .adPanel{ width:100%; height:100%; } var count =
web实现跑马灯
由于代码比较少,我就写在一个文件里了 //ready(),这个方法在html元素加载完毕才会执行 $(document).ready(function(){ //穿入一个box即可 startInterval($(".box")); function startInterval(box){ var ul = box.find("
用纯CSS写的图片切换,翻页效果..
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">head profile="http://www.
跑马灯不间断循环(网站首页)
跑马灯不间断循环(网站首页)TABLE width="96%" border=0 align="center" cellPadding=0 cellSpacing=0>        TBODY>          TR>            TD >                                div id=demo style=overflow:hidden;he