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& ...
随机推荐
- 使用 Vue + TypeScript 时项目中常用的装饰器
目录 一.@Component 装饰器 1)父组件 2)子组件 二. @Emit 装饰器 1)父组件 2)子组件 三. @Model 装饰器 1)父组件 2)子组件 四. @Prop 装饰器 1)父组 ...
- laravel55
增//save返回true false$res = new member();res->username = 'a';$res->password = 'b';dump($res-> ...
- i++和++i的区别(主要为返回的值的区别)
初学者经常会搞不清i++,和++i 的关系 i++ 是把i的值拿过来,然后再+1++i 是吧i的值直接+1,之后再用
- 《Java基础知识》Java 泛型详解
JDK 1.5 之后,Java 通过泛型解决了容器类型安全这一问题,而几乎所有人接触泛型也是通过Java的容器.那么泛型究竟是什么? 泛型的本质是参数化类型:也就是说,泛型就是将所操作的数据类型作为参 ...
- JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
基于HTML5 canvas 获取文本占用的像素宽度 by:授客 QQ:1033553122 直接上代码 // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...
- 基于vue+leaflet+echart的足迹分享评论平台
(其实题目是随便取的,目的只是用来证明Vue+leaflet+springboot技术栈的可行性) 效果 小专栏不支持上传视频?想看的话可以去我的知乎看最新的文章,那个应该可以.在这里 主要功能描述 ...
- 【第二版】高仿Android网易云音乐企业级项目实战课程介绍
这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Androi ...
- 如何快速将百度大脑AI技术内置智能小程序中
实现效果: 该AI智能小程序目前集成了百度AI开放平台数十个AI服务产品功能,包括人脸识别.文字识别.表格识别.红酒识别.货币识别.地标识别.手势识别.商标识别.果蔬识别.菜品识别等图片识别功能,以及 ...
- phper使用MySQL 针对千万级的大表要怎么优化？
有需要学习交流的友人请加入交流群的咱们一起,群内都是1-7年的开发者,希望可以一起交流,探讨PHP,swoole这块的技术 或者有其他问题 也可以问,获取swoole或者php进阶相关资料私聊管理即可 ...
- MySQL基础-存储过程
存储过程 定义:将一批为了完成特定功能的SQL语句集,根据传入的参数(也可没有),调用,完成单个sql语句更复杂的功能 存储过程思想很简单,就是SQL语句层面上的代码封装和重用 优点:1) 可封装,并 ...