slick制作17173 ChainJoy2014幻灯片

分类：代码 日期：2014-08-05 点击(963) 评论(0)

演 示 下 载

简介

2014 年 ChinaJoy 刚刚结束，你是否还回味那些漂亮的 ShowGirl 呢？不过这里可不是讨论 ShowGirl 哦，我们是来做知名游戏网站 17173 ChinaJoy2014 专题幻灯片的。我们是使用 jQuery幻灯片插件slick 来制作的，开始吧。

兼容

浏览器兼容

IE7+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="css/slick.css">
<script src="js/jquery.min.js"></script>
<script src="js/slick.min.js"></script>

2、HTML

<div class="slick">
    <div><a href="http://">
        <img src="images/1.jpg" alt="114位ShowGirl同台创CJ纪录"><span>114位ShowGirl同台创CJ纪录</span>
    </a></div>
    <div><a href="http://">
        <img src="images/2.jpg" alt="专访《射雕ZERO》主策潘松"><span>专访《射雕ZERO》主策潘松</span>
    </a></div>
    <div><a href="http://">
        <img src="images/3.jpg" alt="小编私藏的本届CJ的极品妹子照"><span>小编私藏的本届CJ的极品妹子照</span>
    </a></div>
    <div><a href="http://">
        <img src="images/4.jpg" alt="雷死人不偿命的囧图CJ特别版"><span>雷死人不偿命的囧图CJ特别版</span>
    </a></div>
    <div><a href="http://">
        <img src="images/5.jpg" alt="高端镜头下的喷血ShowGirl"><span>高端镜头下的喷血ShowGirl</span>
    </a></div>
    <div><a href="http://">
        <img src="images/6.jpg" alt="本届CJ最全胸器妹子合集"><span>本届CJ最全胸器妹子合集</span>
    </a></div>
    <div><a href="http://">
        <img src="images/7.jpg" alt="2014CJ绝对领域福利第二弹"><span>2014CJ绝对领域福利第二弹</span>
    </a></div>
    <div><a href="http://">
        <img src="images/8.jpg" alt="白女侠无下限“摸”遍全场"><span>白女侠无下限“摸”遍全场</span>
    </a></div>
</div>

3、CSS

.slick {
    position: relative;
    width: 850px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
}
.slick span {
    position: absolute;
    left: 0;
    bottom: 10px;
    padding: 0 10px;
    font: bold 22px/65px "Microsoft Yahei";
    color: #fff;
    background-color: #e94880;
}
.slick-dots {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: auto;
}
.slick-dots li {
    display: inline-block;
    width: auto;
    height: 20px;
    margin: 0 0 0 5px;
}
.slick-dots li button {
    display: inline-block;
    width: 20px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff;
}
.slick-dots li button:before {
    display: none;
}
.slick-dots .slick-active button {
    width: 50px;
    background-color: #48d8ff;
}
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    width: 55px;
    height: 80px;
    margin-top: -40px;
    background-color: #000;
    opacity: 0.5;
}
.slick-prev {
    left: 0;
}
.slick-next {
    right: 0;
}
.slick-prev:hover, .slick-next:hover {
    background-color: #43cef2;
}
.slick-prev:before, .slick-next:before {
    font: 60px/80px "SimSun";
}
.slick-prev:before {
    content: "<";
} 
.slick-next:before {
    content: ">";
}

4、JavaScript

$(function(){
    $('.slick').slick({
        dots: true,  //显示项目导航
        fade: true,  //淡入淡出
        autoplay: true  //自动播放
    });
});

演 示 下 载

标签：ChainJoyslick幻灯片