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& ...
随机推荐
- 延迟队列DelayQueue take() 源码分析
延迟队列DelayQueue take() 源码分析 在工作中使用了延迟队列,对其内部的实现很好奇,于是就研究了一下其运行原理,在这里就介绍一下take()方法的源码 1 take()源码 如下所示 ...
- windows10查看电脑已经保存的wifi密码
1,打开windows的命令窗口,输入 netsh wlan show profiles,如下图,这个命令仅仅只是查看一下电脑保存的所有的wifi名字 2,需要查看密码的话,则需要输入这个命令, ...
- jvm面试题 新生代和 老年代的区别
新生代和老年代的区别(阿里面试官的题目): 所谓的新生代和老年代是针对于分代收集算法来定义的,新生代又分为Eden和Survivor两个区.加上老年代就这三个区.数据会首先分配到Eden区 当中(当然 ...
- 关于JAVA的Random类的冷知识(转自菜鸟V)
JAVA的Random类(转) Random类 (java.util) Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- VScode安装golang插件详细教程
可能是由于非科班自学编程,所以在安装插件的时候虽然参考了很多人写的教程,但是总安装不成功,在综合各位大牛的教程之后进行总结,并且亲自实践安装成功,希望能给初学编程的人一些帮助,如果有不对的地方还希望大 ...
- Leetcode题解 - 贪心算法部分简单题目代码+思路（860、944、1005、1029、1046、1217、1221）
leetcode真的是一个学习阅读理解的好地方 860. 柠檬水找零 """ 因为用户支付的只会有5.10.20 对于10元的用户必须找一个5 对于20元的用户可以找(三 ...
- Python面向对象-继承和多态特性
继承 在面向对象的程序设计中,当我们定义一个class时候,可以从现有的class继承,新的class成为子类,被继承的class称为基类,父类或超类. 比如,编写一个名为Animal的class: ...
- orleans 2.0 进阶之自定义持久化储存
一丶简单介绍下目录结构和项目依赖,如图 二丶主要核心自定义代码 1. 添加自定义实现类 CustomProvider public class CustomProvider : IGrainStora ...
- C# 派生和继承（派生类与基类）
using System; using System.Collections.Generic; using System.Text; namespace 继承 { class Program { st ...