Heim > Web-Frontend > js-Tutorial > 基于jQuery的仿flash的广告轮播_jquery

基于jQuery的仿flash的广告轮播_jquery

WBOY
Freigeben: 2016-05-16 18:16:55
Original
957 Leute haben es durchsucht

整个页面如下:

复制代码 代码如下:





















注释:
speed:图片轮播速度
num:图片数量
timer:自动轮播的时间间隔,定时器;
flowSpeed:是滑块移动的速速度

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;
//自动播放
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);


希望对和我一样的菜鸟有用
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage