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& ...
随机推荐
- 搭建react native所遇到的坑
一.所遇问题 在搭建react native环境中,遇到执行react native run-android命令出现如下问题 Could not resolve all dependencies f ...
- 《CSAPP》实验二：二进制炸弹
二进制炸弹是第三章<程序的机器级表示>的配套实验,这章主要介绍了x64汇编,包括:操作数的表示方式,数据传送指令,算术和逻辑指令,控制流跳转指令,过程(procedure)的实现与运行时栈 ...
- 约数之和（POJ1845 Sumdiv）
最近应老延的要求再刷<算法进阶指南>(不得不说这本书不错)...这道题花费了较长时间~(当然也因为我太弱了)所以就写个比较易懂的题解啦~ 原题链接:POJ1845 翻译版题目(其实是AcW ...
- CouchDB学习-介绍
官方文档 CouchDB 1文档存储 CouchDB服务器主机是一个存储文档的数据库.每一个文档在数据库中都有唯一的名字.CouchDB提供RESTful HTTP API用来读取和更新(添加,编辑, ...
- SVN服务器和客户端的下载和安装
一.SVN服务器VisualSVN下载和安装 当前版本:4.1.3下载地址:https://www.visualsvn.com/server/download/下载下来的文件:VisualSVN-Se ...
- Oracle11g在虚拟机win7上的详细安装过程（包括win7在虚拟机上的安装）
http://www.imsdn.cn/这个是镜像文件的下载地址,之前下载雨林和深度的VM识别不了. 这个好了之后就可以去这个网址下看安装教程很详细.https://blog.csdn.net/u01 ...
- React的世界观及与Vue之比较
写在前面:本文谈论的是主观的个人感受,不追求立场的“客观.公正”,因此我下面所说的很可能是错的,欢迎交流指正. 我学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue ...
- 树上前k大的包含不重复结点的长链
一棵树,不一定是二叉树,在每个结点最多只属于一条链的情况下,处理出其中最长的前k个的长度. 最近训练赛做到两道题了,有必要总结一下. 不过我不知道是否有更专门的叫法. 借鉴了这位大佬的博客:https ...
- Java程序员月薪三万，需要技术达到什么水平？
最近跟朋友在一起聚会的时候,提了一个问题,说 Java 程序员如何能月薪达到二万,技术水平需要达到什么程度?人回答说这只能是大企业或者互联网企业工程师才能拿到.也许是的,小公司或者非互联网企业拿二万的 ...
- vc6.0 绿色版 下载地址
最新版的vs2019已经完全不支持生成运行在xp下的应用程序 每次在xp下测试,都需要配置好vc6.0,但乱七八糟的太多了,给出地址,绿色版可用 http://www.downcc.com/soft/ ...