1顶

jquery图文焦点图定时切换广告代码

稿源：互联网 2022-04-02 21:40:32 点击： 9980 撤稿纠错

jquery实现焦点图定时切换特效，带标题和说明文字，底部显示编号，可自定义切换速度。

以下讨论的是和jquery 焦点图定时图片切换相关的jquery图文焦点图定时切换广告代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>站长特效 jquery图文焦点图定时切换广告代码 站长特效网</title>
</head>
<style type=text/css>
BODY {background-color:#FFFFFF; font-size:12px;}
DL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
DT {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
DD {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
IMG {
 BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
ul li{list-style-type:none;}
#newsSlider .container {
 MARGIN: 10px 0px; OVERFLOW: hidden; WIDTH: 280px; POSITION: relative; HEIGHT: 290px;
}
#newsSlider DIV.slides {
 LEFT: 0px; POSITION: absolute; TOP: 0px
}
#newsSlider UL.slides {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 0px
}
#newsSlider UL.slides DL {
 MARGIN-TOP: 32px
}
#newsSlider UL.slides DT A {
 FONT: bold 14px/30px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; COLOR: #2a609f
}
#newsSlider UL.slides DD {
 LINE-HEIGHT: 22px
}
#newsSlider UL.slides DD .more {
 MARGIN-TOP: -18px;FLOAT: right; OVERFLOW: hidden; WIDTH: 14px; TEXT-INDENT: -100em; HEIGHT: 12px
}
#newsSlider DIV.slides DIV {
 PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 280px; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px
}
UL.slides LI {
 PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 280px; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px
}
#newsSlider #loopedSlider {
 CLEAR: both; MARGIN: 0px auto; WIDTH: 280px; POSITION: relative
}
#newsSlider {
 CLEAR: both; MARGIN: 0px auto; WIDTH: 280px; POSITION: relative
}
#newsSlider {
 BORDER-BOTTOM: #eee 1px solid
}
#newsSlider UL.pagination {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; POSITION: absolute; TOP: 205px
}
#newsSlider UL.pagination LI {
 FLOAT: left; MARGIN-RIGHT: 5px
}
#newsSlider UL.pagination LI A {
 DISPLAY: block; BACKGROUND: url(/img/num_20110124zzjs_net.gif) no-repeat 0px 0px; FONT: bold 12px/15px "Times New Roman", Times, serif; WIDTH: 15px; COLOR: #fff; TEXT-ALIGN: center;
 text-decoration:none;
}
#newsSlider UL.pagination LI.active A {
 BACKGROUND-POSITION: 0px 100%; COLOR: #fff; TEXT-DECORATION: none
}
UL.pagination LI A:hover {
 BACKGROUND-POSITION: 0px 100%; COLOR: #fff; TEXT-DECORATION: none
}
</style>
<SCRIPT src="/img/jquery_zzjs.js" type=text/javascript></SCRIPT>
<SCRIPT type="text/javascript">
(function($){$.fn.loopedSlider=function(options){var defaults={container:'.container',slides:'.slides',pagination:'.pagination',containerClick:false,autoStart:0,slidespeed:300,fadespeed:300,autoHeight:false};this.each(function(){var obj=$(this);var o=$.extend(defaults,options);var pagination=$(o.pagination+' li a',obj);var m=0;var t=1;var s=$(o.slides,obj).children().size();var w=$(o.slides,obj).children().outerWidth();var p=0;var u=false;var n=0;$(o.slides,obj).css({width:(s*w)});$(o.slides,obj).children().each(function(){$(this).css({position:'absolute',left:p,display:'block'});p=p+w});$(pagination,obj).each(function(){n=n+1;$(this).attr('rel',n);$(pagination.eq(0),obj).parent().addClass('active')});$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});if(o.autoHeight){autoHeight(t)}$('.next',obj).click(function(){if(u===false){animate('next',true);if(o.autoStart){clearInterval(sliderIntervalID)}}return false});$('.previous',obj).click(function(){if(u===false){animate('prev',true);if(o.autoStart){clearInterval(sliderIntervalID)}}return false});if(o.containerClick){$(o.container,obj).click(function(){if(u===false){animate('next',true);if(o.autoStart){clearInterval(sliderIntervalID)}}return false})}$(pagination,obj).click(function(){if($(this).parent().hasClass('active')){return false}else{t=$(this).attr('rel');$(pagination,obj).parent().siblings().removeClass('active');$(this).parent().addClass('active');animate('fade',t);if(o.autoStart){clearInterval(sliderIntervalID)}}return false});if(o.autoStart){sliderIntervalID=setInterval(function(){if(u===false){animate('next',true)}},o.autoStart)}function current(t){if(t===s+1){t=1}if(t===0){t=s}$(pagination,obj).parent().siblings().removeClass('active');$(pagination+'[rel="'+(t)+'"]',obj).parent().addClass('active')};function autoHeight(t){if(t===s+1){t=1}if(t===0){t=s}var getHeight=$(o.slides,obj).children(':eq('+(t-1)+')',obj).outerHeight();$('.container',obj).animate({height:getHeight},o.autoHeight)};function animate(dir,clicked){u=true;switch(dir){case'next':t=t+1;m=(-(t*w-w));current(t);if(o.autoHeight){autoHeight(t)}$(o.slides,obj).animate({left:m},o.slidespeed,function(){if(t===s+1){t=1;$(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});$(o.slides,obj).children(':eq(0)').css({left:0});$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w})}if(t===s)$(o.slides,obj).children(':eq(0)').css({left:(s*w)});if(t===s-1)$(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});u=false});break;case'prev':t=t-1;m=(-(t*w-w));current(t);if(o.autoHeight){autoHeight(t)}$(o.slides,obj).animate({left:m},o.slidespeed,function(){if(t===0){t=s;$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});$(o.slides,obj).css({left:-(s*w-w)});$(o.slides,obj).children(':eq(0)').css({left:(s*w)})}if(t===2)$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});if(t===1)$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});u=false});break;case'fade':t=[t]*1;m=(-(t*w-w));current(t);if(o.autoHeight){autoHeight(t)}$(o.slides,obj).children().fadeOut(o.fadespeed,function(){$(o.slides,obj).css({left:m});$(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});$(o.slides,obj).children(':eq(0)').css({left:0});if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)})}if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w})}$(o.slides,obj).children().fadeIn(o.fadespeed);u=false});break;default:break}}})}})(jQuery);
</SCRIPT>
</head>
<body>
<SCRIPT type=text/javascript>
$(function(){
  $('#newsSlider').loopedSlider({
   autoStart: 2000
  });
 $('.validate_Slider').loopedSlider({
  autoStart: 2000
  });
$("#enter_lab").click(function(){
  window.location=$(this).find("a").attr("href"); return false;});
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</SCRIPT>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新页面后看效果！<br />
<DIV id=newsSlider>
<DIV class=container>
<UL class=slides>
  <LI><A href="http://www.zzjs.net/" target="_blank"><IMG src="/img/j1_20110124zzjs_net.jpg"></A>
   <DL>
    <DT><A href="http://www.zzjs.net/" target="_blank">站长特效一号标题</A></DT>
    <DD><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</DD>
   </DL>
  </LI>
  <LI><A href="http://www.zzjs.net/" target="_blank"><IMG src="/img/j2_20110124zzjs_net.jpg"></A>
   <DL>
    <DT><A href="http://www.zzjs.net/" target="_blank">站长特效二号标题</A></DT>
    <DD><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</DD>
   </DL>
  </LI>
    <LI><A href="http://www.zzjs.net/" target="_blank"><IMG src="/img/j3_20110124zzjs_net.jpg"></A>
   <DL>
    <DT><A href="http://www.zzjs.net/" target="_blank">站长特效三号标题</A></DT>
    <DD><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</DD>
   </DL>
  </LI>
    <LI><A href="http://www.zzjs.net/" target="_blank"><IMG src="/img/j4_20110124zzjs_net.jpg"></A>
   <DL>
    <DT><A href="http://www.zzjs.net/" target="_blank">站长特效四号标题</A></DT>
    <DD><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</DD>
   </DL>
  </LI>
    <LI><A href="http://www.zzjs.net/" target="_blank"><IMG src="/img/j5_20110124zzjs_net.jpg"></A>
   <DL>
    <DT><A href="http://www.zzjs.net/" target="_blank">站长特效五号标题</A></DT>
    <DD><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</DD>
   </DL>
  </LI>
    <LI><A href="http://www.zzjs.net/" target="_blank"><IMG src="/img/j6_20110124zzjs_net.jpg"></A>
   <DL>
    <DT><A href="http://www.zzjs.net/" target="_blank">站长特效六号标题</A></DT>
    <DD><a href="http://www.zzjs.net">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！</DD>
   </DL>
  </LI>
</UL></DIV>
<DIV class=validate_Slider></DIV>
<UL class=pagination>
  <LI><A href="http://www.zzjs.net/">1</A> </LI>
  <LI><A href="http://www.zzjs.net/">2</A> </LI>
  <LI><A href="http://www.zzjs.net/">3</A> </LI>
  <LI><A href="http://www.zzjs.net/">4</A> </LI>
  <LI><A href="http://www.zzjs.net/">5</A> </LI>
  <LI><A href="http://www.zzjs.net/">6</A> </LI>
</UL>
</DIV>
</body>
</html>

关于jquery图文焦点图定时切换广告代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012567150.shtml方便下次再访问哦。

·上一篇： 拍拍网带按钮flash焦点图切换特效
·下一篇： 五屏带缩略图flash+xml焦点图定时切换特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery图文焦点图定时切换广告代码

文章分类LIST >>返回首页

最新游戏

最新新闻