基于jQuery的仿flash的廣告輪播代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="_Template/js/blockSlide.js" type="text/javascript"></script>
<style type="text/css">
div#imgADPlayer
{
margin: auto;
margin-bottom: 4px;
width: 960px;
height: 120px;
background: url(../images/photo_01.jpg) left top no-repeat;
padding: 0px;
border: none;
clear: both;
position: relative;
}
div#imgADPlayer .smask
{
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<!-- 滾動(dòng)圖片開始 -->
<div id="imgADPlayer">
<div id="AdTop">
<div id="myjQueryContent">
<div>
<a href="javascript:void(0)">
<img src="_Template/images/photo_01.jpg" alt="" /></a></div>
<div class="smask">
<a href="javascript:void(0)">
<img src="_Template/images/photo_02.jpg" alt="" /></a></div>
<div class="smask">
<a href="javascript:void(0)">
<img src="_Template/images/photo_03.jpg" alt="" /></a>
</div>
<div class="smask">
<a href="javascript:void(0)">
<img src="_Template/images/photo_04.jpg" alt="" /></a></div>
</div>
<div id="flow">
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#AdTop").blockSlide({
speed: "normal",
num: 4,
timer: 3000,
flowSpeed: 300
});
});
</script>
</div>
<!--滾動(dòng)圖片結(jié)束 -->
</body>
</html>
注釋:
speed:圖片輪播速度
num:圖片數(shù)量
timer:自動(dòng)輪播的時(shí)間間隔,定時(shí)器;
flowSpeed:是滑塊移動(dòng)的速速度
blockSlide插件源碼如下:
/**
* @author huajianhuakai */
(function($)
{
$.fn.blockSlide = function(settings)
{
settings = jQuery.extend({
speed: "normal",
num: 4,
timer: 1000,
flowSpeed: 300
}, settings);
return this.each(function()
{
$.fn.blockSlide.scllor($(this), settings);
});
};
$.fn.blockSlide.scllor = function($this, settings)
{
var index = 0;
var imgScllor = $("div:eq(0)>div", $this);
var timerID;
//自動(dòng)播放
var MyTime = setInterval(function()
{
ShowjQueryFlash(index);
index++;
if (index == settings.num)
index = 0;
}, settings.timer);
var ShowjQueryFlash = function(i)
{
$(imgScllor).eq(i).animate({ opacity: 1 }, settings.speed).css({ "z-index": "100" }).siblings().animate({ opacity: 0 }, settings.speed).css({ "z-index": "0" });
}
}
})(jQuery);
- PHP結(jié)合JQueryJcrop實(shí)現(xiàn)圖片裁切實(shí)例詳解
- 基于jQuery的圖片剪切插件
- jquery imgareaselect 使用利用js與程序結(jié)合實(shí)現(xiàn)圖片剪切
- php+flash+jQuery多圖片上傳源碼分享
- jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)Flash效果上下翻動(dòng)的中英文導(dǎo)航菜單代碼
- jquery+easeing實(shí)現(xiàn)仿flash的載入動(dòng)畫
- JQuery上傳插件Uploadify使用詳解及錯(cuò)誤處理
- Jquery插件之多圖片異步上傳
- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- jQuery Ajax文件上傳(php)
- jQuery實(shí)現(xiàn)模擬flash頭像裁切上傳功能示例
相關(guān)文章
關(guān)于jquery input textare 事件綁定及用法學(xué)習(xí)
目前1.7以上,jquery的事件綁定已經(jīng)用on替換了原來的bind,接下來為大家介紹下bind的使用方法及input textare事件,感興趣的朋友可以參考下哈2013-04-04jQuery操作Select的Option上下移動(dòng)及移除添加等等
jQuery操作Select Option:向上移動(dòng)選中的option、向下移動(dòng)選中的option、移除選中的option、獲取所有的option值、添加option等等,下面有個(gè)不錯(cuò)的示例,感興趣的朋友不要錯(cuò)過2013-11-11jQuery中replaceWith()方法用法實(shí)例
這篇文章主要介紹了jQuery中replaceWith()方法用法,以實(shí)例形式分析了replaceWith()方法用于匹配元素替換的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12JQuery擴(kuò)展插件Validate 3通過參數(shù)設(shè)置錯(cuò)誤信息
最終顯示在頁面上的錯(cuò)誤分為兩種:第一種是默認(rèn)錯(cuò)誤信息,該信息已經(jīng)被定義在插件中了,可以手動(dòng)修改。2011-09-09Jquery Ajax.ashx 高效分頁實(shí)現(xiàn)代碼
Jquery ,大家都熟悉的一個(gè)框架,我對(duì)Jquery正在學(xué)習(xí)中,對(duì)其影響最深的當(dāng)屬 它的選擇器之強(qiáng),ajax與服務(wù)器之間的交談2009-10-10通過Jquery遍歷Json的兩種數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)代碼
在ajax交互中,我們從服務(wù)器端返回的數(shù)據(jù)類型有xml,html,script,json,jsonp,text,本文以json為例,講述了在前臺(tái)如何利用jquery遍歷json的兩種數(shù)據(jù)結(jié)構(gòu)2011-01-01jQuery ajax動(dòng)態(tài)生成table功能示例
這篇文章主要介紹了jQuery ajax動(dòng)態(tài)生成table功能,結(jié)合具體實(shí)例形式分析了jQuery基于ajax數(shù)據(jù)交互動(dòng)態(tài)創(chuàng)建table表格的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06jQuery動(dòng)態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
這篇文章主要介紹了jQuery動(dòng)態(tài)添加及刪除表單上傳元素的方法,涉及jQuery的事件動(dòng)態(tài)綁定及頁面元素動(dòng)態(tài)操作技巧,并附帶了demo源碼供讀者下載參考,代碼非常簡潔實(shí)用,需要的朋友可以參考下2016-01-01