0

我从 dev7 studio 的示例中复制了如何在一个网页上插入两个 nivo 滑块的代码,但我不确定如何调整每个滑块的单独设置,例如如何让第一个滑块只使用箭头,而第二个滑块仅使用项目符号。另外,我将如何根据箭头和项目符号的位置调整每个滑块的高度和宽度。

这是style.css:

/*=================================*/
   /* Nivo Slider Demo
   /* November 2010
   /* By: Gilbert Pellegrom
   /* http://dev7studios.com
   /*=================================*/

   /*====================*/
   /*=== 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:#333;
    background:#eee;
}

a, a:visited {
    color:blue;
    text-decoration:none;
}
a:hover, a:active {
    color:#000;
    text-decoration:none;
}

#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}

.default #slider {
    margin:100px auto 0 auto;
    width:960px; /* Make sure your images are the same size */
    height:310px; /* Make sure your images are the same size */
}
.default #slider2 {
    margin:100px auto 0 auto;
    width:280px; /* Make sure your images are the same size */
    height:65px; /* Make sure your images are the same size */
}
slider-wrapper,
lider-wrapper {
    margin-top:150px;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
    clear:both;
}

这是默认的.css:

/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/

.default .nivoSlider {
    position:relative;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.default .nivoSlider a {
    border:0;
    display:block;
}

.default .nivo-controlNav {
    position:absolute;
    left:70px;
    bottom:25px;
    margin-left:-40px; /* Tweak this to center bullets */
    z-index:300;

}



.default .nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:1px;
    float:left;

}








.default .nivo-controlNav a.active {
    background-position:0 -22px;
}

.default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
.default a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
.default a.nivo-prevNav {
    left:15px;
}

.default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.default .nivo-caption a:hover {
    color:#fff;
}
4

2 回答 2

0

要在您的网页上使用多个滑块,您首先需要将 HTML 和 CSS 中的#ID元素更改为.CLASSES,因为我们现在正在创建多个滑块...

如果您正在考虑更改每个滑块的外观,这将与您的HTML内联样式以及皮肤(默认、浅色、深色等)的输出方式有关。只需将其更改为demo.html文件中所需的皮肤。它应该看起来像这样:

div class="slider-wrapper 主题-默认"

现在将“theme-default”替换为例如theme-light

要修改默认皮肤滑块中的项目符号,您需要使用:

.default .nivo-controlNav` 和 .default .nivo-controlNav 一个 {

要修改默认皮肤滑块中的箭头,您需要使用:

.default .nivo-directionNav a {

于 2013-02-28T14:38:18.713 回答
0

每个滑块的 ID 应该不同,然后可以为每个滑块单独编写初始化和设置。

<div id="slider" class="nivoSlider">
    <img src="slide1.jpg" alt="" />
    <img src="slide2.jpg" alt="" />
    <img src="slide3.jpg" alt="" />
    <img src="slide4.jpg" alt="" />
</div>
<script type="text/javascript">
    $('#slider').nivoSlider({
        effect: 'slideInLeft',          // Specify sets like: 'fold,fade,sliceDown'
        slices: 1,                      // For slice animations
        boxCols: 8,                     // For box animations
        boxRows: 4,                     // For box animations
        animSpeed: 500,                 // Slide transition speed
        pauseTime: 3000,                // How long each slide will show
        startSlide: 0,                  // Set starting Slide (0 index)
        directionNav: true,             // Next & Prev navigation
        controlNav: true,               // 1,2,3... navigation
        controlNavThumbs: false,        // Use thumbnails for Control Nav
        pauseOnHover: true,             // Stop animation while hovering
        manualAdvance: false,           // Force manual transitions
        prevText: 'Prev',               // Prev directionNav text
        nextText: 'Next',               // Next directionNav text
        randomStart: false,             // Start on a random slide
        beforeChange: function(){},     // Triggers before a slide transition
        afterChange: function(){},      // Triggers after a slide transition
        slideshowEnd: function(){},     // Triggers after all slides have been shown
        lastSlide: function(){},        // Triggers when last slide is shown
        afterLoad: function(){}         // Triggers when slider has loaded
    });
</script>

每个 jQuery 函数中的 ID 部分应该根据您用于标识 HTML 中每个滑块的两个不同 ID 不同。

$('#slider').nivoSlider({

这意味着您将拥有此代码的两份副本,每个滑块一份。

每个滑块的不同 CSS 样式可以通过 CSS 文件中引用的这些 ID 获得。请注意,滑块容器的 .nivoSlider 类在这两种情况下都很常见,因为它连接到滑块工作所需的一般样式。

于 2014-06-08T15:51:53.750 回答