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

3周前 (04-21 13:16)阅读24回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4494
  • 级别管理员
  • 主题898
  • 回复2
楼主

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

<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种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/20240421_www_wuming_ren_23.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_wuming_ren.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;});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！<br />
<DIV id=newsSlider>
<DIV class=container>
<UL class=slides>
  <LI><A href="https://www.wuming.ren/" target="_blank"><IMG src="/img/20240421_www_wuming_ren_24.jpg"></A>
   <DL>
    <DT><A href="https://www.wuming.ren/" target="_blank">武鸣人一号标题</A></DT>
    <DD><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</DD>
   </DL>
  </LI>
  <LI><A href="https://www.wuming.ren/" target="_blank"><IMG src="/img/20240421_www_wuming_ren_25.jpg"></A>
   <DL>
    <DT><A href="https://www.wuming.ren/" target="_blank">武鸣人二号标题</A></DT>
    <DD><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</DD>
   </DL>
  </LI>
  
    <LI><A href="https://www.wuming.ren/" target="_blank"><IMG src="/img/20240421_www_wuming_ren_26.jpg"></A>
   <DL>
    <DT><A href="https://www.wuming.ren/" target="_blank">武鸣人三号标题</A></DT>
    <DD><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</DD>
   </DL>
  </LI>
  
    <LI><A href="https://www.wuming.ren/" target="_blank"><IMG src="/img/20240421_www_wuming_ren_27.jpg"></A>
   <DL>
    <DT><A href="https://www.wuming.ren/" target="_blank">武鸣人四号标题</A></DT>
    <DD><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</DD>
   </DL>
  </LI>
  
    <LI><A href="https://www.wuming.ren/" target="_blank"><IMG src="/img/20240421_www_wuming_ren_28.jpg"></A>
   <DL>
    <DT><A href="https://www.wuming.ren/" target="_blank">武鸣人五号标题</A></DT>
    <DD><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</DD>
   </DL>
  </LI>
  
    <LI><A href="https://www.wuming.ren/" target="_blank"><IMG src="/img/20240421_www_wuming_ren_29.jpg"></A>
   <DL>
    <DT><A href="https://www.wuming.ren/" target="_blank">武鸣人六号标题</A></DT>
    <DD><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</DD>
   </DL>
  </LI>
</UL></DIV>
<DIV class=validate_Slider></DIV>
<UL class=pagination>
  <LI><A href="https://www.wuming.ren/">1</A> </LI>
  <LI><A href="https://www.wuming.ren/">2</A> </LI>
  <LI><A href="https://www.wuming.ren/">3</A> </LI>
  <LI><A href="https://www.wuming.ren/">4</A> </LI>
  <LI><A href="https://www.wuming.ren/">5</A> </LI>
  <LI><A href="https://www.wuming.ren/">6</A> </LI>
</UL>
</DIV>
</body>
</html>


赞0
踩0
☆收藏0
定时编号图片切换
回帖

jquery焦点图定时切换广告代码 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息