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 ...
随机推荐
- 3D Text & GUI Text & GUI Texture
[Unity3D Text] 3D Text通过"Text Mesh"组件."MeshRender共同完成",通过如下方法要以创建一个3D Text. 3D T ...
- golang hello
package main import "fmt" func main() { fmt.Printf("Hello, world.\n") }
- while循环 for循环的理解
不管是while循环还是for循环都隐含着一个if else的结构,就是说,if 条件满足,那么就执行循环体内部的语句,else就做循环体外部的事情. 有一个例子我觉得特别典型,程序内部定义了一个特定 ...
- c语言实践 打印三角形
效果如下: 我是怎么考虑这个问题的. 首先共有5行,那么我们需要一个循环,让这个循环走5遍. 那么我们有个大概的代码结构 for(int i=0;i<5;i++) { } i的定义域是[0,4] ...
- jdbc中Statement和PreparedStatement有什么区别？哪个性能更好？
Statement和PreparedStatement的功能主要是对sql语句的执行 区别 (1)Statement每执行一条sql语句就需要生成一条执行计划,执行100条就需要100条执行计划Pre ...
- Python基础 之列表、字典、元组、集合
基础数据类型汇总 一.列表(list) 例如:删除索引为奇数的元素 lis=[11,22,33,44,55] #第一种: for i in range(len(lis)): if i%2==1: de ...
- 第一章Python简介
1.Python shell(Python命令解释器) 如下所示 2.Python的交互模式 如下 3.代码编辑器窗口 在上面的那些指令称为源代码. 4.在python中,缩进是有语法意义的. 在某行 ...
- 详解servlet的url-pattern匹配规则.RP
首先需要明确几容易混淆的规则: servlet容器中的匹配规则既不是简单的通配,也不是正则表达式,而是特定的规则.所以不要用通配符或者正则表达式的匹配规则来看待servlet的url-pattern. ...
- C# JackLib系列之字体使用
字体的使用一般我们都是使用系统字体,这样比较方便,直接 Font font=new Font("微软雅黑",16f,FontStyle.Bold); 但是当我们用到一个系统没有的字 ...
- Diameter协议摘要
---------选择同学整理文档 1. 协议概述 Diameter协议主要为应用程序提供认证.鉴权.计费框架,即AAA,并支持本地AAA和漫游场景下的AAA. 1.1. 特点介绍 以前的AAA ...