引入文件
<link rel="stylesheet" href="css/slick.css">
<script src="js/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
JavaScript
$(function(){
$('.slick').slick({
dots: true, //显示项目导航
fade: true, //淡入淡出
autoplay: true //自动播放
});
});
HTML
<div class="slick">
<div><a href="https://www.dowebok.com">
<img src="images/1.jpg" alt="114位ShowGirl同台创CJ纪录"><span>114位ShowGirl同台创CJ纪录</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/2.jpg" alt="专访《射雕ZERO》主策潘松"><span>专访《射雕ZERO》主策潘松</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/3.jpg" alt="小编私藏的本届CJ的极品妹子照"><span>小编私藏的本届CJ的极品妹子照</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/4.jpg" alt="雷死人不偿命的囧图CJ特别版"><span>雷死人不偿命的囧图CJ特别版</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/5.jpg" alt="高端镜头下的喷血ShowGirl"><span>高端镜头下的喷血ShowGirl</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/6.jpg" alt="本届CJ最全胸器妹子合集"><span>本届CJ最全胸器妹子合集</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/7.jpg" alt="2014CJ绝对领域福利第二弹"><span>2014CJ绝对领域福利第二弹</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="images/8.jpg" alt="白女侠无下限“摸”遍全场"><span>白女侠无下限“摸”遍全场</span>
</a></div>
</div>
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: ">";
}