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 ...
随机推荐
- laravel5.2数据库基本操作
laravel5.2数据库基本操作 百牛信息技术bainiu.ltd整理发布于博客园 use Illuminate\Database\Eloquent\Model; use Illuminate\Da ...
- 【199】ArcGIS 添加自定义工具到工具箱
点击工具栏最右边的三角块,弹出菜单,点击“Customize”. 切换到“Command”,在搜索框中输入“idw”查找相应工具,然后将工具通过鼠标左键拖拽到工具栏中. 在工具上右键修改工具的显示图片 ...
- adb相关
--------------------------------------------- adb logcat |find "nafio" >c:/logcat.txt 另 ...
- Contest Hunter 0103最短Hamilton路径 【状压dp】 By cellur925
题目传送门 Hamilton路径的定义:从0(起点)到n-1(终点)不重不漏地经过每个点恰好一次. 由于数据范围非常小,考虑状压.如NOIP2017宝藏一题,把状态压缩设为n个点是否已到达的二进制数. ...
- TCP Socket通信详细过程
下面这篇文章是参考"骏马金龙"博客中 不可不知的socket和TCP连接过程 https://www.cnblogs.com/f-ck-need-u/p/7623252.html ...
- Hibernate中的Query对象查询所有记录
映射文件,核心文件,实体类,工具类的内容都不变直接看测试方法中的代码: package com.yinfu.test; import java.util.List; import org.hibern ...
- c++ 头文件路径选择
单文件引用头文件./ 当前目录 ../ 父级目录 / 根目录 多文件引用头文件多文件引用头文件 定义单独放在cpp文件里面 ,声明放在().h)里面
- 【loj10061】最短母串
#10061. 「一本通 2.4 练习 4」最短母串 内存限制:512 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 上传者: 1bentong 提交 提交 ...
- win10下JDK安装,配置环境变量后报Error: could not open `C:\Program Files\Java\jre1.8.0_112\lib\amd64\jvm.cfg'
把Path里面的%JAVA_HOME%/bin放在最前面.
- Python Selenium设计模式 - PO设计模式
整理一下python selenium自动化测试实践中使用较多的po设计模式. 为什么要用PO 基于python selenium2开始开始ui自动化测试脚本的编写不是多么艰巨的任务.只需要定位到元素 ...