标签：
新项目中需要使用到图片轮播，找了找插件unslider比较合心意
然后在网上找了许多例子，然而这些例子使用的版本好像不是最新的2.0版本所以代码无法正常使用
于是跑到官网去一通乱找（汗，英语不好是硬伤呀），这里总结一下简单的用法，更多的内容大家可以去官网看看 http://unslider.com/
大神勿喷
/* 引入js和css文件 */ <link href="Scripts/unslider/css/unslider-dots.css" rel="stylesheet" /> <link href="Scripts/unslider/css/unslider.css" rel="stylesheet" /> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/unslider/js/unslider-min.js"></script>
这里为了样式好看和满足自己的需求需要自己修改一些css样式，比如修改.unslider-nav，让导航滑块位于滑动区域内部
/* css代码 */ <style> body { margin: 0; } .banner { position: relative; overflow: hidden; } .bg { width: 100%; height: 666px; background-position: center top; background-repeat: no-repeat; display: block; } .unslider-nav { bottom: 25px; position: absolute; left: 0; right: 0; } .unslider-nav ol li { text-indent: inherit; width: 20px; height: 20px; color: #DE1178; font-weight: bold; border-radius: 50%; text-align: center; font-size: 13px; line-height: 20px; } </style>
如果你只需要一个简单图片轮播那个使用简单配置就可以了，更多配置可以让你可以更好的操控你的轮播，这里我没有使用到 arrows 有需要的可以去官网看看
/* js代码 */ <script> /* 简单配置 */ //$(function () { // var unslider = $(‘.banner‘).unslider({ // animation: ‘horizontal‘,//滚动模式：垂直 // autoplay: true, //自动滚动 // infinite: true, //无限循环 // arrows: false, //next|prve 箭头 // delay: 3000 //滚动速度 // }); //}); $(function () { var unslider = $(‘.banner‘).unslider({ animation: ‘horizontal‘,//滚动模式，horizontal：由左向右滚动，vertical：由上向下滚动，fade：淡出淡入，默认：horizontal autoplay: true, //自动滚动 infinite: true, //无限循环 arrows: false, //next|prve 箭头，默认：true delay: 3000, //滚动时间间隔 speed: 750, // 滚动速度 //nav: true, // 导航滑块,默认：true nav: function (index, label) { return Nav(index, label) }, //自定义导航滑块,这个需要修改.unslider-nav ol li 样式 index: 0, //开始位置first或last，默认：first keys: true, // 是否支持键盘控制，默认：true }); }); function Nav(index, label) { /* 如果返回文字 */ if (index == 0) return ‘壹‘; else if (index == 1) return ‘贰‘; else if (index == 2) return ‘叁‘; else if (index == 3) return ‘肆‘; else if (index == 4) return ‘伍‘; /* 如果返回数字 */ // return index + 1; } </script>
/* js代码（简单版） */ $(function () { var unslider = $(‘.banner‘).unslider({ animation: ‘horizontal‘,//滚动模式：垂直 autoplay: true, //自动滚动 infinite: true, //无限循环 arrows: false, //next|prve 箭头 delay: 3000 //滚动速度 }); });
/* html代码 */ <div class="banner"> <ul> <li class="bg" style="background-image:url(Images/121872903560b1369dc64b4814de7593.jpg)"></li> <li class="bg" style="background-image:url(Images/24e2931de5206292d5468e1123e0ca43.jpg)"></li> <li class="bg" style="background-image:url(Images/35368855729ed601a90837b3ba7131e1.jpg)"></li> <li class="bg" style="background-image:url(Images/466103a685d1ee2eb8020172c50feb52.jpg)"></li> <li class="bg" style="background-image:url(Images/acc64092710b0ee253e1c2a881812524.jpg)"></li> </ul> </div>
/* 附demo */
标签：
原文地址：http://www.cnblogs.com/yuanyue/p/5438262.html
