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 ...
随机推荐
- Minimum Sum of Array（map)
You are given an array a consisting of n integers a1, ..., an. In one operation, you can choose 2 el ...
- Tornado中insert into sql语句的构造
#!/usr/bin/env python # -*- coding:utf-8 -*- d = {'name': 'alx', 'age': 18,'k1':123,'k2': 123} t = & ...
- Java 基于spring 暴露接口 供外部调用
在springmvc的配置文件添加创建如下的bean: <!-- 暴露一个webService连接 --> <bean class="org.springframework ...
- C#将DataTable数据导出到EXCEL的两种方法
1.在非服务器控件的页面导出数据,需要借助一张temp空页面post回后台的数据. 前台:window.location.href = "../Temp.aspx"; 后台: tr ...
- html5 存储方式
localstorage(永久保存)&&sessionstorage(重新打开浏览器会消失) sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在 ...
- Python基础入门-For循环
For循环的功能比较强大,他可以帮助我们实现很多重复性的工作.而且for循环能迭代不同的数据结构.他的应用也十分的广泛,作为初学者,我们需要对循环的概念多加理解和练习.接下来我们就来学习for循环的一 ...
- css总结4：input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...
- APP压力稳定性测试
转自:https://www.cnblogs.com/nuonuozhou/p/8643735.html 1.android系统自带monkey程序,模拟用户触摸屏幕,滑动track ball,按键等 ...
- [原创]Java中使用File类的list方法获取一定数量的文件：FilenameFilter接口的特殊用法
前言:有时候我们可能会遇到这样一个问题:需要遍历一个包含极多文件的文件夹,首先想到的肯定是使用File.list()方法,该方法返回一个String[],但是如果文件达到几亿呢?这个时候我们就需要分批 ...
- delphi 取json中数组的值（ISuperArray）
{ "action": "******", "data": [ { "Info1": { "ID": ...