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

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

时间：2022-08-25 05:21:17

代码段：

1.index.js部分（全是重点）

2.animate.js部分（重点，是之前封装好的动画函数）

3.index.html部分（重点在标红区）

4.index.css部分（重点在标红区）

5.base.css部分（不重要，辅助作用）

mon.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++) {// 创建一个livar 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(小圆圈）时，将对应的索引号给numnum = index;// 点击哪个li(小圆圈）时，将对应的索引号给circlecircle = index;// 调用在html中引入的封装好的animate.js中的animate函数// ul中的li中的图片移动距离=小圆圈索引号*ul中li中图片的宽度(图片要往左走是负值)animate(ul, -index * focusWidth);})}// 给ol的第一个li添加类名currentol.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部分（重点，是之前封装好的动画函数）

3.index.html部分（重点在标红区）

<!DOCTYPE html>

<head>

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

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

</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+ <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}

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。