PC 端轮播图的实现
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
} li {
display: inline-block;
} .rotation {
position: relative;
margin: 50px auto;
width: 300px;
height: 200px;
background-color: #ccc;
overflow: hidden;
} .rotation>ul {
position: absolute;
top: 0;
height: 0;
width: 600%;
height: 100%;
} .rotation>ul>li {
float: left;
width: 300px;
height: 100%;
} .rotation>ul>li img {
width: 100%;
height: 100%;
} .dot {
position: absolute;
top: 93%;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 10px;
/* background-color: rosybrown; */
} .dot ul {
width: 100%;
height: 100%;
text-align: center;
line-height: 10px;
} .dot li {
width: 5px;
height: 5px;
margin: 0 2px;
/* background-color: #fff; */
border: 1px solid #ccc;
border-radius: 5px;
} .current {
background-color: #fff;
} .direction {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 38px;
background-color: rgba(188, 143, 143, .5);
font-size: 18px;
color: #fff;
line-height: 38px;
text-align: center;
cursor: pointer;
} .previous {
left: 0;
} .next {
right: 0;
}
</style>
</head> <body>
<div class="rotation">
<ul>
<li>
<a href="javascript:;"><img src="../img/bg1.jpg" alt="" srcset=""></a>
</li>
<li>
<a href="javascript:;"><img src="../img/bg2.jpg" alt="" srcset=""></a>
</li>
<li>
<a href="javascript:;"><img src="../img/bg3.jpg" alt="" srcset=""></a>
</li>
<li>
<a href="javascript:;"><img src="../img/bg4.jpg" alt="" srcset=""></a>
</li>
</ul>
<div class="direction previous"><</div>
<div class="direction next">></div>
<div class="dot">
<ul>
</ul>
</div>
</div> <script src="../js/common-until.js"></script>
<script>
/**
* 1. 鼠标进入轮播界面出现上下切换按钮
* 2. 小圆点显示当前轮播页并且可切换
* 3. 鼠标悬浮在轮播界面时不自动切换
* 4. 自动切换图片
*/
// 页面除css, 图片,flash 等外加载完成执行
window.addEventListener('DOMContentLoaded', function() {
let rotation = $my('.rotation'); // 轮播图
let nodeList = $my('.direction', 1); // 方向标
let dotul = $my('.dot').querySelector('ul'); // 指示圆点
let rotationImg = rotation.querySelector('ul'); // 轮播内容
let rotationImgW = rotation.clientWidth; // 轮播内容宽度
let Imgnum = rotationImg.children.length;
let currentNum = 0; // 当前轮播的图片坐标
let timer = null; // 轮播倒计时id
let throttle = true; // 节流阀开关
// 动态生成指示小圆点
for (let i = 0; i < Imgnum; i++) {
let li = document.createElement('li');
li.setAttribute('data-index', i);
i == 0 ? li.className = 'current' : null;
dotul.appendChild(li);
}
// 拷贝第一张图用于实现无缝连接
let first = rotationImg.children[0].cloneNode(true);
rotationImg.appendChild(first);
Imgnum += 1;
// 指示圆点点击切换轮播图
dotul.addEventListener('click', function(e) {
let target = e.target || e.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
// debugger
let _currentX = -(target.dataset.index * rotationImgW);
currentNum = target.dataset.index;
animate(rotationImg, 'x', _currentX);
for (let i in dotul.children) {
i == target.dataset.index ? dotul.children[i].className = 'current' : dotul.children[i].className = null;
}
}
})
// 监听轮播模块的鼠标移动，进入显示切换按钮
rotation.addEventListener('mouseenter', function() {
nodeList[0].style.display = 'block';
nodeList[1].style.display = 'block';
clearInterval(timer);
});
rotation.addEventListener('mouseleave', function() {
nodeList[0].style.display = 'none';
nodeList[1].style.display = 'none';
timer = setInterval(function() {
nodeList[0].click();
}, 3000)
});
// 监听切换按钮的点击事件
nodeList[0].addEventListener('click', function() {
if (!throttle) {
return;
}
throttle = false;
if (currentNum == (Imgnum - 1)) {
rotationImg.style.left = '0';
currentNum = 0;
}
currentNum++;
animate(rotationImg, 'x', -currentNum * rotationImgW, () => throttle = true);
let _currentNum = currentNum;
_currentNum = _currentNum == Imgnum - 1 ? 0 : _currentNum;
for (let i of dotul.children) {
i.dataset.index == _currentNum ? i.className = 'current' : i.className = null;
}
})
nodeList[1].addEventListener('click', function() {
if (!throttle) {
return;
}
throttle = false;
if (currentNum == 0) {
rotationImg.style.left = (-Imgnum + 1) * rotationImgW + 'px';
currentNum = Imgnum - 1;
};
currentNum--;
animate(rotationImg, 'x', -currentNum * rotationImgW, () => throttle = true);
let _currentNum = currentNum;
_currentNum = _currentNum == Imgnum - 1 ? Imgnum - 2 : _currentNum;
for (let i of dotul.children) {
i.dataset.index == _currentNum ? i.className = 'current' : i.className = null;
}
})
// 自动轮播
timer = setInterval(function() {
nodeList[0].click();
}, 3000)
})
</script>
</body> </html>
PC 端轮播图的实现的更多相关文章
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 移动端轮播图vue-awesome-swiper
日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- 移动端轮播图实现方法（dGun.js）
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- 关于Layui 响应式移动端轮播图的问题
用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...
- JS 移动端轮播图案例
body { margin:; } .hearder { width: 100%; height: 150px; position: relative; } ul { list-style: none ...
- 移动端轮播图插件（支持Zepto和jQuery）
一. 效果图 二. 功能介绍 1. 支持图片自动轮播和非自动轮播 2. 支持点击和滑动. 三. 简单介绍 代码都有注释,逻辑简单,不做更多赘述. 1. 在你的html中添加一行. <sectio ...
- jquery 移动端轮播图
<div class="slide"> <div class="slide-box"> <ul class="slide ...
随机推荐
- mysql 索引的原理(超细)
一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...
- Java8新特性探索之Stream接口
一.为什么引入Stream流 流是一系列与特定存储机制无关的元素--实际上,流并没有"存储"之说.使用流,无需迭代集合中的元素,就可以从管道提取和操作元素.这些管道通常被组合在一起 ...
- 浅析 JIT 即时编译技术
即时编译回顾 HotSpot 虚拟机执行 Java 程序时,先通过解释器对代码解释执行,发现某个方法或代码块执行比较频繁后,对热点代码进行编译,编译后生成与本地平台相关的机器码,再去执行机器码获得较高 ...
- Java学习的第十四天
1.JAVA的继承使用关键字extends继承 class 子类 extends 父类{} 子类可以用super来调用父类的非私有属性和非私有方法,还可以调用非私有的父类构造函数 如果父类子类的方法名 ...
- 正式班D20
2020.11.02星期五 正式班D20 目录 11 软件包管理 11.1 软件包介绍 11.1.1 编程语言分类 11.1.2 三种安装包 11.2 rpm包管理 11.2.1 rpm包简介 11. ...
- 【故障公告】访问高峰数据库服务器 CPU 100% 引发全站故障
今天上午11:10,我们又中"奖"了,我们使用的阿里云 RDS 实例(SQL Server 2016 标准版,16核32G)突发出现 CPU 100%,引发全站故障,直到 12:1 ...
- JS中使用for-each遍历数组
1 let array = [1, 3, 6, 8, 9, 0, 5]; 2 /* 3 index是数组索引 4 value代表数组的值 5 arr是指整个数组 6 */ 7 array.forEac ...
- Java8 新特性 —— 函数式编程
本文部分摘录自 On Java 8 概述 通常,传递给方法的数据不同,结果也不同.同样的,如果我们希望方法被调用时的行为不同,该怎么做呢?结论是:只要能将代码传递给方法,那么就可以控制方法的行为. 说 ...
- 使用arm-none-eabi-gdb报错error while loading shared libraries: libncurses.so.5: cannot open shared object file: No such file or directory
使用arm-none-eabi-gdb报错error while loading shared libraries: libncurses.so.5: cannot open shared objec ...
- spring处理静态资源方式
1. <mvc:default-servlet-handler/>default-servlet-handler在SpringMVC上下文定义一个org.springframework.w ...