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 ...
随机推荐
- Linux的基本指令shell
计算机语言的进化过程,7代语言 机器语言(6种位运算)-> 汇编语言->C语言 -> C++/Java -> Paython / go /Ruby -> 自 ...
- ora-24247 网络访问被访问控制列表ACL拒绝
, upper_port ); COMMIT; END; / --3.创建访问控制列表(ACL)network_services, BEGIN DBMS_NETWORK_ACL_ADM ...
- oracle delete t1；drop table t1；drop table t1 purge
Truncate tableTruncate table t1;Ddl语言,自动提交:不能回退:回收范围::挪动高水位线:将所有的数据清除,保留表结构:将表缩的最小:保留表的约束和权限. Drop t ...
- mongo 修改器 $inc/$set/$unset/$pop/$push/$pull/$addToSet
mongo $inc 可以对集合里面的某些值是数字的增减.看代码 $set 可以进行修改,并且不存在的时候默认添加. 同时还能该变数据的类型. 还可以该变内嵌元素的值 用.调用 $unset 删除 ...
- Win10 pip安装pycocotools报错解决方法(cl: 命令行 error D8021 :无效的数值参数“/Wno-cpp”)
参考: https://blog.csdn.net/chixia1785/article/details/80040172 https://blog.csdn.net/gxiaoyaya/articl ...
- Django框架 之 ORM中介模型
Django框架 之 ORM中介模型 中介模型 处理类似搭配 pizza 和 topping 这样简单的多对多关系时,使用标准的ManyToManyField 就可以了.但是,有时你可能需要关联数据 ...
- Requests接口测试(五)
使用python+requests编写接口测试用例 好了,有了前几章的的基础,写下来我把前面的基础整合一下,来一个实际的接口测试练习吧. 接口测试流程 1.拿到接口的URL地址 2.查看接口是用什么方 ...
- Terminologies in MVC: Part 2 (Razor Engine Syntax vs Web Form)
By Abhishek Jaiswal :) on Mar 21, 2015 In this article we learn about Razor Engine Syntax vs Web For ...
- linux新的API signalfd、timerfd、eventfd使用说明
原文:http://www.cfanz.cn/?c=article&a=read&id=46555注意很多当前(2013/8/6)线上运营的Linux内核可能不支持! 三种新的fd加入 ...
- HttpWebRequest post上传文件
public static string HttpUploadFile(string url, string path) { // 设置参数 HttpWebRequest request = WebR ...