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 ...
随机推荐
- liunx命令的运用
工作中用到了一些命令,记忆才深刻 1.查看服务器内存:free -h 2.查看服务器磁盘空间:df -h 3.切root用户:sudo su root 输入密码 4.查看liunx服务器下的所有用户: ...
- 将java的jar包，打包为rpm 安装包
一.rpm包 介绍 RPM Package Manager (RPM) 是一个强大的命令行驱动的软件包管理工具,用来安装.卸载.校验.查询和更新 Linux 系统上的软件包 二.环境安装 一台cent ...
- 把 Console 部署成 Windows 服务，四种方式总有一款适合你！
一:背景 1. 讲故事 上周有一个项目交付,因为是医院级项目需要在客户的局域网独立部署. 程序: netcore 2.0,操作系统: windows server 2012,坑爹的事情就来了, net ...
- php socket通信的简单实现
socket通信的原理在这里就不说了,它的用途还是比较广泛的,我们可以使用socket来做一个API接口出来,也可以使用socket来实现两个程序之间的通信,我们来研究一下在php里面如何实现sock ...
- 令人惊叹的百度Echarts，大数据分析的必备工具
学习目录 1.可视化面板介绍 1.1技术要点 1.2案例适配方案 1.3页面主体布局2.Echarts(重点) 2.1echarts介绍 2.2echarts体 ...
- 选择API管理平台之前要考虑的5个因素
API(应用程序编程接口)经济的飞速增长导致对API管理平台的需求相应增加. 这些解决方案可在整个生命周期内帮助创建,实施,监控,分析,保护和管理API. 据一些估计,全球API管理市场预计在2018 ...
- python详细图像仿射变换讲解
仿射变换简介 什么是放射变换 图像上的仿射变换, 其实就是图片中的一个像素点,通过某种变换,移动到另外一个地方. 从数学上来讲, 就是一个向量空间进行一次线形变换并加上平移向量, 从而变换到另外一个向 ...
- 【QT】 Qt多线程的“那些事”
目录 一.前言 二.QThread源码浅析 2.1 QThread类的定义源码 2.2 QThread::start()源码 2.3 QThreadPrivate::start()源码 2.4 QTh ...
- 【转】Lisp的本质
Lisp的本质: http://www.csdn.net/article/2012-11-22/2812113-The-Nature-Of-Lisp###
- CSS 三栏自适应布局
CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout *zoom:1 比如使用浮动后的清除浮动 clear:both 需求的延伸也会有一些: 比如三栏等高 ...