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