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 ...
随机推荐
- 结合spring 实现自定义注解
注解类 import java.lang.annotation.*; /** * Created by Administrator on 2016/6/28. */ //ElementType.MET ...
- Python基本数据类型--列表、元组、字典、集合
一.Python基本数据类型--列表(List) 1.定义:[ ]内以逗号分隔,按照索引,存放各种数据类型,每个位置代表一个元素. 2.列表的创建: # 方式一 list1 = ['name','ag ...
- java基础之多线程一：概述
概述: 进程有多条执行路径, 合成为: 多线程. 进程和线程的描述: 进程: 可执行程序(文件), 例如: .exe//可以把进程理解为一辆车. 一台电脑上可以有多个进程, 这些进程之间的数据是相互隔 ...
- 02.socket实现远程调用
不使用webservice使用以前的知识也可以实现远程系统之间的调用.用Socket可以.实现Socket通信. 开设一个端口.ip.
- laravel数据迁移(创建错误列不能创建)
创建数据表的命令 php artisan make:migration create_users_table 执行这个迁移的命令, php artisan migrate 其实感觉就像简单的方法创建数 ...
- 构造方法概念，自定义构造（init）方法的用途， 类工厂方法（就是直接用类名 类调用）
一. 构造方法 构造方法:在OC中init开头的方法, 我们称之为构造方法 构造方法的用途: 用于初始化一个对象, 让某个对象一创建出来就拥有某些属性和值 // 比如我们定义一个Person的类,然后 ...
- box-shadow 内阴影
1.盒子阴影样式单词:box-shadow 2.语法 代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色(#000),有inset 代表框内阴影 ,不带inset 代表框外阴影. 注意:bo ...
- 解决0RA-04031故障
1.客户反应报表数据很慢,简单查询5分钟都出不来. 2.登陆数据库服务器检查日志:Thu Mar 21 16:20:30 2013Errors in file /opt/oracle/diag/rdb ...
- SqlDataAdapter 批量更新数据库表
在数据库中批量插入数据许多人都已经了解了,就是使用.net 中的SqlBulkCopy对象(MSDN详解).我们在做评教系统的时候使用过这个对象,它能将数据表批量导入到数据库中,效率比单条插入数据效率 ...
- .Net插入大批量数据
1. 使用SqlDataAdapter /// <summary> /// 实现数据库事务,大批量新增数据 /// </summary> ...