使用unslider.js图片轮播插件创建一个能轮播24节气的网页
24节气图片来自花瓣网,背景图片来源于网络
unslider.js需要jquery的支持
资源地址github
1.创建html
<!--加载div-->
<div class="unsliderDiv">
<ul>
<li><img src="img/01立春.gif"/></li>
<li><img src="img/02雨水.gif"/></li>
<li><img src="img/03惊蛰.gif"/></li>
<li><img src="img/04春分.jpg"/></li>
<li><img src="img/05清明.gif"/></li>
<li><img src="img/06谷雨.gif"/></li>
<li><img src="img/07立夏.gif"/></li>
<li><img src="img/08小满.gif"/></li>
<li><img src="img/09芒种.gif"/></li>
<li><img src="img/10夏至.gif"/></li>
<li><img src="img/11小暑.gif"/></li>
<li><img src="img/12大暑.gif"/></li>
<li><img src="img/13立秋.gif"/></li>
<li><img src="img/14处暑.gif"/></li>
<li><img src="img/15白露.gif"/></li>
<li><img src="img/16秋分.gif"/></li>
<li><img src="img/17寒露.gif"/></li>
<li><img src="img/18霜降.gif"/></li>
<li><img src="img/19立冬.gif"/></li>
<li><img src="img/20小雪.gif"/></li>
<li><img src="img/21大雪.gif"/></li>
<li><img src="img/22冬至.gif"/></li>
<li><img src="img/23小寒.gif"/></li>
<li><img src="img/24大寒.gif"/></li>
</ul>
</div>
2.css美化
.unsliderDiv {
position: relative;
height: auto;
width: 400px;
overflow: hidden;
margin: 0 auto;
text-align: center;
border: none;
}
.unsliderDiv li {
list-style: none;
}
.unsliderDiv ul li {
float: left;
list-style: none;
}
.unsliderDiv .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}
.unsliderDiv .dots li {
display: inline-block;
width: 3px;
height: 3px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: 0.4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.unsliderDiv .dots li.active {
background: #fff;
opacity: 1;
}
3.javascript代码
var slider = $('.unsliderDiv').unslider({
speed: 3000, // 滚动速度
delay: 2000, // 动画延迟
complete: function() {}, // 动画完成的回调函数
keys: true, // 启动键盘导航
dots: true, // 显示圆点导航
fluid: false // 支持响应式设计
});
同时发布在:shaoxiaobin