【重点案例】b站pink老师JavaScript的PC端网页特效案例代码——网页轮播图

快意人生大社畜

已于 2023-07-05 18:42:43 修改

阅读量3.1k

点赞数 9

分类专栏： JavaScript 文章标签： javascript html 前端

于 2022-09-15 16:57:52 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/126874440

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

代码段：

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部分（重点在标红区）

<!DOCTYPE html>

<head>

<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

</head>

<body>

<ul>

<li>品优购欢迎您！ </li>

<li>

</li>

</ul>

</div>

<ul>

<li>

<a href="#">我的品优购</a>

</li>

<li><a href="#">品优购会员</a></li>

<li><a href="#">关注品优购</a> <i class="icomoon"></i></li>

</ul>

</div>

<h1>

</h1>

</div>

</div>

<a href="#" class="style-red">优惠购首发</a>

</div>

<i class="car"> </i>我的购物车 <i class="arrow">  </i>

</div>

<div class="dt"> 全部商品分类 </div>

<ul>

<a href="list.html">手机</a> 、

<a href="#">数码</a> 、

</li>

</ul>

</div>

<ul>

</ul>

</div>

</a>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</ol>

</div>

品优购快报

</div>

<ul>

<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>

<li><a href="#">【特惠】长虹智能空调立省1000</a></li>

</ul>

</div>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

</div>

</div>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</a>

</li>

</ul>

</div>

<ul>

</ul>

</div>

<li>

</li>

<li>

</li>

<li>

<a href="#">空气净化器</a>

</li>

<li>

<a href="#">IH电饭煲</a>

</li>

<li>

<a href="#">滚筒洗衣机</a>

</li>

<li>

</li>

</ul>

</li>

</li>

</a>

</div>

</a>

</div>

</li>

</a>

</div>

</li>

</a>

</div>

</a>

</div>

</li>

</ul>

<!-- <ul class="tab-con">

</ul> -->

</div>

<ul>

</ul>

</div>

<li>

</li>

<li>

</li>

<li>

<a href="#">空气净化器</a>

</li>

<li>

<a href="#">IH电饭煲</a>

</li>

<li>

<a href="#">滚筒洗衣机</a>

</li>

<li>

</li>

</ul>

</li>

</li>

</a>

</div>

</a>

</div>

</li>

</a>

</div>

</li>

</a>

</div>

</a>

</div>

</li>

</ul>

<!-- <ul class="tab-con">

</ul> -->

</div>

<ul>

</ul>

</div>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

</dl>

</dl>

</dl>

</dl>

</dl>

<dd>

<p>品优购客户端</p>

</dd>

</dl>

</div>

</p>

地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>

京ICP备08001421号京公网安备110108007702

</p>

</div>

</body>

</html>

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;
}