Two nivo sliders on same page,Jquery multiple Nivo Slider on a page

Nivo Slider配置示例

最新推荐文章于 2020-07-10 23:57:01 发布

原创最新推荐文章于 2020-07-10 23:57:01 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #jquery #slider #page #ViewUI

本文介绍了一个使用jQuery Nivo Slider插件实现的图片轮播示例，展示了如何配置多个轮播图及其对应的HTML注释，并通过jQuery进行初始化。

[img]http://dl.iteye.com/upload/picture/pic/126007/5ca9ee87-07c8-3c7e-aa79-6066b21272f6.jpg[/img]


<div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>

        <br />

        <div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider2" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>


<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
        $('#slider2').nivoSlider();
    });

[url]http://wserver.co.uk/nivo/demo/multiple.html[/url]

[img]http://dl.iteye.com/upload/picture/pic/126011/36e8b079-8710-3962-a6ac-de09faafc835.jpg[/img]


jQuery1_4(window).load(function() {
		jQuery1_4('#slider').nivoSlider();
		// 针对第二个slider的控制
		jQuery1_4('#slider2').nivoSlider();
		jQuery1_4('#slider2 > .nivo-controlNav').css({
			"bottom" : "0px",
			"left" : "100px",
			"top" : "165px"
		});

		jQuery('.adMaskTop').click(function(){
			getSliderUrl();
			window.location.href = _PAGE.sliderUrl;
		});
	});