求个图片自动切换JS代码
三张图片循环切换，JS不太懂，最好能给我贴段能运行的代码，O(∩_∩)O谢谢。。
[解决办法]
jquery的一个图切换插件，jquery.cycle.all
当然不要求什么过渡效果之类的话，直接写也挺简单
[解决办法]
- HTML code
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>淘宝首页图片轮播效果</title><style><!--* {margin: 0;padding:0;}body {background: #222;}ol {list-style: none;}img {border: 0 none;}#slider { border: 1px solid #F60; width: 490px; height: 170px; overflow: hidden; position: relative; margin: 2em auto;}#slider .player { /*width: 2450px; height: 850px;*/ position: absolute; top: 0px; left: 0px;}#slider .player li { width: 490px; height: 170px;}#slider .btns { position: absolute; right: 10px; bottom: 5px; height: 30px;}#slider .btns li { font: 13px Tahoma, Arial, 宋体, sans-serif; float: left; margin: 0 3px; border: 1px solid #F60; background-color: #FFF; color: #CC937A; opacity: .8; cursor: pointer; width: 20px; height: 20px; line-height: 19px; text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}#slider .btns li.active { background: #F60; color: #FFF; font-weight: bold; opacity: 1;}--></style><script>//<![CDATA[function $(id) { return document.getElementById(id);};function getByClass(className, context) {/* * 功能说明： * 传入类名、节点名（默认document），获取context下类名为classNa的节点 */ context = context || document; if(context.getElementsByClassName) { return context.getElementsByClassName(className); } else { var nodes = []; var tags = context.getElementsByTagName('*'); for(var i=0, len=tags.length; i<len; i++) { if(hasClass(tags[i], className)) { nodes.push(tags[i]); } } return nodes; }}function hasClass(node, className) {/* * 功能说明： * 传入节点及一个类名，检查该节点是否含有传入的类名 */ var names = node.className.split(/\s+/); for(var i=0, len=names.length; i<len; i++) { if(names[i] == className) { return true; } } return false;}function animate(o,start,alter,dur,fx) {/* * 功能说明： * 设置动画 * o:要设置动画的对象 * start:开始的对象 * alter:总的对象 * dur:动画持续多长时间 * fx:动画类型 */ var curTime=0; var t=setInterval(function () { if (curTime>=dur) clearInterval(t); for (var i in start) { o.style[i]=fx(start[i],alter[i],curTime,dur)+"px"; } curTime+=40; },40); return function () { clearInterval(t); };}var Tween = {/* * 功能说明： * 加速运动 * curTime:当前时间,即动画已经进行了多长时间,开始时间为0 * start:开始值 * alter:总的变化量 * dur:动画持续多长时间 */ Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动 Quad:{//二次方缓动 easeIn:function (start,alter,curTime,dur) { return start+Math.pow(curTime/dur,2)*alter; }, easeOut:function (start,alter,curTime,dur) { var progress =curTime/dur; return start-(Math.pow(progress,2)-2*progress)*alter; }, easeInOut:function (start,alter,curTime,dur) { var progress =curTime/dur*2; return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start; } },};function Player(btns, scrollContent, imgHeight, timeout, hoverClass) {/* * btns:按钮，类型是数组 * scrollContent:摇滚动的块，一个DOM对象，这里是ol * imgHeight:每一张图片的高度，当然，如果想改成左右滚动，这里传入每一张图片的宽，唯一需要注意的是每一张图片宽高必须相同，图片数量可调整 * timeout:切换速度快慢，默认为1.5ms * hoverClass:每一个按钮激活时的类名*/ hoverClass = hoverClass || 'active'; timeout = timeout || 1500; this.btns = btns; this.scrollContent = scrollContent; this.hoverClass = hoverClass; this.timeout = timeout; this.imgHeight = imgHeight; var _this = this; for(var i=0; i<btns.length; i++) { this.btns[i].index = i; btns[i].onmouseover = function() { _this.stop(); _this.invoke(this.index); } btns[i].onmouseout = function() { _this.start(); } } this.invoke(0);}Player.prototype = { constructor : Player, start : function() { var _this = this; this.stop(); this.intervalId = setInterval(function() { _this.next(); }, this.timeout); }, stop: function() { clearInterval(this.intervalId); }, invoke: function(n) { this.pointer = n; if(this.pointer >= this.btns.length) { this.pointer = 0; } this.clearHover(); this.btns[this.pointer].className = this.hoverClass; //this.scrollContent.style.top = parseInt(-this.imgHeight * this.pointer) + 'px'; var startVal = parseInt(this.scrollContent.style.top) || 0; var alterVal = (parseInt(-startVal - this.imgHeight * this.pointer)); this.animateIterval && this.animateIterval();//修正快速切换时闪动 this.animateIterval=animate(this.scrollContent, {top : startVal},{top : alterVal}, 1000, Tween.Quad.easeOut); //这里默认设置每张图滚动的总时间是1s }, next: function() { this.invoke(this.pointer + 1); }, clearHover: function() { for(var i=0; i<this.btns.length; i++) { this.btns[i].className = ''; }; }}window.onload = function() { var btns = getByClass('btns', $('slider'))[0].getElementsByTagName('li'); var player = getByClass('player', $('slider'))[0]; var player = new Player(btns, player, 170, 1500, undefined); player.start(); //player.invoke(2);}//]]></script></head><body><div id="slider"> <ol class="player"> <li><a href=""><img src="http://shouji.cxdq.com/img/h004/h40/img200808311417230.gif" alt="1" /></a></li> <li><a href=""><img src="http://shouji.cxdq.com/img/h004/h40/img200808311417230.gif" alt="2" /></a></li> <li><a href=""><img src="http://shouji.cxdq.com/img/h004/h40/img200808311417230.gif" alt="3" /></a></li> <li><a href=""><img src="http://shouji.cxdq.com/img/h004/h40/img200808311417230.gif" alt="4" /></a></li> <li><a href=""><img src="http://shouji.cxdq.com/img/h004/h40/img200808311417230.gif" alt="5" /></a></li> </ol> <ol class="btns"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol></div></body></html>
[解决办法]
简单的：已测试！
<img id="img" src="<%=request.getContextPath()%>/images/images/btn_01.gif" alt="1" />
<script type="text/javascript">
//如有图片：btn_01.gif btn_02.gif btn_03.gif btn_04.gif
var temp=1;
function loadImg(){
document.getElementById("img").src="<%=request.getContextPath()%>/images/images/btn_0"+temp+".gif";
temp++;
if(temp>4){temp=1;}
}
window.setInterval("loadImg()",1000);
</script>
[解决办法]
简单的：
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>带按扭的轮换横幅广告</TITLE>
<STYLE type="text/css">
a{/*设置无下划线、文字背景超连接样式*/
color:#ffffff;
font-size:13px;
text-decoration:none;
background-color:#ff0000;
width:20px;
}
</STYLE>
<SCRIPT language="JavaScript">
var NowFrame = 1;
var MaxFrame = 4;
function show(d1) {
if(Number(d1)){
clearTimeout(theTimer); //当触动按扭时，清除计时器
NowFrame=d1; //设当前显示图片
}
for(var i=1;i<(MaxFrame+1);i++){
if(i==NowFrame)
document.getElementById('div'+NowFrame).style.display =''; //当前图片示
else
document.getElementById('div'+i).style.display ='none'; //隐藏其他图片层
}
{ if(NowFrame == MaxFrame) //设置下一个显示的图片
NowFrame = 1;
else
NowFrame++;}
theTimer=setTimeout('show()', 3000); //设置定时器，显示下一张图片
}
function shows(x) {
for(var i=1;i<=4;i++){
if(i == x) {
document.getElementById('div'+i).style.display ='';
} else {
document.getElementById('div'+i).style.display ='none';
}
}
clearTimeout(theTimer);
}
</SCRIPT>
</HEAD>
<BODY onLoad="show();">
<DIV style="position:absolute;left:200px;top:60px;">
<IMG src="image/ad-01.jpg" style="display:none;" id="div1" border="0">
<IMG src="image/ad-02.jpg" style="display:none;" id="div2" border="0">
<IMG src="image/ad-03.jpg" style="display:none;" id="div3" border="0">
<IMG src="image/ad-04.jpg" style="display:none;" id="div4" border="0">
</DIV>
<DIV style="position:absolute;left:440px;top:230px;" align="center"><A href="javascript:shows(1)">1</A> <A href="javascript:shows(2)">2</A> <A href="javascript:shows(3)">3</A> <A href="javascript:shows(4)">4</A>
</DIV>
</BODY>
</HTML>