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 ...
随机推荐
- Spring源码知识概览
目录 Spring知识总览 1.1 IOC 1.2 Spring中重要接口概览 Spring知识总览 1.1 IOC IOC是控制反转,是一种思想 DI是依赖注入,是控制翻转的一种实现 Spring的 ...
- modbus协议开关量采集模块
modbus协议开关量采集模块是指的使用Modbus协议的进行信号的采集与控制的一种设备. Modbus 协议设备都具有唯一的 Modbus 地址,众山 DTU 默认 Modbus 地址为 100,用 ...
- JWT原理
1.COOKIE使用和优缺点 https://www.cnblogs.com/xiaonq/p/11094480.html 1.1 cookie原理: 用户名+密码 cookie是保存在用户浏览器 ...
- Flask简介与启动服务器
Flask 一.简介 官方文档:http://flask.pocoo.org/ http://www.pythondoc.com/flask/index.html(中文) 1.概述 flask是一个非 ...
- FastThreadLocal 是什么鬼？吊打 ThreadLocal 的存在！！
ThreadLocal 大家都知道是线程本地变量,今天栈长再介绍一个神器:FastThreadLocal,从字面上看就是:Fast + ThreadLocal,一个快的 ThreadLocal?这到底 ...
- 【QT】 QThread部分源码浅析
本文章挑出QThread源码中部分重点代码来说明QThread启动到结束的过程是怎么调度的.其次因为到了Qt4.4版本,Qt的多线程就有所变化,所以本章会以Qt4.0.1和Qt5.6.2版本的源码来进 ...
- ThreadLocal原理大解析
今天呢,和大家聊一下ThreadLocal. 1. 是什么? JDK1.2提供的的一个线程绑定变量的类. 他的思想就是:给每一个使用到这个资源的线程都克隆一份,实现了不同线程使用不同的资源,且该资源之 ...
- Newton插值的C++实现
Newton(牛顿)插值法具有递推性,这决定其性能要好于Lagrange(拉格朗日)插值法.其重点在于差商(Divided Difference)表的求解. 步骤1. 求解差商表,这里采用非递归法(看 ...
- [阿里DIN]从模型源码梳理TensorFlow的形状相关操作
[阿里DIN]从模型源码梳理TensorFlow的形状相关操作 目录 [阿里DIN]从模型源码梳理TensorFlow的形状相关操作 0x00 摘要 0x01 reduce_sum 1.1 reduc ...
- 对ESP8266的例子进行编译时报错check_python_dependencies的问题的解决
尝试对ESP8266的例子进行编译时报错: make: *** 没有规则可制作目标"check_python_dependencies" 解决方法: 1.安装python pip包 ...