2顶

多种jquery焦点图切换加载过渡效果

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

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,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,打造一流网页特效站" />
<title>站长特效 多种jquery加载过渡效果焦点图切换特效 站长特效网</title>
<style type="text/css">
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px;
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-weight:inherit;
 font-style:inherit;
 font-size:100%;
 font-family:inherit;
 vertical-align:baseline;
}
body {
 line-height:1;
 color:black;
 background:white;
}
table {
 border-collapse:separate;
 border-spacing:0;
}
caption, th, td {
 text-align:left;
 font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:"";
}
blockquote, q {
 quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
 display: block;
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
 font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
 color:#2d3536;
 background:#e8e0c0 url(/img/background_20110118zzjs_net.png) repeat;
    text-shadow:0 1px 0 #fff;
}
a, a:visited {
 color:#2d3536;
 text-decoration:none;
 border-bottom:1px dotted #826a4d;
}
a:hover, a:active {
 color:#9e805c;
 text-decoration:none;
}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
    background:url(/img/slider_20110118zzjs_net.png) no-repeat;
    width:998px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:50px;
}
#slider {
 position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
 background:url(/img/loading_20110118zzjs_net.gif) no-repeat 50% 50%;
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}
#slider a {
 border:0;
 display:block;
}
.nivo-controlNav {
 position:absolute;
 left:260px;
 bottom:-42px;
}
.nivo-controlNav a {
 display:block;
 width:22px;
 height:22px;
 background:url(/img/bullets_20110118zzjs_net.png) no-repeat;
 text-indent:-9999px;
 border:0;
 margin-right:3px;
 float:left;
}
.nivo-controlNav a.active {
 background-position:0 -22px;
}
.nivo-directionNav a {
 display:block;
 width:30px;
 height:30px;
 background:url(/img/arrows_20110118zzjs_net.png) no-repeat;
 text-indent:-9999px;
 border:0;
}
a.nivo-nextNav {
 background-position:-30px 0;
 right:15px;
}
a.nivo-prevNav {
 left:15px;
}
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
 clear:both;
}
</style>
</head>
<body style="text-align:center">
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

需要加载js文件，请刷新页面后看效果！
    <div id="wrapper">
        <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <a href="http://www.zzjs.net/" target="_blank"><img src="/img/toystory_20110118zzjs_net.jpg" alt="" title="站长特效网一号图片" /></a>
                <a href="http://zzjs.net/" target="_blank"><img src="/img/up_20110118zzjs_net.jpg" alt="" title="站长特效网二号图片" /></a>
                <a href="http://zzjs.net/" target="_blank"><img src="/img/walle_20110118zzjs_net.jpg" alt="" title="站长特效网三号图片" /></a>
                <a href="http://zzjs.net/" target="_blank"><img src="/img/nemo_20110118zzjs_net.jpg" alt="" title="站长特效网四号图片" /></a>
            </div>
        </div>
    </div>
<script type="text/javascript" src="/img/jquery_zzjs.js"></script>
<script type="text/javascript" src="/img/jquery_slider.js"></script>
<script type="text/javascript">
 $(window).load(function() {
  $('#slider').nivoSlider();
 });
</script>
</body>
</html>

关于多种jquery焦点图切换加载过渡效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011011966903.shtml方便下次再访问哦。

·上一篇： flash+xml焦点图立体切换效果
·下一篇： jquery焦点图切换样式随机改变特效

文章分类LIST >>返回首页

排行总榜

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

多种jquery焦点图切换加载过渡效果

文章分类LIST >>返回首页

最新游戏

最新新闻