0顶

jquery+css制作漂亮带按钮五屏焦点图切换特效

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

jquery焦点图切换广告代码，右下角带编号按钮，可直接点击切换，自定义切换速度。

以下讨论的是和jquery 按钮焦点图图片切换相关的jquery+css制作漂亮带按钮五屏焦点图切换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(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=utf-8" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>站长特效 jquery+css制作漂亮带按钮五屏焦点图切换特效 站长特效网</title>
<style type=text/css>
ul li{list-style-type:none;}
IMG {
 BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px
}
.box_zzjs_net{margin:0px auto;WIDTH: 416px; HEIGHT: 260px;}
#slider_zzjs {
 POSITION: absolute; WIDTH: 416px; HEIGHT: 243px;  CLEAR: both;
}
* HTML #slider_zzjs {
 POSITION: absolute; WIDTH: 416px; HEIGHT: 243px;  CLEAR: both;
}
#slider_zzjs .cont_zzjs {
 POSITION: relative; MARGIN-TOP: 15px; WIDTH: 416px; HEIGHT: 243px; OVERFLOW: hidden
}
#slider_zzjs .cont_zzjs IMG {
 WIDTH: 416px; HEIGHT: 243px
}
#slider_zzjs DIV.slides {
 POSITION: absolute; TOP: 0px; LEFT: 0px
}
#slider_zzjs UL.slides {
 POSITION: absolute; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px
}
#slider_zzjs UL.slides DL {
 WIDTH: 584px; FLOAT: left; HEIGHT: 43px; PADDING-TOP: 3px
}
#slider_zzjs UL.slides DT {
 LINE-HEIGHT: 18px; WIDTH: 400px; FLOAT: left; HEIGHT: 39px; COLOR: #777777; MARGIN-LEFT: 3px
}
#slider_zzjs UL.slides DT A {
 COLOR: #777777; FONT-SIZE: 12px
}
#slider_zzjs UL.slides DD {
 TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 180px; FONT-FAMILY: "黑体"; FLOAT: left; HEIGHT: 39px; COLOR: #333333; FONT-SIZE: 16px
}
#slider_zzjs UL.slides DD A {
 FONT-FAMILY: "黑体"; COLOR: #333; FONT-SIZE: 16px; TEXT-DECORATION: none
}
#slider_zzjs UL.slides DD .more {
 MARGIN-TOP: -22px; WIDTH: 54px; FLOAT: right; HEIGHT: 16px; COLOR: #2a609f; FONT-SIZE: 12px; OVERFLOW: hidden
}
#slider_zzjs UL.slides DD .more A {
 COLOR: #2a609f
}
#slider_zzjs DIV.slides DIV {
 POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 584px; PADDING-RIGHT: 0px; DISPLAY: none; TOP: 0px; PADDING-TOP: 0px
}
#slider_zzjs #loopedSlider {
 POSITION: relative; MARGIN: 0px auto; WIDTH: 416px; CLEAR: both
}
#slider_zzjs UL.nation_zzjs {
 POSITION: absolute; BOTTOM: -40px; RIGHT: -5px; _bottom: -25px
}
#slider_zzjs UL.nation_zzjs LI {
 TEXT-ALIGN: center; WIDTH: 34px; FLOAT: left; HEIGHT: 60px; MARGIN-RIGHT: 5px
}
#slider_zzjs UL.nation_zzjs LI A {
 TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 34px; FONT-FAMILY: "宋体"; BACKGROUND: url(/img/blue_20110119zzjs_net.png) no-repeat right bottom; FLOAT: left; HEIGHT: 22px; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none; PADDING-TOP: 13px
}
#slider_zzjs UL.nation_zzjs LI.active A {
 TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 34px; FONT-FAMILY: "宋体"; BACKGROUND: url(/img/green_20110119zzjs_net.png) no-repeat right bottom; FLOAT: left; HEIGHT: 30px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none; PADDING-TOP: 5px
}
UL.nation_zzjs LI A:hover {
 TEXT-ALIGN: left; LINE-HEIGHT: 20px; WIDTH: 34px; FONT-FAMILY: "宋体"; BACKGROUND: url(/img/green_20110119zzjs_net.png) no-repeat right bottom; FLOAT: left; HEIGHT: 35px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none
}
* HTML #slider_zzjs UL.nation_zzjs LI A {
 TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 34px; FONT-FAMILY: "宋体"; BACKGROUND: url(/img/blue_20110119zzjs_net.gif) no-repeat right bottom; FLOAT: left; HEIGHT: 22px; COLOR: #000000; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none; PADDING-TOP: 13px
}
* HTML #slider_zzjs UL.nation_zzjs LI.active A {
 TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 34px; FONT-FAMILY: "宋体"; BACKGROUND: url(/img/green_20110119zzjs_net.gif) no-repeat right bottom; FLOAT: left; HEIGHT: 30px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none; PADDING-TOP: 5px
}
* HTML UL.nation_zzjs LI A:hover {
 TEXT-ALIGN: left; LINE-HEIGHT: 20px; WIDTH: 34px; FONT-FAMILY: "宋体"; BACKGROUND: url(/img/green_20110119zzjs_net.gif) no-repeat right bottom; FLOAT: left; HEIGHT: 35px; COLOR: #ffffff; FONT-SIZE: 12px; FONT-WEIGHT: normal; MARGIN-RIGHT: 2px; TEXT-DECORATION: none
}
</style>
<SCRIPT src="/img/jquery_zzjs.js"></SCRIPT>
<SCRIPT src="/img/loopedslider.js"></SCRIPT>
<script type="text/javascript">
$(function(){
$('#slider_zzjs').loopedSlider({
//4秒
autoStart: 4000
});//欢迎来到站z长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
$('.slider_zzjs_net').loopedSlider({
autoStart: 4000
});
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</SCRIPT>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新页面后看效果！
<div class="box_zzjs_net">
 
 <DIV id=slider_zzjs>
 <DIV class=cont_zzjs>
 <UL class=slides>
   <LI><A href="http://www.zzjs.net/" target=_blank><IMG src="/img/01_20110119zzjs_net.jpg"></A>
   <LI><A href="http://www.zzjs.net/" target=_blank><IMG src="/img/02_20110119zzjs_net.jpg"></A>
   <LI><A href="http://www.zzjs.net/" target=_blank><IMG src="/img/03_20110119zzjs_net.jpg"></A>
   <LI><A href="http://www.zzjs.net/" target=_blank><IMG src="/img/04_20110119zzjs_net.jpg"></A>
   <LI><A href="http://www.zzjs.net/" target=_blank><IMG src="/img/05_20110119zzjs_net.jpg"></A> </LI></UL></DIV>
 <DIV class=slider_zzjs_net></DIV>
 <UL class=nation_zzjs>
   <LI><A href="#">1</A> </LI>
   <LI><A href="#">2</A> </LI>
   <LI><A href="#">3</A> </LI>
   <LI><A href="#">4</A> </LI>
   <LI><A href="#">5</A> </LI></UL></DIV>
 
</div>
</body>
</html>

关于jquery+css制作漂亮带按钮五屏焦点图切换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011012467129.shtml方便下次再访问哦。

·上一篇： 京东商城产品内页多图切换放大镜预览特效
·下一篇： 淘宝网带左右按钮js+css焦点图切换特效

文章分类LIST >>返回首页

排行总榜

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

jquery+css制作漂亮带按钮五屏焦点图切换特效

文章分类LIST >>返回首页

最新游戏

最新新闻