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

實(shí)現(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>

實(shí)現(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實(shí)現(xiàn)圖片滾動和頁簽控件功能的實(shí)現(xiàn)代碼
- Android仿淘寶商品瀏覽界面圖片滾動效果
- 圖片自動播放器腳本之家修正
- JS特效實(shí)現(xiàn)圖片自動播放并可控的效果
- 基于Jquery實(shí)現(xiàn)的一個圖片滾動切換
- jquery 圓形旋轉(zhuǎn)圖片滾動切換效果
- JQuery 圖片滾動輪播示例代碼
- js實(shí)現(xiàn)網(wǎng)站首頁圖片滾動顯示
- jQuery+css實(shí)現(xiàn)圖片滾動效果(附源碼)
- jquery實(shí)現(xiàn)圖片滾動效果的簡單實(shí)例
- js+div實(shí)現(xiàn)圖片滾動效果代碼
- ImageFlow可鼠標(biāo)控制圖片滾動
- javascript 不間斷的圖片滾動并可點(diǎn)擊
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時圖片滾動停止的方法
- Android使用自定義屬性實(shí)現(xiàn)圖片自動播放滾動的功能
相關(guān)文章
jQuery+AJAX實(shí)現(xiàn)無刷新下拉加載更多
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)無刷新下拉加載更多的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery 2.0.3 源碼分析之core(一)整體架構(gòu)
這篇文章主要介紹了jQuery 2.0.3 源碼分析之core(一)整體架構(gòu),需要的朋友可以參考下2014-05-05巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題
本篇文章主要是對巧用jquery解決下拉菜單被Div遮擋的相關(guān)問題進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02Jquery檢驗(yàn)手機(jī)號是否符合規(guī)則并根據(jù)手機(jī)號檢測結(jié)果將提交按鈕設(shè)為不同狀態(tài)
接了個項(xiàng)目做,需要是這樣的:輸入手機(jī)號,實(shí)時判斷輸入的手機(jī)號是否符合規(guī)則,如果不符合怎么處理,符合又怎么處理等一系列問題,本篇文章給大家介紹Jquery檢驗(yàn)手機(jī)號是否符合規(guī)則并根據(jù)手機(jī)號檢測結(jié)果將提交按鈕設(shè)為不同狀態(tài),感興趣的朋友參考下2015-11-11JQuery中根據(jù)屬性或?qū)傩灾但@得元素(6種情況獲取方法)
根據(jù)屬性或?qū)傩灾但@得元素本文介紹六種不同的情況獲取方法,有需要的朋友可以參考下2013-01-01jquery實(shí)現(xiàn)簡單手風(fēng)琴菜單效果實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單手風(fēng)琴菜單效果的方法,實(shí)例分析了jQuery操作頁面樣式、html頁面布局及SCSS樣式設(shè)置的相關(guān)技巧,需要的朋友可以參考下2015-06-06