嵊泗花鸟岛图片切换【走光效果】
生活随笔
收集整理的這篇文章主要介紹了
嵊泗花鸟岛图片切换【走光效果】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圖片漸漸切換</title><style>#left_screen{width:189px;height: 329px;overflow: hidden;top:86px;left:47px;z-index: 1;position: absolute;}#left_screen img{width:189px;height: 329px;top:0;left:0;z-index: 2;position: absolute;display:none;}</style>
</head>
<body><div id="left_screen"><img src="images/slider1.png" /><img src="images/slider2.png" /><img src="images/slider3.png" /><img src="images/slider1.png" /><img src="images/slider1.png" /><img src="images/slider2.png" /><img src="images/slider3.png" /><img src="images/slider1.png" /></div><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript">function wordsShow(ele){var i=-1;var len=ele.children("img").length;function wordsAnimate(){ //設置走光動畫
i++;if(i<len){ setTimeout(function(){ele.children("img").eq(i).show().siblings().hide();wordsAnimate(); //內部回調
},200);}}wordsAnimate(); //執行一次動畫,否則其他動畫不隱藏
}wordsShow($("#left_screen"));//立刻執行一次
setInterval(function(){wordsShow($("#left_screen"))},2000);/*循環執行*/</script>
</body>
</html>
?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖片漸漸切換</title><style>#left_screen{width:189px;height: 329px;overflow: hidden;top:86px;left:47px;z-index: 1;position: absolute;}#left_screen img{width:189px;height: 329px;top:0;left:0;z-index: 2;position: absolute;display:none;}</style> </head> <body><div id="left_screen"><img src="images/slider1.png" /><img src="images/slider2.png" /><img src="images/slider3.png" /><img src="images/slider1.png" /><img src="images/slider1.png" /><img src="images/slider2.png" /><img src="images/slider3.png" /><img src="images/slider1.png" /></div><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript">function imgShow(ele){var i=-1;var len=ele.children("img").length;function imgAnimate(){ //設置走光動畫 i++;if(i<len){ setTimeout(function(){ele.children("img").eq(i).show().siblings().hide();imgAnimate(); //內部回調 },200);}}imgAnimate(); //執行一次動畫,否則其他動畫不隱藏 }imgShow($("#left_screen"));//立刻執行一次 setInterval(function(){imgShow($("#left_screen"))},2000);/*循環執行*/</script> </body> </html>?
轉載于:https://www.cnblogs.com/shimily/articles/4612436.html
總結
以上是生活随笔為你收集整理的嵊泗花鸟岛图片切换【走光效果】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深度学习模型Intel与ARM部署性能分
- 下一篇： div+css 上下左右移动