`

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插件集合

    1. **Image Sliders** - 如Nivo Slider和FlexSlider,创建吸引人的图片轮播效果,可用于展示产品或服务。 2. **Lightboxes** - 插件如Fancybox和Colorbox,提供弹出式的图片查看体验,增强图片的展示效果。 3. **...

    15个最佳jQuery幻灯插件和教程(1)

    2. **jQuery UI Sliders**:虽然不是专为幻灯片设计,但jQuery UI的Slider组件可以轻松实现类似的效果,特别适合创建具有多个滑块的复杂交互式幻灯片。 3. **Nivo Slider**:Nivo Slider以其华丽的过渡效果和易于...

    jquery 效果大全

    - Nivo Slider:强大的图片轮播组件。 - Tooltip:创建提示信息框,提高用户体验。 - Accordion:手风琴效果,常用于导航菜单或内容折叠。 - Carousel:旋转木马效果,适用于产品展示。 7. **页面交互**: - ...

    10 jQuery Plugins and Techniques for Doing More with Images

    例如,Nivo Slider和bxSlider是广受欢迎的jQuery幻灯片插件。 2. **响应式图像处理**: 在现代网页设计中,响应式布局至关重要。jQuery插件如Responsify.js可以帮助自动调整图像大小,以适应不同设备的屏幕尺寸,...

    手机wap源码模板 (35).zip

    8. **home-slider-nivo.html**:使用Nivo Slider插件的首页滑块模板,Nivo Slider是一款流行的jQuery滑块插件,提供丰富的动画效果。 9. **tables-sliders.html**:包含表格和滑块元素的页面,可能用于数据展示或者...

    30个精美的jQuery幻灯片效果插件和教程

    这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意力。如果你想知道这是如何实现的,那么本文收集的30个幻灯片...COLORFUL SLIDERS WITH JQUERY & CSS3 Live Demo HOW TO CREATE A SIMPLE ITUNES-

    网站前端网页源码模板 (833).zip

    8. **home-slider-nivo.html**:另一个首页幻灯片模板,这次使用了Nivo Slider插件,这是一个流行且功能丰富的jQuery滑块库,提供多种过渡效果。 9. **tables-sliders.html**:此文件可能包含带有滑块或滚动效果的...

Global site tag (gtag.js) - Google Analytics