发表于： 2023-01-09 20:21:34
0 344
今天做了一个轮播图的js效果
html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
</title>
<!-- 网站说明 -->
<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入我们初始化样式文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入我们公共的样式文件 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入我们index.css文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 这个animate.js 必须写到 index.js 的上面-->
<script src="js/animate.js"></script>
<!-- 引入我们index.js文件 -->
<script src="js/index.js"></script>
</head>
<body>
<div class="w">
<div class="main">
<div class="focus">
<a href="javascript:;" class="arrow-1"><</a>
<a href="javascript:;" class="arrow-r">></a>
<ul>
<li>
<img src="upload/focus1.png" alt="">
</li>
<li>
<img src="upload/focus1.png" alt="">
</li>
<li>
<img src="upload/focus1.png" alt="">
</li>
<li>
<img src="upload/focus1.png" alt="">
</li>
</ul>
<ol class="circle">
</ol>
</div>
</div>
</body>
</html>
css：
/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tomleg') format('truetype'),
url('../fonts/icomoon.woff?tomleg') format('woff'),
url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.main {
position: relative;
width: 980px;
height: 455px;
margin-left: 220px;
margin-top: 10px;
}
.focus {
float: left;
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 800%;
}
.focus ul li {
float: left;
}
.arrow-1,
.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: 300px;
}
.circle li {
float: left;
width: 12px;
height: 12px;
border: 2px solid rgba(255,255,255,.5);
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.current {
background-color: #fff;
}
js：
window.addEventListener('load', function() {
//1、获取元素
var arrow_1 = document.querySelector('.arrow-1');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2、鼠标经过之后 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function() {
arrow_1.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null; // 清除定时器变量
})
focus.addEventListener('mouseleave', function() {
arrow_1.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function() {
// 手动调用点击事件
arrow_r.click();
},2000);
})
// 3、动态生成小圆圈 有几张图，我就生成几个小圆圈
var ul = focus.querySelector('ul'); //限定 focus 里面的ul
var ol = focus.querySelector('.circle');
// console.log(ul.children.length); //显示ul有多少个 li
for (var i = 0; i < ul.children.length; i++) {
//创建小li
var li = document.createElement('li');
//记录当前小圆圈的索引号 通过自定义属性来做
//setAttribute 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
li.setAttribute('index',i);
//把小力插入到ol当中
ol.appendChild(li); // appendChild 将一个节点附加到指定父节点的子节点列表的末尾处
// 4、小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click',function() {
//干掉所以人 把所有的小li 清除 circle 类名
for(var i = 0; i < ol.children.length; i++){
ol.children[i].className = '';
}
//留下我自己 当前的小li 设置 circle 类名
this.className = 'current';
// 5.点击小圆圈 移动图片 移动的是 ul
// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
//当我们点击了某个小li 就拿到了当前小li 的索引号
var index = this.getAttribute('index');
//当我们点击的某个小li 就要吧这个li 的索引号 给num
num = index;
//当我们点击的某个小li 就要吧这个li 的索引号 给circle
circle = index;
// console.log(focusWidth);
// console.log(index);
animate(ul,-index * focusWidth)
})
}
// 把ol里面的第一个小li 设置类为 current
ol.children[0].className = 'current';
//6、克隆第一张图片 （li） 放到 ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//7、点击左右侧按钮 图片滚动一张
var num = 0;
// circle 是控制小圆圈的播放
var circle = 0;
// flag 节流阀
var flag = true;
arrow_r.addEventListener('click',function() {
if(flag) {
flag = false; //关闭节流阀
// 如果走到最后复制的一张图片，此时 我们的ul 要快速复原 left 改为0
if(num == ul.children.length-1){
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num * focusWidth, function() {
flag = true; // 打开节流阀
});
//8、点击右侧按钮，小圆圈跟着一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
// 如果 circle == 4 说明 走到最后我们克隆的这张图了 我们就复原
if(circle == ol.children.length){
circle = 0;
}
//调用函数
circleChange();
}
});
// 9、左侧按钮做法
arrow_1.addEventListener('click',function() {
if(flag) {
flag = false; //关闭节流阀
// 如果走到最后复制的一张图片，此时 我们的ul 要快速复原 left 改为0
if(num == 0){
num = ul.children.length - 1; //计算出 最后一张图片的位置
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul,-num * focusWidth,function() {
flag = true; //打开节流阀
});
// 点击左侧侧按钮，小圆圈跟着一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
// 如果 circle < 0 说明第一张图片，则小圆圈要改为第四个小圆圈 (3)
if(circle < 0){
circle = ol.children.length - 1;
}
//三元表达式
// circle = circle < 0? ol.children.length - 1 : circle;
//调用函数
circleChange();
}
});
function circleChange() {
// 先清除其余小圆圈的 current 泪目
for(var i = 0; i < ol.children.length; i++){
ol.children[i].className = '';
}
// 留下当前的小圆圈的current泪目
ol.children[circle].className = 'current';
}
//10、自动播放轮播图
var timer = setInterval(function() {
// 手动调用点击事件
arrow_r.click();
},2000);
})
//动画原理
//简单动画函数封装 obj 目标对象 target 目标位置
// 给不同的元素 指定了不同的定时器
function animate(obj,target,caliback){
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval( function () {
//步长值写到定时器的里面 不要出现小数 将数值取整
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
// 将数值取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画 停止定时器
clearInterval(obj.timer);
//回调函数写到定时器里面
// if(caliback){
// //调用函数
// caliback();
// }
caliback && caliback(); //另外一种回调函数写法
}else {
//把每次加1 这个步长值改为一个慢慢变小的值 步长公式 (目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step +'px';
}
},15)
}
返回列表
评论