ホームページ > 記事 > ウェブフロントエンド > jQuery_jquery に基づく Flash のような広告カルーセル

jQuery_jquery に基づく Flash のような広告カルーセル

WBOYオリジナル: 2016-05-16 18:16:55896ブラウズ

整个页面如下:

复制代代码如下:

<%@ Page Language=" C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

注釈：
speed：图片轮播速度
num：图片数
timer：自動轮播の時間間隔、定時器；
flowSpeed：滑块移動の速度

blockSlide插件源码如下:

复制代代码如下:

 
/**
* @著者 huajianhuakai*/ 
(function($) 
{ 
$.fn.blockSlide = function(settings) 
{ 
settings = jQuery. extend({ 
speed: "normal", 
num: 4, 
timer: 1000, 
flowSpeed: 300 
}, 
return this.each(function( ) 
{ 
$.fn.blockSlide.scllor($(this), 設定); 
}; 
$.fn.blockSlide.scllor = function($this) , 設定) 
{ 
var インデックス = 0; 
var imgScllor = $("div:eq(0)>div", $this); 
var timerID;自動播放 
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); 

 

希望对和我一样的菜鸟有用

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript ゲームは、men_javascript スキル向けの 100 層のコードによってパッケージ化されています次の記事：JavaScript ゲームは、men_javascript スキル向けの 100 層のコードによってパッケージ化されています

続きを見る

jQuery_jquery に基づく Flash のような広告カルーセル

関連記事