JS 实现动态轮播图
JavaScript实现轮播图思路 + html/css + js源码
- 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出现在相框中,不在相框中的元素会被css中的 overflow : hidden 隐藏掉, 其次,图片是经过处理的 ,正好和我们的相关等宽等高!
- 动态的创建元素,下面我们会动态创建li,并通过css把它修饰成小按钮格式,其次给小按钮添加点击事件,鼠标经过,离开事件,动态的实现图片的移动, 其实就是根据不同的参数,移动 ul的left值
- 最后添加定时器,在回调函数的位置让他每隔一定的时间就调用一次点击左边按钮的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
/* overflow: hidden;*/
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff; opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol><!-- ol 里面存放的是按钮, 按钮的个数,就是上面ul子元素的个数-->
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
上面是html/css搭起来架子,简单说一下
- body里面有一个直接子div,我们叫他box,它是整个轮播图的父盒子
1 对box的css相关css样式调整, 给定了宽高,让他把轮播图需要的空间撑起来, 2. 设置了内边距,让他在原有宽高不变的情况下,四周扩展一些,美观 ; 3. 初始情况下,这个盒子贴着浏览器的左上角对齐,我们给他设置外边距, 上下100px ,左右自动, 意思是居中对齐 4. 添加相对定位, 因为box里面的小按钮要脱离文档流,用定位移动到相框指定的位置, 如果不加相对定位, box就限制不住它里面的子元素,
- box又有两个直接元素div
box 的第一个直接子元素class=screen , screen的宽高和box一样,里面放着个无序列表,无序列表里面是轮播图的图片, 每一个li,都给定和图片一样大小的宽高,添加浮动,让它们排成一排,给li添加overflow , 属性,防止图片太大了,把多出去的部分切掉,
screen的第二个直接子元素是个ol列表,一会我们要通过js动态的生成和 ul里面的li相同数目的li标签,把他们的样式改成按钮, 需要绝对定位,因此我们设置screen为相对对位
box的第二个直接子元素是一个div叫arr，默认它dispaly:none 隐藏 ,arr里面是轮播图的左右两个箭头，让他相对于box 进行绝对定位
js代码:
<script>
// 获取全部需要的元素
var box = document.getElementById("box");
var screen = box.children[0];
var ulObj = screen.children[0];
var liList = ulObj.children;
var olObj = screen.children[1];
var arr = document.getElementById("arr");
var width = screen.offsetWidth; // 相框的宽
var index = 0; // 默认小按钮的索引从零开始
var timeId;
// 动态的生成和li数量相等的 小按钮
for (var i = 0; i < liList.length; i++) {
console.log(i);
var liObj = document.createElement("li");
// 添加下标
liObj.innerHTML = (i + 1);
// 添加到ol里面
olObj.appendChild(liObj);
// 给liObj添加属性,存储下标
liObj.setAttribute("index", i);
console.log("index===" + liObj.getAttribute("index"));
// 给小按钮添加鼠标经过事件
liObj.onmouseover = function () {
for (var i = 0; i < olObj.children.length; i++) { // 排他去除所有按钮的 点亮状态
olObj.children[i].className = "";
}
this.className = "current"; // 设置当前的小按钮点亮
// 移动, 将图片移动到当前小按钮下标的位置
// 设置 index 的值,为当前小按钮的下标值
// index= liObj.getAttribute("index"); 不能这样写,因为一打开浏览器,js其实就执行完了, 这个属性,事件都已经存在下来了,
// 于是我们在这里面只有 通过this,才能定位到当前的 小按钮
index = this.getAttribute("index");
console.log(index);
animate(ulObj, -width * index);
};
liObj.onmouseout = function () {
this.className = "";
}
}
// 默认选中第一按钮
olObj.children[0].className = "current";
// 鼠标移动到 box上面 显示那两个按钮
document.getElementById("box").onmouseover = function () {
clearInterval(timeId);
document.getElementById("arr").style.display = "block";
};
// 鼠标离开box,干掉 arr 的显示
document.getElementById("box").onmouseout = function () {
timeId = setInterval(rightHandler, 1000);
document.getElementById("arr").style.display = "";
}
// 无缝连接需要我们第一个轮播图和最后一份完全相同,于是我们 克隆
// var liNode = liList.children[0].cloneNode(true);
var liNode = ulObj.children[0].cloneNode(true);
// 添加到 ul 尾部
ulObj.appendChild(liNode);
// 给做左边的小按钮绑定点击事件
document.getElementById("right").onclick = rightHandler;
function rightHandler() {
console.log("index===" + index);
console.log("width===" + width);
index++; // 因为第一个index==0 , 所以想移动就得 ++
console.log("olObj.children.length-1== " + olObj.children.length);
if (index === olObj.children.length) { // 这是最后一个
// index==5 我们要重置
index = 0;
// 到第六张图片的时候,我们应该把第五个小按钮的点亮状态给第一个小按钮
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
// 整排图片一次性全部归位,准备重来
ulObj.style.left = 0 + "px";
} else {
// 1-4 正常移动图片
animate(ulObj, -width * index);
for (var i = 0; i < olObj.children.length; i++) { // 排他干掉所有的 点亮的小按钮
// console.log("执行了!!! i== "+i);
olObj.children[i].className = "";
}
// 设置 当前图片对应的小按钮点亮
olObj.children[index].className = "current";
}
}
// 点击右边的按钮
document.getElementById("left").onclick = function () {
// 点击右边的小按钮,整个图片往左动,
// 点击左边的按钮,整个图片往右动--正数
console.log("left");
console.log("index==" + index);
// 如果是第一个,那么一次性移动到第六张图片,在往右移动
if (index === 0) {
index = olObj.children.length;
ulObj.style.left = -width * index + "px";
}
index--;
console.log("index==" + index);
animate(ulObj, -width * index);
// 思考: 为什么我的图片无论往左还是往右移动在 nimate里面都是负数呢? 看上面的最近的if判断,当判断为0
// 这时我们将图片一次性的移动到了第六张的位置,往右动,远离浏览器 -index*width
// 我们再次点击 往右移动,就是希望,整个div 离浏览器的左边远一些,是往右动 就是让left = -index*width 大一点 ,正好index--了 那么他们的绝对值就会变大
}
// 添加自动播放的效果-- 就是隔一段时间调用一次向左移动的函数
timeId = setInterval(rightHandler, 1000);
// 鼠标进入暂停--- 给 box 添加鼠标进入事件, 清除定时器
// 鼠标离开继续动,就是给box 添加鼠标离开事件
function animate(element, target) {
clearInterval(element.timeId);
// element 点 timeId 是给 element 添加了一个属性, 用来存 id , 以后触发定时器,得到的id复写上一个id, 这样 定时器的时间就不会被改变
element.timeId = window.setInterval(function () {
// 获取div的位置
var current = element.offsetLeft;
// div每次移动的 像素
var step = 10;
step = current < target ? step : -step; // 指明从左向右,还是反向
// 每次移动后的距离
current += step;
if ((Math.abs(target - current)) > Math.abs(step)) {
// 设置目标位置
element.style.left = current + "px";
} else {
window.clearInterval(element.timeId);
// if条件不成立.直接到达目标
element.style.left = target + "px";
}
}, 20);
}
</script>
JS 实现动态轮播图的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- JavaScript实现动态轮播图效果
功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
随机推荐
- java开发必学知识:动态代理
目录 1. 引言 2. 代理模式及静态代理 2.1 代理模式说明 2.2 静态代理 2.3 静态代理局限性 3. 动态代理 3.1 JAVA反射机制 3.2 JDK动态代理 3.2.1 JDK动态代理 ...
- PHP函数CURL分别以GET、POST方式请求HTTPS协议接口api
1.curl以GET方式请求https协议接口 function curl_get_https($url){ $curl = curl_init(); // 启动一个CURL会话 curl_setop ...
- 《MySQL数据库》常用语法（一）
MySQL从创建数据库到对表的增删改操作汇总. 1. 数据库操作: -- 查看所有的数据库 SHOW DATABASES ; -- 创建一个数据库,XXX表示数据库名称 CREATE DATABASE ...
- java之线程（线程的创建方式、java中的Thread类、线程的同步、线程的生命周期、线程之间的通信）
CPU:10核 主频100MHz 1核 主频 3GHz 那么哪一个CPU比较好呢? CPU核不是越多越好吗?并不一定.主频用于衡量GPU处理速度的快慢,举个例子10头牛运送货物快还是1架飞机运 ...
- Python基础-day01-6
算数运算符 计算机,顾名思义就是负责进行 数学计算 并且 存储计算结果 的电子设备 目标 算术运算符的基本使用 01. 算数运算符 算数运算符是 运算符的一种 是完成基本的算术运算使用的符号,用来处理 ...
- Python之闭包and装饰器
闭包和装饰器是Python中非常重要的一种语法格式,在日常工作中应用非常广泛. 首先,我先为大家简单的介绍一下闭包的概念. 闭包:闭包是在函数嵌套的基础上,内层函数使用到外层函数的变量,且外层函数返回 ...
- JS---另一个定时器：一次性的
之前学的定时器:setInterval和清除定时器 clearInterval(定时器id); //常用的,反复的执行 window.setInterval(function () { alert(& ...
- 利用Azure虚拟机安装Dynamics 365 Customer Engagement之十二：新增SQL Server可用性副本
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- github克隆项目缓慢
github浏览或者克隆项目的时候,总是十分缓慢,下面是亲自自测的一种方式,克隆速度可以稍快一些 第一步 访问域名解析网站:https://www.ipaddress.com/ 在网页下方可以看见一个 ...
- API访问控制设计
References ● OAuth 2.0 for native apps: https://datatracker.ietf.org/doc/rfc8252/ ● OAuth 2.0 for br ...