JavaScript   /   113

nivo-slider是一款基于jQuery的幻灯片插件,由Dev7studios发布。插件提供多达十几种的切换效果,甚至可以为不同的单幅幻灯指定特定的更迭特效,基本功能包括自动轮播,数字列表翻页,左右方向翻页等,最主要的是兼容各种浏览器。
插件下载:nivo.slide

在页面头部文件中引入脚本

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js">
</script><script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>

HTML内容部分:

<div class="slider-wrapper">
<div id="slider" class="nivoSlider"><img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img title="#htmlcaption" src="images/slide2.jpg" alt="" /></a>
<img title="This is an example of a caption" src="images/slide3.jpg" alt="" />
<img src="images/slide4.jpg" alt="" /></div>
</div>

CSS样式文件:

.nivoSlider {
position:relative;
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}

这样,最基本的幻灯就已经设置完毕了,如果想更细致的设置幻灯的展示效果,那么可以为他添加nivo-slider的特效设置,所有设置需要用逗号分隔:

<script type="text/javascript">// <![CDATA[
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // 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幻灯脚本插件 nivo.slide 在IE7下无法正常使用:

要解决这个问题很简单,就是当设置这些特效的时候,最后的那项特效设置在结尾是不可以有逗号的,如果无意添加了逗号,那么,在IE7下会导致幻灯无法正常播放,其他版本目前没有这些问题。

网络发现者(aiwei.us)是梁道科技旗下以企业建站,微信开发,视觉设计为主要服务项目的互联网品牌。

我们为企业提供各类互联网平台项目的咨询顾问服务。依靠丰富的互联网实践经验,我们为企业从项目可行性分析,执行策略及方案等方方面面提供合理化建议。