Javascript 文本和图像同时旋转
我已经使用下面的代码实现了一个简单而简单的图像旋转链接 试图找到一个简单的方法来添加一个额外的描述或文本链接也与旋转在同一时间。。。四处窥探,找不到简单的解决办法 因此,寻找一个可以同时显示在图像旁边的描述Javascript 文本和图像同时旋转,javascript,css,coldfusion-9,Javascript,Css,Coldfusion 9,我已经使用下面的代码实现了一个简单而简单的图像旋转链接 试图找到一个简单的方法来添加一个额外的描述或文本链接也与旋转在同一时间。。。四处窥探,找不到简单的解决办法 因此,寻找一个可以同时显示在图像旁边的描述 <a id="imageurl"><img id="Rotating1" border="0" height=250 width=375></a> <script language="JavaScript"> function Rotate
<a id="imageurl"><img id="Rotating1" border="0" height=250 width=375></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("images/signs.png","images/sister.png");
var c = new Array("index.cfm", "index.cfm");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",5700);
}
RotateImages(0);
</script>
不要对字符串使用setTimeout
,这就像邪恶的eval
!改为使用函数:setTimeout(function(){RotateImages(Start+1);},5700)
您希望描述为HTML,还是原始文本很好?首选HTML,因为我可以多使用它一点……如果setTimeout/setInterval使用相同的超时或间隔(5700或2000)并在相同的时间开始,这会有所帮助。添加旋转图像(0);在$(函数(){…})kitty中!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 2000);
});
</script>
<cfset slw = #set.mw# - 100>
<cfoutput>
<STYLE type="text/css">
##slideshow {
margin: 50px auto;
position: relative;
width: #slw#px;
height: 200px;
padding: 10px;
background-color: #set.botcol#;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
##slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</cfoutput>
<div id="slideshow">
<cfoutput query=slide>
<div>
<table border=1 width=#slw# cellspacing=5 cellpadding=5>
<tr>
<td width=50% align=right valign=top>
<br><a href="#slideurl#">#slidetext#</a></td>
<td width=50%><img src="images/#slideimg#" height=200></td>
</tr>
</table>
</div>
</cfoutput>
</div>