FlexSlider制作新浪2014成都车展幻灯片
分类：代码 日期： 点击(960) 评论(0)
简介
2014 成都国际车展已于昨天（8月29日）启动，各大门户网站都制作了专题，今天我们用 jQuery 幻灯片插件 FlexSlider 来制作新浪车展专题的幻灯片。
浏览器兼容
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE6+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
制作方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script>
2、HTML
<div class="dowebok"> <ul class="slides"> <li><a href="###"><img src="images/1.jpg" alt="pic1"></a></li> <li><a href="###"><img src="images/2.jpg" alt="pic2"></a></li> <li><a href="###"><img src="images/3.jpg" alt="pic3"></a></li> <li><a href="###"><img src="images/4.jpg" alt="pic4"></a></li> <li><a href="###"><img src="images/5.jpg" alt="pic5"></a></li> </ul> </div>
3、CSS
* {
margin:0;
padding:0;
}
.dowebok {
position:relative;
width:660px;
height:436px;
margin:0 auto;
overflow:hidden;
}
.dowebok img {
display:block;
border:0 none;
}
.dowebok ul,.dowebok ol {
list-style-type:none;
}
.flex-viewport {
z-index:1;
}
.flex-control-nav {
position:absolute;
right:110px;
bottom:10px;
z-index:2;
width:130px;
text-align:right;
}
.flex-control-nav li {
display:inline-block;
*display:inline;
zoom:1;
}
.flex-control-nav a {
float:left;
width:23px;
height:23px;
line-height:100px;
overflow:hidden;
background:url(images/dot1.png) 4px 4px no-repeat;
cursor:pointer;
}
.flex-control-nav .flex-active {
background:url(images/dot2.png) 3px 3px no-repeat;
}
.flex-direction-nav {
position:absolute;
z-index:3;
right:0;
bottom:0;
width:100px;
height:50px;
}
.flex-direction-nav li {
float:left;
}
.flex-direction-nav a {
float:left;
width:50px;
height:50px;
text-indent:-9999px;
overflow:hidden;
}
.flex-prev {
background:#fff url(images/bg.png) 0 0 no-repeat;
}
.flex-prev:hover {
background-position:0 -50px;
}
.flex-next {
background:#fff url(images/bg.png) right 0 no-repeat;
}
.flex-next:hover {
background-position:-50px -50px;
}
4、JavaScript
$(function(){
$('.dowebok').flexslider({
animation: 'slide',
pauseOnHover: true,
prevText: '上一个',
nextText: '下一个'
});
});
