Question

我从dev7工作室复制代码的示例如何在一个网页上插入两个nivo滑块，但我不确定如何调整每个滑块的各个设置，例如如何将第一个滑块添加到只使用箭头，而第二个滑块只使用子弹。另外我如何调整高度和高度？箭头位置的每个滑块的宽度＆amp;子弹。

这是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;
}

这是default.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;
}

Answer 1

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

如果您正在考虑更改每个滑块的外观，这将与您的HTML内联样式以及如何输出外观（默认，亮，暗等）相关。只需将其更改为demo.html文件中的所需皮肤即可。看起来应该是这样的：

div class =“slider-wrapper theme-default”

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

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

.default .nivo-controlNav`和.default .nivo-controlNav a {

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

.default .nivo-directionNav a {

Answer 2

每个滑块的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文件中引用的这些ID，可以获得每个滑块的不同CSS样式。请注意，滑块容器的.nivoSlider类在两个实例中都很常见，因为它连接到滑块工作所需的常规样式。

Nivo Slider - 一个网页上的两个滑块

2 个答案: