<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.bannerMarquee
{
background-color: Gray; /*為了讓div容器明顯一點，所以弄個灰色背景色*/
overflow: hidden; /*圖片超過容器的話，就隱藏(必填)*/
width: 480px; /*一張圖片width:160px，此div一次呈現3張圖片，所以寬度480px*/
height: 50px; /*一張圖片高度50px;*/
}
div.bannerMarquee ul
{
/*width: 960px; /*如果ul沒設定width的話，預設依照容器div的寬，這樣會讓li自動斷行以符合div容器範圍，為了不讓li自動斷行*/
/*ul的width可以設960px(Html畫面上6張圖)*/
margin: 0px;
padding: 0px; /* ul預設會有margin和padding，兩者都設為0px*/
list-style: none;
}
ul li
{
display: inline; /*讓所有的li強制在同一列(水平)*/
float: left; /*每個li靠左對齊才不會有間隔*/
}
img
{
border-width: 0px; /* 避免img受到超連結影響出現border，所以border-width: 0px;*/
width: 160px;
height: 50px;
}
</style>
</head>
<body>
<div class="bannerMarquee">
<ul>
<li><a href="#">
<img src="images/1.gif" alt="*" /></a></li>
<li><a href="#">
<img src="images/2.gif" alt="*" /></a></li>
<li><a href="#">
<img src="images/3.gif" alt="*" /></a></li>
<li><a href="#">
<img src="images/4.gif" alt="*" /></a></li>
<li><a href="#">
<img src="images/5.gif" alt="*" /></a></li>
<li><a href="#">
<img src="images/6.gif" alt="*" /></a></li>
</ul>
</div>
</body>
<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(init);
var t;
function init() {
$("div.bannerMarquee ul li").mouseenter(MouseEnterHandler);
$("div.bannerMarquee ul li").mouseleave(MouseLeaveHandler);
t=setTimeout(myFunc, 2000); //初始畫面載入後，2秒後執行myFunc()
}
function myFunc() {
//1. 先把第一個li物件複製一份暫存起來
var $firstLi = $("div.bannerMarquee ul li").first().clone();
//2. 把剛剛複製的li物件附加到最後一個li元素的後面
$("div.bannerMarquee ul li").last().after($firstLi);
//3. 移除掉第一個li物件
//把第一個li物件先徹底隱藏後再移除掉
$("div.bannerMarquee ul li").first().hide(500, function () {
$(this).remove();
});
t= setTimeout(myFunc, 2000); //每2秒鐘執行myFunc()
}
function MouseEnterHandler() {
clearTimeout(t);
}
function MouseLeaveHandler() {
//滑鼠離開圖片2秒後，執行myFunc
t = setTimeout(myFunc, 2000);
}
</script>
</html>
Live Demo：http://59.120.168.237/livedemo/marqueemy.html
原始文章出自於此篇文章
沒有留言:
張貼留言