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 ...
随机推荐
- APP后台架构开发实践笔记
1 App后台入门 1.1 App后台的功能 (1)远程存储数据: (2)消息中转. 1.2 App后台架构 架构设计的流程 (1) 根据App的设计,梳理出App的业务流程: (2) 把每个业务流程 ...
- Java学习的第二十四天
1. 目录管理 2.文件方法太多记不清 3.明天学习流和流的分类
- PHP 获取当前页面的URL信息
//获取当前的域名: echo $_SERVER['SERVER_NAME']; //获取来源网址,即点击来到本页的上页网址 echo $_SERVER["HTTP_REFERER" ...
- 系统日志报错i8042prt无法加载
原因如下: 解决方法为: 此报错可以直接忽略,不过由此可能导致即插即用(plugplay)报错,在即插即用报错时,重启服务器即可.
- MYSQL连接时错误码2059解决办法
一.问题原因: 如上图的报错提示可知,报错原因是caching_sha2_password不能加载. 这是因为8.0之后mysql更改了密码的加密规则,而目前已有的客户端连接软件还不支持Mysql8 ...
- 用GitHub Pages搭建博客（三）
本篇介绍通过git工具替换网站主题,并发布 Jekyll和Hexo的简要介绍 GitHub Pages是基于Jekyll构建的,Jekyll 是一个简单的博客形态的静态站点生产工具,它有一个模版目 ...
- CF1271E Common Number
数学+二分 连续打了3场$codeforces$,深深的被各种模拟贪心分类讨论的$C$,$D$题给恶心到了 还有永远看到题一脸懵的$B$题 首先考虑画出不同函数值迭代转移的关系,要注意考虑连边是否能成 ...
- 【SpringBoot】15. Spring Boot核心注解
Spring Boot核心注解 1 @SpringBootApplication 代表是Spring Boot启动的类 2 @SpringBootConfiguration 通过bean对象来获取配置 ...
- FFmpeg开发笔记（九）：ffmpeg解码rtsp流并使用SDL同步播放
前言 ffmpeg播放rtsp网络流和摄像头流. Demo 使用ffmpeg播放局域网rtsp1080p海康摄像头:延迟0.2s,存在马赛克 使用ffmpeg播放网络rtsp文件流 ...
- leetcode144 longest-palindromic-substring
题目描述 找出给出的字符串S中最长的回文子串.假设S的最大长度为1000,并且只存在唯一解. Given a string S, find the longest palindromic substr ...