JavaScript轮播图
需求：
- 鼠标移动到下标页码时，也转换到相对应的图片；
- 多张图片可以自动轮播；
- 鼠标移动至图片时，停止自动轮播；
- 可以手动左右调节；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
position: relative;
top: 20px;
cursor: pointer;
}
.outer .img-box .img-item {
display: none;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.active{
display: block !important;
}
.outer ul{
position: absolute;
top: 250px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.outer ul li.page-number{
list-style-type: none;
display: inline-block;
color: black;
margin: 0 6px;
font-size: 12px;
width: 20px;
height: 20px;
background-color: #05dfff;
line-height: 20px;
text-align: center;
border-radius: 50%;
}
.page-active{
background-color: #0000FF !important;
}
.outer .mover{
position: absolute;
top: 110px;
left: 50%;
height: 60px;
width: 40px;
background-color: rgba(255,255,255,0.65);
line-height: 60px;
text-align: center;
font-size: 26px;
display: none;
user-select: none; /*用户点击时，内容不能被选中*/
}
.outer .leftMover{
margin-left: -260px;
}
.outer .rightMover{
margin-left: 220px;
}
</style>
</head>
<body>
<div id="outer" class="outer">
<div class="img-box">
<img src="../img/1.jpg" class="img-item active">
<img src="../img/2.jpg" class="img-item">
<img src="../img/3.jpg" class="img-item">
<img src="../img/4.jpg" class="img-item">
</div>
<ul>
<li class="page-number page-active">1</li>
<li class="page-number">2</li>
<li class="page-number">3</li>
<li class="page-number">4</li>
</ul>
<a id="leftMover" class="mover leftMover"><</a>
<a id="rightMover" class="mover rightMover">></a>
</div>
<script>
var objectImgItems = document.getElementsByClassName("img-item");
var objectRowItems = document.getElementsByClassName("page-number");
var objectOuter = document.getElementById("outer");
var objectMover = document.getElementsByClassName("mover");
var objectLeftMover = document.getElementById("leftMover");
var objectRightMover = document.getElementById("rightMover");
<!-- 获取node在nodeList中的索引值 -->
function getIndex(node, nodeList) {
for (var index=0; index<nodeList.length; index++){
if (nodeList[index] === node){
return index
}
}
}
<!-- 根据传入的页码索引值，转换图片和页码 -->
function move(numberIndex) {
for (var i=0; i<objectImgItems.length; i++){
if (i === numberIndex) {
objectImgItems[i].classList.add("active");
objectRowItems[i].classList.add("page-active");
} else {
objectImgItems[i].classList.remove("active");
objectRowItems[i].classList.remove("page-active");
}
}
}
<!-- 鼠标覆盖页码时，图片和页码进行转换 -->
for (var i=0; i<objectRowItems.length; i++){
objectRowItems[i].onmouseover = function () {
var numberIndex = getIndex(this, objectRowItems);
move(numberIndex);
pageNumber = numberIndex;
};
}
<!-- 鼠标移动到整个模块，则显示左右移动的图标，图片停止自动转换 -->
objectOuter.onmouseover = function () {
clearInterval(intervalId);
for (var i=0; i<objectMover.length; i++){
objectMover[i].classList.add("active");
}
};
<!-- 鼠标离开整个模块，则隐藏左右移动的图标，图片开始自动转换 -->
objectOuter.onmouseout = function () {
intervalId = setInterval(directionMove, 2000);
for (var i=0; i<objectMover.length; i++){
objectMover[i].classList.remove("active");
}
};
<!-- 添加页码变量，通过自增、自减，实现左右转换 -->
var pageNumber = 0;
function directionMove(isLeft) {
if (isLeft){
if (pageNumber === 0) {
pageNumber = 4;
}
pageNumber--;
} else {
if (pageNumber === 3) {
pageNumber = -1;
}
pageNumber++;
}
move(pageNumber);
}
<!-- 添加定时器，实现自动转换 -->
var intervalId = setInterval(directionMove, 2000);
<!-- 右转换 -->
objectRightMover.onclick = function () {
directionMove();
};
<!-- 左转换 -->
objectLeftMover.onclick = function () {
directionMove(true);
}
</script>
</body>
</html>
JavaScript轮播图的更多相关文章
- JavaScript 轮播图
这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...
- 练习:javascript轮播图效果
javascript轮播自动播放切换滑过停止,上一页/下一页 <!DOCTYPE html> <html lang="en"> <head> & ...
- 超详细的原生JavaScript轮播图（幻灯片）的制作
本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...
- JavaScript 轮播图实例
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- JavaScript 自适应轮播图
代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- jquery 广告轮播图
轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * ...
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 廖雪峰ES6的箭头函数
http://www.liaoxuefeng.com/ wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014385659690576 ...
- k-means 算法介绍
概述 聚类属于机器学习的无监督学习,在数据中发现数据对象之间的关系,将数据进行分组,组内的相似性越大,组间的差别越大,则聚类效果越好.它跟分类的最主要区别就在于有没有“标签”.比如说我们有一组数据,数 ...
- 洛谷 - P1044 - 栈 - 简单dp
https://www.luogu.org/problemnew/show/P1044 由于是用标签搜索进来的,所以这道题一定是有dp的解法. 很显然规定每次加入元素之前可以从栈中清理出任意数量的元素 ...
- hdoj1028；他们说这题叫dp...
#include<cstdio> #include<string> #include<iostream> #include<vector> #inclu ...
- bzoj 4010: [HNOI2015]菜肴制作【拓扑排序】
也就是给定有向图,求最小字典序的拓扑序,直接用小根堆就行(或者反着建图用大根堆) #include<iostream> #include<cstdio> #include< ...
- React的深入浅出
react组件重新渲染有两种途径:1.自身调用setState:2.父组件传入新的props.3.但这两种途径都不会必然调用render而引起重新渲染, 都会先经过shouldComponentUpd ...
- CSS常见的五大布局
本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...
- 跟我一起玩Win32开发（19）：浏览和打开文件
在应用程序中,我们很经常要实现的功能,是Open文件或保存文件对话框,让用户来选择一个或N个文件.本文我将介绍两种思路,第一种方法较为复杂,第二种方法较为简单. 方法一:老规矩 这是一种传统方法,使用 ...
- nginx缓存过期
1 原理 在默认下,请求过的内容会接受304,而从本地缓存调用.这是通过client向server发送请求,给出ETag,server确认ETag未变,则不返回内容,client调用本地缓存. 而ex ...
- UvalLive4670（AC自动机模板）
放上刘汝佳的模板: #include <cstdio> #include <cstring> #include <string> #include <algo ...