【重点案例】b站pink老师JavaScript的PC端网页特效 案例代码——网页轮播图
目录
代码段：
1.index.js部分（全是重点）
2.animate.js部分（重点，是之前封装好的动画函数）
3.index.html部分（重点在标红区）
4.index.css部分（重点在标红区）
5.base.css部分（不重要，辅助作用）
6.common.css部分（不重要，辅助作用）
目标效果
1.当鼠标经过（mouseenter 不冒泡）focus区域，显示左右按钮
当鼠标离开（mouseleave 不冒泡）focus区域，隐藏左右按钮
2.动态生成小圆圈 有几个图片，就生成几个小圆圈
3.点击到的小圆圈添加类名current，没点到的去除类名current(排他思想)
4.点击哪个小圆圈，就显示哪个圆圈对应的图片
5.克隆第一张图片到原图片堆的最后
6.点击右侧按钮，图片滚动一张,实现图片的无缝滚动
点击左侧按钮，图片滚动一张,实现图片的无缝滚动
7.点击左侧按钮的时候，小圆圈随之变化
点击右侧按钮的时候，小圆圈随之变化
8.每隔2秒自动播放轮播图
9.当鼠标经过（mouseenter 不冒泡）focus区域，停止8.的自动播放轮播图定时器
当鼠标离开（mouseleave 不冒泡）focus区域，开启8.的自动播放轮播图定时器
10.设置节流阀，使得快速点击左，右按钮的时候，轮播图的滚动不会很快
而是等一张图片的滚动动画执行完毕，再执行下一个滚动动画
1.index.js部分（全是重点）
// 页面都加载完毕再执行JS代码
window.addEventListener('load', function () {
// 获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
// 由于此处focus盒子的大小和li中图片大小一样
// focusWidth写在函数外面，这样就是全局变量，每个函数都可以调用
var focusWidth = focus.offsetWidth;
// 1.当鼠标经过（mouseenter 不冒泡）focus区域，显示左右按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
// 9.当鼠标经过（mouseenter 不冒泡）focus区域，停止8.的自动播放轮播图定时器
clearInterval(timer);
timer = null;//清除定时器变量
})
//1.当鼠标离开（mouseleave 不冒泡）focus区域，隐藏左右按钮
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
// 9.当鼠标离开（mouseleave 不冒泡）focus区域，开启8.的自动播放轮播图定时器
timer = setInterval(function () {
// 由于该自动播放效果与点击右侧按钮效果类似
// 手动调用点击事件
arrow_r.click()
}, 2000);
})
// 2.动态生成小圆圈 有几个图片，就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
// 创建一个li
var li = document.createElement('li');
// 用 自定义属性 记录当前小圆圈的索引号
li.setAttribute('index', i);
// 把li插入到ol子节点列表的末尾
ol.appendChild(li);
// 3.点击到的小圆圈添加类名current，没点到的去除类名current(排他思想)
// 在生成小圆圈的同时即可直接绑定点击事件
li.addEventListener('click', function () {
for (i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
// 4.点击哪个小圆圈，就显示哪个圆圈对应的图片
// 点击哪个li(小圆圈），获得该li(小圆圈）的索引号
var index = this.getAttribute('index');
// 点击哪个li(小圆圈）时，将对应的索引号给num
num = index;
// 点击哪个li(小圆圈）时，将对应的索引号给circle
circle = index;
// 调用在html中引入的封装好的animate.js中的animate函数
// ul中的li中的图片移动距离=小圆圈索引号*ul中li中图片的宽度(图片要往左走 是负值)
animate(ul, -index * focusWidth);
})
}
// 给ol的第一个li添加类名current
ol.children[0].className = 'current';
// 5.克隆第一张图片到原图片堆的最后
// 写在生成小圆圈的后面，所以克隆的图片增加的一个个数，不会影响动态生成小圆圈的个数
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 6.点击右侧按钮，图片滚动一张,实现图片的无缝滚动
// 声明一个全局变量num控制6.中点击右侧按钮，图片滚动到下一张
var num = 0;
// 声明一个全局变量circle控制7.中点击右侧按钮，小圆圈变化
var circle = 0;
//10. flag 节流阀
var flag = true;
arrow_r.addEventListener('click', function () {
if (flag) {
flag = false;//10.关闭节流阀
// 滚到克隆的第一张图片的时候，会到第一张图片，然后重新开始
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
// 调用在html中引入的封装好的animate.js中的animate函数
animate(ul, -num * focusWidth, function () {
flag = true;//10.打开节流阀
});
// 7.点击右侧按钮的时候，小圆圈随之变化（由于点左侧按钮也要有同样效果，所以变量circle为全局变量）
circle++;
// 如果circle == 4说明走到克隆的那个图片了（此处图片5个，小圆圈4个）
if (circle == ol.children.length) {
circle = 0;
}
// 先清除其他小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 给当前小圆圈加上current类名
ol.children[circle].className = 'current';
}
})
// 6.点击左侧按钮的时候，图片滚动一张，实现图片无缝滚动
arrow_l.addEventListener('click', function () {
if (flag) {
flag = false;//10.关闭节流阀
// 滚到第一张图片的时候，会快速跳到克隆的那个图片，然后继续往左滚动
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
// 调用在html中引入的封装好的animate.js中的animate函数
animate(ul, -num * focusWidth, function () {
flag = true;//10.打开节流阀
});
// 7.点击右侧按钮的时候，小圆圈随之变化（由于点左侧按钮也要有同样效果，所以变量circle为全局变量）
circle--;
// 如果circle <0，此时小圆圈要改为第四个小圆圈(该小圆圈索引号为3)
if (circle < 0) {
circle = ol.children.length - 1;
}
// 先清除其他小圆圈的current类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 给当前小圆圈加上current类名
ol.children[circle].className = 'current';
}
})
// 8.每隔2秒自动播放轮播图
var timer = setInterval(function () {
// 由于该自动播放效果与点击右侧按钮效果类似
// 手动调用点击事件
arrow_r.click()
}, 2000);
})2.animate.js部分（重点，是之前封装好的动画函数）
function animate(obj, target, callback) {
//先清除之前的定时器，只保留当前的一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 1.步长值写在定时器里面 步长值=（目标值-现在的位置）/10
var step = Math.ceil(target - obj.offsetLeft) / 10;
//判断步长的正负
// 如果步长为正，往大里取整 Math.ceil
// 如果步长为负，往小里取整 Math.floor
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 2.当盒子位置=目标位置，停止定时器
if (obj.offsetLeft == target) {
//用停止定时器的方式 停止动画
clearInterval(obj.timer);
// 如果有回调函数，调用回调函数
// if (callback) {
// callback();
// }
callback && callback();
}
// 3.把之前每次加1,改为一个慢慢变小的步长值 步长值=（目标值-现在的位置）/10
obj.style.left = obj.offsetLeft + step + 'px';//记得加单位
}, 15)
}3.index.html部分（重点在标红区）
content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
- 家用电器
- 手机通讯
- 家用电器
- 家用电器
- 家用电器
- 家用电器
-
正品保障
正品保障，提供发票
-
正品保障
正品保障，提供发票
-
正品保障
正品保障，提供发票
-
正品保障
正品保障，提供发票
-
正品保障
正品保障，提供发票
- 帮助中心
-
品优购客户端
关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
京ICP备08001421号京公网安备110108007702
4.index.css部分（重点在标红区）
/*这个文件里面放的是 首页的样式*/
.main {
width: 980px;
height: 455px;
margin-left: 219px;
margin-top: 10px;
}
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
left: 0;
top: 0;
/* 由于轮播图要ul使用动画，用动画函数一定要有定位 */
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
/* 先设置隐藏左右按钮 */
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
.newsflash {
width: 250px;
height: 455px;
}
.news {
height: 163px;
border: 1px solid #ccc;
}
.news-hd {
height: 32px;
/*dotted 点线 dashed 虚线*/
border-bottom: 1px dotted #ccc;
padding: 0 15px;
font-size: 14px;
line-height: 32px;
}
.news-hd a {
float: right;
font-size: 12px;
font-family: 'icomoon';
}
.news-bd {
padding: 10px 0 0 15px;
}
.news-bd li {
height: 23px;
}
.lifeservice {
overflow: hidden;
height: 208px;
border: 1px solid #ccc;
border-top: none;
}
.lifeservice ul {
width: 252px;
}
.lifeservice li {
position: relative;
float: left;
width: 62px;
height: 70px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.lifeservice li a {
display: block;
/* overflow: hidden; 解决i 引起的 外边距塌陷合并的问题*/
overflow: hidden;
height: 100%;
}
.lifeservice li p {
text-align: center;
}
.hot {
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 15px;
background: url(../img/jian.jpg) no-repeat;
}
.service_ico {
display: block;
width: 24px;
height: 24px;
background: url(../img/icons.png) no-repeat;
margin: 10px auto;
}
.service_ico_huafei {
background-position: -17px -16px;
}
.service_ico_feiji {
width: 26px;
background-position: -78px -16px;
}
.bargain {
height: 75px;
margin-top: 5px;
}
/*推荐模块*/
.recommend {
height: 163px;
margin-top: 10px;
}
.recom-hd {
width: 200px;
height: 163px;
background-color: #5c5251;
text-align: center;
}
.recom-hd img {
margin: 30px 0 10px 0;
}
.recom-hd h3 {
font-size: 18px;
color: #fff;
font-weight: normal;
}
.recom-bd {
width: 1000px;
height: 163px;
background-color: #ebebeb;
}
.recom-bd li {
float: left;
width: 249px;
height: 145px;
border-right: 1px solid #ccc;
margin-top: 10px;
}
.recom-bd .last {
border-right: 0;
}
/*floor 楼层区*/
.box-hd {
height: 30px;
border-bottom: 2px solid #c81623;
margin-top: 25px;
}
.box-hd h3 {
float: left;
font-size: 18px;
color: #c81623;
}
.tab-list {
float: right;
line-height: 30px;
}
.tab-list li {
float: left;
}
.tab-list li a {
margin: 0 15px;
}
.box-bd {
height: 360px;
}
.w209 {
width: 209px;
background-color: #f9f9f9;
}
.w329 {
width: 329px;
}
.w219 {
width: 219px;
border-right: 1px solid #ccc;
}
.w220 {
width: 220px;
border-right: 1px solid #ccc;
}
.tab-con li {
float: left;
height: 360px;
}
.tab-con-item {
border-bottom: 1px solid #ccc;
}
.tab-con-list {
overflow: hidden;
margin-bottom: 15px;
}
.tab-con-list li {
width: 86px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid #ccc;
margin-left: 10px;
text-align: center;
}
.box-bd li {
overflow: hidden;
}
.box-bd img {
/*过渡写到本身上， 谁做动画，给谁加*/
transition: all .2s;
}
/*我们鼠标经过图片 往右走 8px*/
.box-bd img:hover {
margin-left: 8px;
}
/*电梯导航*/
.fixedtool {
position: fixed;
top: 100px;
left: 50%;
margin-left: -676px;
width: 66px;
background-color: #fff;
}
.fixedtool li {
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.fixedtool .current {
background-color: #c81623;
color: #fff;
}
5.base.css部分（不重要，辅助作用）
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
li {
list-style: none;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
button,
input {
font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
/*取消轮廓线 蓝色的*/
outline: none;
}
body {
background-color: #fff;
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
color: #666
}
.hide,
.none {
display: none;
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
6.common.css部分（不重要，辅助作用）
/*公共样式*/
.fl {
float: left;
}
.fr {
float: right;
}
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.fr .icomoon {
font-family: 'icomoon';
font-size: 16px;
line-height: 26px;
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
.style-red {
color: #c81623;
}
.spacer {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 12px 0;
}
/*顶部快捷导航*/
.shortcut {
height: 31px;
background-color: #f1f1f1;
line-height: 31px;
}
.shortcut li {
float: left;
}
/*header区域*/
.header {
position: relative;
height: 105px;
}
.logo {
position: absolute;
top: 25px;
left: 0;
width: 175px;
height: 56px;
}
.logo a {
display: block;
/*overflow: hidden;*/
width: 175px;
height: 56px;
background: url(../img/logo.png) no-repeat;
/*text-indent: -999px;*/
font-size: 0;
}
.search {
position: absolute;
top: 25px;
left: 348px;
}
.text {
float: left;
width: 445px;
height: 32px;
border: 2px solid #b1191a;
padding-left: 10px;
color: #ccc;
}
.btn {
float: left;
width: 82px;
height: 36px;
background-color: #b1191a;
border: 0;
font-size: 16px;
color: #fff;
}
.hotwrods {
position: absolute;
top: 65px;
left: 348px;
}
.hotwrods a {
margin: 0 10px;
}
.shopcar {
position: absolute;
top:25px;
right: 64px;
width: 138px;
height: 34px;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
line-height: 34px;
text-align: center;
}
.car {
font-family: 'icomoon';
color: #da5555;
}
.arrow {
font-family: 'icomoon';
margin-left: 5px;
}
.count {
position: absolute;
top: -5px;
/*应该是左侧对齐 文字才能往右走显示*/
left: 100px;
background-color: #e60012;
height: 14px;
padding: 0 3px;
line-height: 14px;
color: #fff;
/*border-radius: 左上角 右上角 右下角 左下角;*/
border-radius: 7px 7px 7px 0;
}
/*nav start*/
.nav {
height: 45px;
border-bottom: 2px solid #b1191a;
}
.dropdown {
width: 209px;
height: 45px;
}
.dropdown .dt {
height: 100%;
background-color: #b1191a;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 45px;
}
.dropdown .dd {
height: 465px;
background-color: #c81623;
margin-top: 2px;
}
.menu_item:hover {
background-color: #fff;
}
/*鼠标经过li 里面的 a变颜色*/
.menu_item:hover a {
color: #c81623;
}
.menu_item {
height: 31px;
line-height: 31px;
margin-left: 1px;
padding: 0 10px;
transition: all .5s;
}
.menu_item:hover {
padding-left: 20px;
}
.menu_item a {
font-size: 14px;
color: #fff;
}
.menu_item i {
float: right;
font-family: 'icomoon';
font-size: 18px;
color: #fff;
}
.navitems {
margin-left: 10px;
}
.navitems li {
float: left;
}
.navitems li a {
display: block;
height: 45px;
padding: 0 25px;
line-height: 45px;
font-size: 16px;
}
/*footer 部分*/
.footer {
height: 386px;
background-color: #f5f5f5;
padding-top: 30px;
}
.mod_service {
height: 79px;
border-bottom: 1px solid #ccc;
}
.mod_service li {
float: left;
width: 240px;
height: 79px;
}
.mod-service-icon {
/*浮动的盒子 可以直接给大小的 不需要转换*/
float: left;
width: 50px;
height: 50px;
margin-left: 35px;
background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
background-position: -253px -3px;
}
.mod_service_tit {
float: left;
margin-left: 5px;
}
.mod_service_tit h5 {
margin: 5px 0;
}
.mod_service_kuai {
background-position: -255px -54px;
}
.mod_service_bao {
background-position: -257px -105px;
}
.mod_help {
height: 187px;
border-bottom: 1px solid #ccc;
}
.mod_help_item {
float: left;
width: 150px;
padding: 20px 0 0 50px;
}
.mod_help_item dt {
height: 25px;
font-size: 16px;
}
.mod_help_item dd {
height: 22px;
}
.mod_help_app dt,
.mod_help_app p {
padding-left: 15px;
}
.mod_help_app img {
margin: 7px 0;
}
.mod_copyright {
text-align: center;
}
.mod_copyright_links {
margin: 20px 0 15px 0;
}
.mod_copyright_info {
line-height: 18px;
}