最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 20:55:34
文档

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

基于jQuery的仿flash的广告轮播代码_jquery:整个页面如下: 代码如下: div#imgADPlayer { margin: auto; margin-bottom: 4px; width: 960px; height: 120px; background: url(../images/photo_01.jpg) left top no-repeat; padding: 0
推荐度:
导读基于jQuery的仿flash的广告轮播代码_jquery:整个页面如下: 代码如下: div#imgADPlayer { margin: auto; margin-bottom: 4px; width: 960px; height: 120px; background: url(../images/photo_01.jpg) left top no-repeat; padding: 0
 整个页面如下:
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
































$(document).ready(function () {
$("#AdTop").blockSlide({
speed: "normal",
num: 4,
timer: 3000,
flowSpeed: 300
});
});






注释:
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);

文档

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

基于jQuery的仿flash的广告轮播代码_jquery:整个页面如下: 代码如下: div#imgADPlayer { margin: auto; margin-bottom: 4px; width: 960px; height: 120px; background: url(../images/photo_01.jpg) left top no-repeat; padding: 0
推荐度:
标签: 轮播 代码 广告
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top