演 示 下 载

简介

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: '下一个'
    });
});