autoPlay 基于jquery的圖片自動(dòng)播放效果
更新時(shí)間：2011年12月07日 23:27:46 作者：
效果類似這種，自動(dòng)播放，實(shí)質(zhì)控制層的顯示隱藏。需要的朋友可以參考下。
效果圖:
實(shí)現(xiàn)代碼:
<html>
<head>
<title>Jquery 自動(dòng)輪播效果</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 自動(dòng)輪播效果</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)圖片滾動(dòng)和頁簽控件功能的實(shí)現(xiàn)代碼
- Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果
- 圖片自動(dòng)播放器腳本之家修正
- JS特效實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
- JQuery 圖片滾動(dòng)輪播示例代碼
- js實(shí)現(xiàn)網(wǎng)站首頁圖片滾動(dòng)顯示
- jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)
- jquery實(shí)現(xiàn)圖片滾動(dòng)效果的簡(jiǎn)單實(shí)例
- js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
- ImageFlow可鼠標(biāo)控制圖片滾動(dòng)
- javascript 不間斷的圖片滾動(dòng)并可點(diǎn)擊
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
- Android使用自定義屬性實(shí)現(xiàn)圖片自動(dòng)播放滾動(dòng)的功能
相關(guān)文章
JQuery是一個(gè)很優(yōu)秀的JS框架，我們?cè)谧鯽jax項(xiàng)目開發(fā)是避免不了使用該框架來實(shí)現(xiàn)一些ajax的效果，其中該框架中有一個(gè)load()方法，該方法是用來在頁面不刷新的情況下動(dòng)態(tài)裝載服務(wù)器端的文件。2009-09-09
jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼
首先，我們要準(zhǔn)備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個(gè)就是經(jīng)常用的table布局的css文件。這些文件都會(huì)在后面的文件中包含。2009-10-10
jquery+ajax實(shí)現(xiàn)直接提交表單實(shí)例分析
這篇文章主要介紹了jquery+ajax直接提交表單的方法,涉及jQuery調(diào)用ajax進(jìn)行表單提交所涉及的表單序列化、數(shù)值傳遞與處理、回調(diào)函數(shù)等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
淺析jQuery移動(dòng)開發(fā)中內(nèi)聯(lián)按鈕和分組按鈕的編寫
這篇文章主要介紹了jQuery移動(dòng)開發(fā)中內(nèi)聯(lián)按鈕和分組按鈕的編寫方法,基于jQuery mobile這個(gè)jQuery針對(duì)移動(dòng)開發(fā)版的庫,需要的朋友可以參考下2015-12-12
jQuery獲取動(dòng)態(tài)添加元素的方法詳解
這篇文章主要介紹了jQuery獲取動(dòng)態(tài)添加元素的方法詳解,jQuery 是一個(gè)高效、精簡(jiǎn)并且功能豐富的 JavaScript 工具庫,它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動(dòng)畫和 Ajax 操作更加簡(jiǎn)單,需要的朋友可以參考下2023-08-08
EasyUI在表單提交之前進(jìn)行驗(yàn)證的實(shí)例代碼
這篇文章主要介紹了EasyUI在表單提交之前進(jìn)行驗(yàn)證的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
checkbox是多選，怎么才能讓他變成單選，效果跟radio一樣呢，本菜鳥就自己寫了個(gè)小程序，代碼很簡(jiǎn)單2014-06-06
基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
這篇文章主要介紹了基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證 的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery cookie的公共方法封裝和使用,結(jié)合實(shí)例形式詳細(xì)分析了jQuery cookie的設(shè)置、獲取、刪除等方法封裝與使用相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
JavaScript實(shí)現(xiàn)的彈出遮罩層特效經(jīng)典示例【基于jQuery】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的彈出遮罩層特效,結(jié)合實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的頁面元素與屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-07-07