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 ...
随机推荐
- javascript常见面试题之一：将字符串'get-element-by-id'转换成驼峰命名法；
var str='get-element-by-id'; function strToupper(str) { //利用split将字符串分割成数组var arr= str.split('-'); f ...
- oracle数据库中索引失效的几种情况
原文1:https://blog.csdn.net/u012255097/article/details/102792683 原文2:https://www.cnblogs.com/lanseyita ...
- 【转】Optimized Surface Loading and Soft Stretching
FROM:http://lazyfoo.net/tutorials/SDL/05_optimized_surface_loading_and_soft_stretching/index.php Opt ...
- STM32入门系列-开发工具keil5安装
主要介绍如下三部分内容: keil5软件获取 keil5安装 安装STM32芯片包 软件获取 可以通过搜索引擎搜索关键字"KEIL5下载",找到其官方网站www.keil.com. ...
- NB-IoT技术适合在哪些场景应用
LPWAN,Low Power Wide Area Network,低功耗广域网.名字里就有它的两个最重要的特点:低功耗.广覆盖.目前比较主流的有:NB-IoT.LoRa.Sigfox.eMTC.NB ...
- DES 实现
原理 加密 置换: IP逆置换: 迭代: PC-1置换: PC-2置换: 子秘钥的生成: 加密函数f: 解密 代码 // C语言实现 #include<stdio.h> #include& ...
- 第 2 篇：上手 Vue 展示 todo 列表
作者:HelloGitHub-追梦人物 追梦人物的 Vue 系列教程在他的博客已经全部更新完成,地址: https://www.zmrenwu.com/courses/vue2x-todo-tutor ...
- 傲视Kubernetes(一)：Kubernetes简介
前言 从上个月,因工作需要外加兴趣所知,博主开始学习Kubernetes,时至今日可以说是刚刚入门.独自学不如一起学,后面博主会一边学着一边将学习内容以博文的形式呈现出来,希望能跟各位园友有问题一起讨 ...
- Android NurReaderView 阅读器 （字符串-.txt文件）
有些地方还没配置好.2/3天后在更新.... 功能 支持字符串和<.txt>文件 文字自动分各个页面 支持从右到左-(从右边开始的语言.比如维吾尔语哈扎克语...外国的阿拉伯语等) 支持自 ...
- Spider--补充--Requests--session&cookie
# session 与 cookie # 可能大家对session已经比较熟悉了,也大概了解了session的机制和原理,但是我们在做爬虫时如何会运用到session呢,就是接下来要讲到的会话保持. ...