autoPlay 基于jquery的圖片自動播放效果
更新時間:2011年12月07日 23:27:46 作者:
效果類似這種,自動播放,實質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。
效果圖:

實現(xiàn)代碼:
<html>
<head>
<title>Jquery 自動輪播效果</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.spanhide{display: none;}
#top a:hover{color: red;}
</style>
</head>
<body>
<div id = "main">
<div id = "top">
<a href="javascript:void(0)">1</a>
<a href="javascript:void(0)">2</a>
<a href="javascript:void(0)">3</a>
<a href="javascript:void(0)">4</a>
<a href="javascript:void(0)">5</a>
</div>
<div id = "tbody">
<span> <img src="images/24877.jpg" /> </span>
<span class="spanhide"> <img src="images/74389.gif" /> </span>
<span class="spanhide"> <img src="images/77904.jpg" /> </span>
<span class="spanhide"> <img src="images/81177.jpg" /> </span>
<span class="spanhide"> <img src="images/93144.jpg" /> </span>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var i = 0;
var f = 0;
var t;
var tops = $("#top a");
var tl = tops.length;
var bodys = $("#tbody span");
tops.mouseover(function(){
i = $.inArray(this,tops);
bodys.hide().eq(i).show();
i++;
i = i>=tl?0:i;
if (f == 1) {
t = setTimeout(mmover,2000);
}
else{
stop();
}
f = 0;
});
bodys.mouseover(function(){
stop();
});
bodys.mouseout(function(){
t = setTimeout(mmover,2000);
});
tops.mouseout(function(){
t = setTimeout(mmover,2000);
});
mmover();
function stop(){
clearTimeout(t);
}
function mmover(){
f = 1;
tops.eq(i).mouseover();
}
});
</script>
</html>

實現(xiàn)代碼:
復(fù)制代碼 代碼如下:
<html>
<head>
<title>Jquery 自動輪播效果</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.spanhide{display: none;}
#top a:hover{color: red;}
</style>
</head>
<body>
<div id = "main">
<div id = "top">
<a href="javascript:void(0)">1</a>
<a href="javascript:void(0)">2</a>
<a href="javascript:void(0)">3</a>
<a href="javascript:void(0)">4</a>
<a href="javascript:void(0)">5</a>
</div>
<div id = "tbody">
<span> <img src="images/24877.jpg" /> </span>
<span class="spanhide"> <img src="images/74389.gif" /> </span>
<span class="spanhide"> <img src="images/77904.jpg" /> </span>
<span class="spanhide"> <img src="images/81177.jpg" /> </span>
<span class="spanhide"> <img src="images/93144.jpg" /> </span>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var i = 0;
var f = 0;
var t;
var tops = $("#top a");
var tl = tops.length;
var bodys = $("#tbody span");
tops.mouseover(function(){
i = $.inArray(this,tops);
bodys.hide().eq(i).show();
i++;
i = i>=tl?0:i;
if (f == 1) {
t = setTimeout(mmover,2000);
}
else{
stop();
}
f = 0;
});
bodys.mouseover(function(){
stop();
});
bodys.mouseout(function(){
t = setTimeout(mmover,2000);
});
tops.mouseout(function(){
t = setTimeout(mmover,2000);
});
mmover();
function stop(){
clearTimeout(t);
}
function mmover(){
f = 1;
tops.eq(i).mouseover();
}
});
</script>
</html>
您可能感興趣的文章:
- Android實現(xiàn)圖片滾動和頁簽控件功能的實現(xiàn)代碼
- Android仿淘寶商品瀏覽界面圖片滾動效果
- 圖片自動播放器腳本之家修正
- JS特效實現(xiàn)圖片自動播放并可控的效果
- 基于Jquery實現(xiàn)的一個圖片滾動切換
- jquery 圓形旋轉(zhuǎn)圖片滾動切換效果
- JQuery 圖片滾動輪播示例代碼
- js實現(xiàn)網(wǎng)站首頁圖片滾動顯示
- jQuery+css實現(xiàn)圖片滾動效果(附源碼)
- jquery實現(xiàn)圖片滾動效果的簡單實例
- js+div實現(xiàn)圖片滾動效果代碼
- ImageFlow可鼠標控制圖片滾動
- javascript 不間斷的圖片滾動并可點擊
- js實現(xiàn)鼠標經(jīng)過時圖片滾動停止的方法
- Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能
相關(guān)文章
jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題
本篇文章主要是對巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02Jquery檢驗手機號是否符合規(guī)則并根據(jù)手機號檢測結(jié)果將提交按鈕設(shè)為不同狀態(tài)
接了個項目做,需要是這樣的:輸入手機號,實時判斷輸入的手機號是否符合規(guī)則,如果不符合怎么處理,符合又怎么處理等一系列問題,本篇文章給大家介紹Jquery檢驗手機號是否符合規(guī)則并根據(jù)手機號檢測結(jié)果將提交按鈕設(shè)為不同狀態(tài),感興趣的朋友參考下2015-11-11JQuery中根據(jù)屬性或?qū)傩灾但@得元素(6種情況獲取方法)
根據(jù)屬性或?qū)傩灾但@得元素本文介紹六種不同的情況獲取方法,有需要的朋友可以參考下2013-01-01