`

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

阅读更多


<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();
    });


http://wserver.co.uk/nivo/demo/multiple.html



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;
		});
	});
分享到:
评论

相关推荐

    jQuery nivo.slider图片滑动幻灯片插件带有标题图

    jQuery nivo.slider是一款广受欢迎的图片滑动幻灯片插件,它以其丰富的特性、出色的动画效果和良好的自定义能力,被广泛应用于网站设计中,为网页增添动态展示的元素。这款插件不仅支持简单的图片轮播,还能配合标题...

    nivo-slider3.2 jquery插件源代码

    《nivo-slider3.2:打造出色的jQuery滑动特效》 在Web开发中,动态、交互的用户体验往往能提升网站的吸引力。nivo-slider3.2是一款基于jQuery的滑动插件,它以其丰富的功能、良好的兼容性和简洁的API,深受开发者...

    jQuery幻灯插件:Nivo Slider

    如果你需要演示新产品,或者你需要比较酷的幻灯片转化效果,Nivo幻灯是你的一个选择之一: 号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义 jQuery插件使用免费

    jquery.nivo.slider.pack

    jquery.nivo.slider.pack

    超好用的jQuery图片轮换插件nivo-slider

    **jQuery图片轮换插件nivo-slider详解** 在网页设计中,动态的图片展示往往能吸引用户的注意力,提升用户体验。jQuery作为一个轻量级、高性能的JavaScript库,为开发者提供了丰富的功能,其中包括各种各样的插件,...

    jquery插件nivo.slider图片切换特效

    **jQuery 插件 Nivo Slider 图片切换特效详解** Nivo Slider是一款基于jQuery库的流行的图片滑块插件,它提供了丰富的图片展示效果和自定义选项,被广泛应用于网站设计中,以创建吸引人的视觉焦点。这个插件以其...

    jquery nivo-slider v3.1 bug修复版

    本版在官方V3.1基本上修改,修复IE下图片的超链接无法点击问题,详细说明请查看博客:http://hi.baidu.com/lisownjay/item/f4bfff88ad343728110ef345

    jQuery渐变式幻灯片nivo slider百叶窗图片切换

    《jQuery渐变式幻灯片nivo slider百叶窗图片切换详解》 在网页设计中,动态效果的应用能够提升用户体验,使网站更具吸引力。其中,jQuery的nivo slider插件是一款广泛使用的幻灯片插件,它以独特的百叶窗图片切换...

    Nivo Slider - jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本。目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓ 16个独特的过渡效果 ✓ 简洁和有效的...

    jQuery的内容滑块(nivo-slider3.1)

    **jQuery内容滑块——Nivo Slider 3.1** Nivo Slider是一款基于jQuery库的高效、灵活且美观的图片滑动展示插件。这个插件以其丰富的动画效果和易用性在网页设计中广受欢迎,它能帮助开发者轻松创建出吸引用户注意力...

    nivo-slider3.2

    nivo-slider3.2是流行的一款jQuery插件,专为网页设计师和开发者提供功能强大、美观且易于定制的滑动图像解决方案。本文将深入探讨nivo-slider3.2的核心特性和应用场景,以帮助读者更好地理解和应用这一工具。 一、...

    jquery.nivo.slider网站焦点图.zip

    jquery.nivo.slider网站焦点图是一款来自某设计网站的jquery焦点图,带有左右箭头,索引按钮,自动轮播切换特效。

    nivo-slider

    nivo-slider是一款广受欢迎的jQuery插件,专门用于创建引人入胜的图片轮播和滑动效果。这款插件以其出色的性能、丰富的定制选项以及对各种设备的良好兼容性,成为了网页设计师的得力工具。在本文中,我们将深入探讨...

    jquery.nivo.slider banner图片不规则随机切换效果下载

    《jQuery Nivo Slider图片不规则随机切换效果解析与应用》 在网页设计中,动态的图片展示能够吸引用户的注意力,提升用户体验。其中,jQuery Nivo Slider是一款广泛应用的JavaScript插件,它提供了丰富的图片轮播...

    幻灯片插件——Nivo Slider的使用(示例代码+Nivo Slider3.2)

    1. jQuery库:Nivo Slider依赖jQuery,因此确保你的页面已经包含了jQuery的最新版本。 2. Nivo Slider CSS样式表:这个文件定义了插件的外观和布局。 3. Nivo Slider JavaScript文件:包含Nivo Slider的主要逻辑。 ...

    jquery image slider

    市面上有许多成熟的jQuery Image Slider插件,如Nivo Slider、FlexSlider、bxSlider等,它们预设了许多样式和配置选项,开发者只需简单调用并配置即可。这些插件通常提供API接口,允许自定义行为,如改变切换速度、...

    【转】jQuery插件推荐:集合多种过渡效果幻灯片插件 Nivo Slider

    Nivo Slider是一款非常受欢迎的jQuery插件,专用于创建引人入胜的过渡效果幻灯片。这款插件因其丰富的自定义选项、平滑的动画效果以及对响应式设计的良好支持而受到开发者们的广泛赞誉。在本文中,我们将深入探讨...

    jquery slider plugins

    **jQuery Slider 插件详解** 在网页设计中,滑块是一种常见的交互元素,它能够以动态的方式展示内容,如图片轮播、时间轴、评分系统等。jQuery 是一个广泛使用的JavaScript库,它提供了丰富的插件来扩展其功能,...

Global site tag (gtag.js) - Google Analytics