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

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

简介

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

兼容

浏览器兼容

[代码样式]slick制作17173 ChainJoy2014幻灯片 [代码样式]slick制作17173 ChainJoy2014幻灯片 [代码样式]slick制作17173 ChainJoy2014幻灯片 [代码样式]slick制作17173 ChainJoy2014幻灯片 [代码样式]slick制作17173 ChainJoy2014幻灯片
IE7+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/slick.css">
<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">
<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">
<img src="https://www.dowebok.com/images/2.jpg" alt="专访《射雕ZERO》主策潘松"><span>专访《射雕ZERO》主策潘松</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="https://www.dowebok.com/images/3.jpg" alt="小编私藏的本届CJ的极品妹子照"><span>小编私藏的本届CJ的极品妹子照</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="https://www.dowebok.com/images/4.jpg" alt="雷死人不偿命的囧图CJ特别版"><span>雷死人不偿命的囧图CJ特别版</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="https://www.dowebok.com/images/5.jpg" alt="高端镜头下的喷血ShowGirl"><span>高端镜头下的喷血ShowGirl</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="https://www.dowebok.com/images/6.jpg" alt="本届CJ最全胸器妹子合集"><span>本届CJ最全胸器妹子合集</span>
</a></div>
<div><a href="https://www.dowebok.com">
<img src="https://www.dowebok.com/images/7.jpg" alt="2014CJ绝对领域福利第二弹"><span>2014CJ绝对领域福利第二弹</span>
</a></div>
<div><a href="https://www.dowebok.com">
<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  //自动播放
});
});
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]baguetteBox.js – 纯JS lightbox库

2020-10-30 10:19:32

脚本代码

[代码样式]简单的jQuery导航菜单固定插件smint

2020-11-6 9:51:17

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索