[代码样式]slick制作17173 ChainJoy2014幻灯片

简介

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

兼容

浏览器兼容

IE7+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/slick.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/slick.min.js"></script>

2、HTML

<div class="slick">
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/1.jpg" alt="114位ShowGirl同台创CJ纪录"><span>114位ShowGirl同台创CJ纪录</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/2.jpg" alt="专访《射雕ZERO》主策潘松"><span>专访《射雕ZERO》主策潘松</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/3.jpg" alt="小编私藏的本届CJ的极品妹子照"><span>小编私藏的本届CJ的极品妹子照</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/4.jpg" alt="雷死人不偿命的囧图CJ特别版"><span>雷死人不偿命的囧图CJ特别版</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/5.jpg" alt="高端镜头下的喷血ShowGirl"><span>高端镜头下的喷血ShowGirl</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/6.jpg" alt="本届CJ最全胸器妹子合集"><span>本届CJ最全胸器妹子合集</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/images/7.jpg" alt="2014CJ绝对领域福利第二弹"><span>2014CJ绝对领域福利第二弹</span>
</a></div>
<div><a href="https://www.dowebok.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
<img src="https://www.dowebok.com/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  //自动播放
});
});

百度网盘" name="slick制作17173 ChainJoy2014幻灯片" pass="" code=""]