建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery幻灯片图片切换插件JQuery.nivo.slider.js

来源:易助科技网浏览量:23收藏

简介


Nivoslider是一款基于jQuery的,能实现多种切换效果的图片切换插件。Nivoslider提供了11种切换效果,支持多种参数配置和方法函数调用,使用简单,是一款非常理想的图片切换插件。


JQuery幻灯片图片切换插件JQuery.nivo.slider.js-示例图



使用


1.  引入 jquery.js 、 nivo-slider.css 及 jquery.nivo.slider.js文件


2.  HTML


<div id="slider" class="nivoSlider">
  <a href="javascript:void(0);">
    <img src="images/s1.jpg" alt="" title="好漂亮的狗狗..."  />
  </a>
  
  <a href="javascript:void(0);">
    <img src="images/s2.jpg" alt="" title="图片标题..." />
  </a>
  
  <a href="javascript:void(0);">
    <img src="images/s3.jpg" alt="" title="#htmlcaption" />
  </a>
</div>

<div id="htmlcaption" class="nivo-html-caption">
  <strong>图片标题</strong>,支持HTML标签<a href="http://www.helloweba.com">helloweba.com</a>.
</div>


3.  调用


<script type="text/javascript">
  $(function() {
    $('#slider').nivoSlider();
  });
</script>



相关链接


GitHub 地址 : https://github.com/Codeinwp/Nivo-Slider-jQuery

演示地址 :http://www.ibloger.net/assets/demos/jquery.nivo.slider/index.html