纳金网
标题:
js鼠标触发图片快速切换效果的代码
[打印本页]
作者:
奇
时间:
2011-12-30 19:33
标题:
js鼠标触发图片快速切换效果的代码
一个比较个性的图片切换，鼠标移到图片上，等待一会图片切换的速度会越来越快，几乎要旋转起来了。
本效果不太实用，就算是给大家一个研究和学习js的例子吧，欢迎大家提出宝贵意见。
效果：
<html>
<head>
<title>感应鼠标快速切换图片的JavaScript效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
#js_F{position:relative;top:10px;left:10px;overflow:hidden;width:150px;height:200px;}
#js_F img{position:absolute;top:0;left:0;}
</style>
</head>
<body>
鼠标移到图片上，等待一会图片切换速度会越来越快！<br>
<div id="js_F"></div>
<script type="text/javascript">
<!--///*--><![CDATA[/*><!--*/
var js_F = document.getElementById("js_F");
var imgList = ["/uploads/common/images/s_p2.jpg", "/uploads/common/images/s_p3.jpg", "/uploads/common/images/s_p4.jpg", "/uploads/common/images/s_p5.jpg" ];
var imgTemp = new Array();
for (i=0; i<imgList.length; i++){
imgTemp
= new Image();
imgTemp
.src = imgList
;
}
var imgs = new Array();
var imgID = 0, nextImgID, proveImgID;
var tf = true;
var speed1 = 10; speed2 = 500;//速度
function imgInit(){
var content = '';
for (i=0; i<imgList.length; i++){
content += '<img src="' + imgList
+ '" style="left:0;" />
';
}
js_F.innerHTML = content;
imgs = js_F.getElementsByTagName('img');
imgs[0].style.zIndex = 20;
imgs[1].style.zIndex = 15;
}
function imgChange(){
if ((imgID+1)<imgList.length){
nextImgID = imgID + 1;
} else if (imgID<imgList.length) {
nextImgID = 0;
} else {
imgID = 0;
nextImgID = imgID + 1;
}
imgs[imgID].style.zIndex = 20;
imgs[nextImgID].style.zIndex = 15;
var ttt=setTimeout('imgShow()',speed2);
js_F.onmouseover=function(){clearTimeout(ttt)};
js_F.onmouseout=function(){setTimeout('imgShow()',speed2)};
}
function imgShow(){
if (tf){
if (parseInt(imgs[imgID].style.left)>-180){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)-10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)+5) + 'px';
setTimeout('imgShow()',speed1);
} else {
tf = !tf;
imgs[imgID].style.zIndex = 15;
imgs[nextImgID].style.zIndex = 20;
setTimeout('imgShow()',speed1);
}
} else {
if (parseInt(imgs[imgID].style.left)<0){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)+10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)-5) + 'px';
setTimeout('imgShow()',speed1);
} else {
imgs[imgID].style.zIndex = 10;
tf = !tf;
imgID++;
imgChange();
}
}
}
imgInit();
imgChange();
/*]]>*///-->
</script>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/25350.html
作者:
奇
时间:
2012-1-6 20:10
作者:
菜刀吻电线
时间:
2012-2-19 23:28
不错 非常经典 实用
作者:
菜刀吻电线
时间:
2012-4-20 23:24
已阵亡的 蝶 随 风 舞 说过 偶尔按一下 CTRL A 会发现 世界还有另一面
作者:
晃晃
时间:
2012-9-29 23:22
凡系斑竹滴话要听；凡系朋友滴帖要顶
作者:
C.R.CAN
时间:
2012-10-9 23:22
“再次路过……”我造一个-----特别路过
作者:
晃晃
时间:
2013-2-8 09:49
凡系斑竹滴话要听；凡系朋友滴帖要顶
作者:
晃晃
时间:
2013-3-8 23:20
路过、路过、快到鸟，列位请继续...ing
欢迎光临 纳金网 (http://go.narkii.com/club/)
Powered by Discuz! X2.5
