js 原生JS实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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="data:images/1.jpg" width="500" height="200"/></li>
<li><img src="data:images/2.jpg" width="500" height="200"/></li>
<li><img src="data:images/3.jpg" width="500" height="200"/></li>
<li><img src="data:images/4.jpg" width="500" height="200"/></li>
<li><img src="data:images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$('box');
//最外层div
var screen = box.children[0];
//相框
var screenWidth = screen.offsetWidth;
//相框的宽度
var ulobj = screen.children[0];
//整个ul
var list = ulobj.children;
//ul里面的每个li
var olobj = screen.children[1];
//ol
var arr = my$('arr');
//获取左右按键 //设置一个全局变量为了后面可以使用
var index = 0;
//根据ui里的li的个数 循环添加ol里面的小按钮
for (var i = 0; i < list.length; i++) {
//创建一个li
var liobj = document.createElement('li');
//追加到ol里面
olobj.appendChild(liobj);
//设置li的内容
liobj.innerHTML = (i + 1);
//为每个li添加自定义属性 保存其索引值
liobj.setAttribute("index", i);
//为每个li注册鼠标进入事件
liobj.onmouseover = function () {
//排他功能
for (var j = 0; j < olobj.children.length; j++) {
//移除全部li的样式
olobj.children[j].removeAttribute('class');
}
//设置当前的li的样式
this.className = 'current';
//获取当前li的索引值
index = this.getAttribute("index");
//调用动画函数 传入要移动的ul 和 位置（移动的是负数）
animate(ulobj, -index * screenWidth);
};
} //设置ol中第一个li有背景颜色
olobj.children[0].className = "current"; //克隆一个第一个li到最后cloneNode() 方法克隆所有属性以及它们的值。
// 如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。
ulobj.appendChild(list[0].cloneNode(true)); //自动播放
var timeId = setInterval(clickHandle, 1000); //鼠标进入
box.onmouseover = function () {
//显示两边的按钮
arr.style.display = 'block';
//鼠标进入时候就清理定时器
clearInterval(timeId);
}
//鼠标离开
box.onmouseout = function () {
//隐藏两边的按钮
arr.style.display = 'none';
//鼠标离开时重新设置定时器（自动播放 其他就是右键的点击事件）
timeId = setInterval(clickHandle, 1000);
}
//为右键注册点击事件
my$('right').onclick = clickHandle //右键事件函数
function clickHandle() {
//先判断当前的索引值是否等于5 那就说明已经看到最后一张（也是第一张）那么立刻将索引重置为第一张 且将当前的最后一张切换到第一张
if (index == list.length - 1) {
index = 0;
ulobj.style.left = 0 + "px";
}
//索引加1
index++;
//移动图片
animate(ulobj, -index * screenWidth); //判断索引是不是第五个 如果是就说明是最后一张也是第一张 把最后一个索引的样式取消 设置第一个的样式
if (index == list.length - 1) {
olobj.children[olobj.children.length - 1].className = "";
olobj.children[0].className = 'current';
} else {
//索引不是最后一个就正常按照索引值设置样式
for (var j = 0; j < olobj.children.length; j++) {
olobj.children[j].removeAttribute('class');
}
olobj.children[index].className = 'current';
}
} //为左键注册事件
my$("left").onclick = function () {
//判断是不是第一张图 如果是就立刻把索引改完最后一张的索引（最后一张与第一张一样）切换成最后一张
if (index == 0) {
index = 5;
ulobj.style.left = -index * screenWidth + "px";
}
index--;
animate(ulobj, -index * screenWidth);
//正常设置样式
for (var j = 0; j < olobj.children.length; j++) {
olobj.children[j].removeAttribute('class');
}
//设置当前索引对于的样式
olobj.children[index].className = 'current';
} //设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 5);
}
</script> </body>
</html>
js 原生JS实现轮播图的更多相关文章
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 原生js的懒人轮播图
<style> body{ margin: 0; padding: 0px;}#carousel{ margin: auto; /* 居中 */ width: 600px; /* 设置宽度 ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
随机推荐
- ZooKeeper集群搭建过程
ZooKeeper集群搭建过程 提纲 1.ZooKeeper简介 2.ZooKeeper的下载和安装 3.部署3个节点的ZK伪分布式集群 3.1.解压ZooKeeper安装包 3.2.为每个节点建立d ...
- 如何用CURL将文件下载到本地指定文件夹
若直接调用下载文件的url有重定向,则需先调用第一个方法,获取到跳转后的url,才可直接下载.否则需要手动点击浏览器的下载确定按钮. 调用示例: $imgpath = "http://www ...
- Python常用算法
本节内容 算法定义 时间复杂度 空间复杂度 常用算法实例 1.算法定义 算法(Algorithm)是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机 ...
- 刷题向》DP》关于基础DP(easy)
openjudge 8464 这道题其实很简单,算是DP的基础题,比较适合开拓DP思维. 题目比较有欺骗性,其实稍微想想就可以解决,因为题意说第一次卖出后才能买入,所以我们可以考虑枚举断点,所以题目 ...
- Eclipse导入tomcat服务器
创建server
- 整合Office Web Apps至自己的开发系统
原文出处:http://www.cnblogs.com/poissonnotes/p/3267190.html 还可参考:https://www.cnblogs.com/majiang/p/36729 ...
- [GO]局部变量的特点
package main import "fmt" func main() { //定义在{}里的变量就是局部变量,只能在{}里起作用 //作用域,变量起作用的范围 //执行到定义 ...
- 人脸识别 人工智能(AI)
.. 如何通过AI实现 用我自己的数据集:能识别几张人脸.能否判断相似度.能否认出.
- jQuery拾忆
用jQuery操作select元素 http://www.jb51.net/article/23648.htm 表单中如果用disabled属性,则提交时不会提交该数据,尽量使用readonly属性 ...
- mysql5.6数据库双机热备、主从备份
主题:mysql5.6数据库双机热备.主从备份 缘由: 在Web应用系统中,数据库性能是导致系统性能瓶颈最主要的原因之一.尤其是在大规模系统中,数据库集群已经成为必备的配置之一.集群的好处主要有:查询 ...