原生js实现无缝轮播
原生js实现无缝轮播
因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的。
- html部分
<div class="banner" id="banner">
<ul class="pic" id="pic">
<li><a href="javascript:void(0)"><img src="data:images/1.jpg"></a></li>
<li><a href="javascript:void(0)"><img src="data:images/2.png"></a></li>
<li><a href="javascript:void(0)"><img src="data:images/3.png"></a></li>
<li><a href="javascript:void(0)"><img src="data:images/4.png"></a></li>
<li><a href="javascript:void(0)"><img src="data:images/5.jpg"></a></li>
<li><a href="javascript:void(0)"><img src="data:images/6.png"></a></li>
<li><a href="javascript:void(0)"><img src="data:images/7.png"></a></li>
</ul>
<ul class="dot" id="dot"></ul>
<button class="left" id="leftBtn"><</button>
<button class="right" id="rightBtn">></button>
</div> - css部分
* {
padding:;
margin:;
}
.banner {
width: 1000px;
height: 600px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
ul, li {
list-style: none;
}
.pic {
height: 600px;
position: absolute;
left:;
top:;
}
.pic li {
float: left;
}
.pic li img {
width: 1000px;
height: 600px;
}
.dot {
width: 100%;
text-align: center;
font-size:;
position: absolute;
bottom: 40px;
left:;
}
.dot li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
}
.banner button {
width: 30px;
height: 50px;
background-color: rgba(0, 0, 0, .5);
border: 0 none;
color: #fff;
opacity: .5;
position: absolute;
top: 45%;
cursor: pointer;
font-size: 24px;
}
.left {
left:;
}
.right {
right:;
} - js部分
js中有封装的一些方法,包括查看对象属性的兼容写法,动画函数(该方法实现了height,width,left,top,opacity等属性的动画效果),和通过事件冒泡找寻节点的函数;var leftBtn = document.getElementById("leftBtn");
var rightBtn = document.getElementById("rightBtn");
var banner = document.getElementById("banner");
var pic = document.getElementById("pic");
var dot = document.getElementById("dot");
for (var i = 0; i < pic.children.length; i++) {
var node = document.createElement("LI");
node.index = i;
dot.appendChild(node);
}
var copy = pic.children[0].cloneNode(true);
pic.appendChild(copy);
var width = parseInt(getStyle(pic.children[0], "width"));
var len = pic.children.length;
pic.style.width = width * len + "px";
var index = 0;
var t;
function move() {
if(index == len) {
pic.style.left = 0;
index = 1;
}
if (index == -1) {
pic.style.left = -(len - 1) * width + "px";
index = len - 2;
}
left = -width * index;
changeDots(index);
animate(pic, {left, left}, function() {
t = setTimeout(function () {
index++;
if (index == len) {
pic.style.left = 0;
index = 1;
}
move();
}, 2000);
});
}
move();
// 为按钮添加点击事件
dot.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
target = getTarget(target, "tagName", "LI", this);
if (target) {
clearTimeout(t);
index = target.index;
changeDots(index);
move();
}
}
// 左右按钮
leftBtn.onclick = function() {
clearTimeout(t);
index--;
move();
}
rightBtn.onclick = function() {
clearTimeout(t);
index++;
move();
}
// 改变按钮颜色
function changeDots(index) {
if (index < 0) {
index = len;
}
if (index == len - 1) {
index = 0;
}
for (var i = 0; i < len - 1; i++) {
dot.children[i].style.backgroundColor = "#fff";
}
dot.children[index].style.backgroundColor = "red";
}
/**
* 查看ele对象的type属性
* @param {元素对象} ele
* @param {属性} type
*/
function getStyle(ele, type) {
if (ele.currentStyle) {
return ele.currentStyle[type];
} else {
return getComputedStyle(ele, null)[type];
}
}
/**
* 动画效果
* @param {元素对象} el
* @param {结束条件} endObj
* @param {回调函数} cb
* @param {时间} time
*/
function animate(el, endObj, cb, time) {
time = time || 200;
var startObj = {};
var _startObj = {};
var speedObj = {};
for (var i in endObj) {
startObj[i] = parseInt(getStyle(el, i));
_startObj[i] = startObj[i];
speedObj[i] = 16.7 * (endObj[i] - startObj[i]) / time;
}
var flag = false;
clearInterval(el.t);
el.t = setInterval(function() {
for (var j in endObj) {
startObj[j] += speedObj[j];
if (_startObj[j] < endObj[j] ? startObj[j] >= endObj[j] : startObj[j] <= endObj[j]) {
startObj[j] = endObj[j];
clearInterval(el.t);
flag = true;
}
if (j == "opacity") {
el.style[j] = startObj[j];
} else {
el.style[j] = startObj[j] + "px";
}
}
if (flag && cb) {
cb();
}
}, 16.7);
}
/**
* 找到attr属性为value的节点
* @param {目标对象,鼠标点击对象} target
* @param {属性名} attr
* @param {属性值} value
* @param {结束条件} end
*/
function getTarget(target, attr, value, end) {
while (target != end) { //如果鼠标点击的是end,则直接结束
if (target[attr] == value) { //如果点击的对象的attr属性值为value,则返回该对象
return target;
}
target = target.parentNode; //否则查找其父节点
}
}
原生js实现无缝轮播的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- 自己用原生JS写的轮播图,支持移动端触屏滑动,面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 原生JS实现幻灯片轮播效果
在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...
随机推荐
- supervisor 守护者进程配置小记
安装 Supervisor 联网状态下,官方推荐首选安装方法是使用easy_install,它是setuptools(Python 包管理工具)的一个功能.所以先执行如下命令安装 setuptools ...
- vue组件之前嵌套
https://www.cnblogs.com/chengduxiaoc/p/7099552.html <!DOCTYPE html> <html lang="en&quo ...
- kettle集群(转换)
1.定义子服务器 新建子服务器中有一个必须为主服务器 新建集群 在需求集群运行的步骤中右键集群进行使用
- Lodop条形码竖条和值右端不对齐的解决方法
当Lodop条形码设置的宽度比较短,数值比较多的时候,会出现条码的竖条和右端不对齐.个人测试了一下,发现解决办法有三种:1.增加条形码的宽度.2.隐藏条码本身的值,用text文本代替.3.修改条形码下 ...
- Nginx-Tomcat搭建负载均衡(转载)
一. 工具 nginx-1.8.0 apache-tomcat-6.0.33 二. 目标 实现高性能负载均衡的Tomcat集群: 三. 步骤 1.首先下载Nginx,要下载稳定版: 2 ...
- P3455 [POI2007]ZAP-Queries(莫比乌斯反演)
题目 P3455 [POI2007]ZAP-Queries 解析 莫比乌斯反演. 给定\(n\),\(m\),\(d\),求\[\sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j ...
- Yii2.0 安装使用报错:yii\web\Request::cookieValidationKey must be configured with a secret key.
下载了Yii2.0的basic版,配置好apache之后,浏览器访问,出现如下错误: Invalid Configuration – yii\base\InvalidConfigException y ...
- Spring security oauth2 client_credentials认证 最简单示例代码
基于spring-boot-2.0.0 1,在pom.xml中添加: <!-- security --> <!-- https://mvnrepository.com/artifac ...
- 主席树[可持久化线段树](hdu 2665 Kth number、SP 10628 Count on a tree、ZOJ 2112 Dynamic Rankings、codeforces 813E Army Creation、codeforces960F:Pathwalks )
在今天三黑(恶意评分刷上去的那种)两紫的智推中,突然出现了P3834 [模板]可持久化线段树 1(主席树)就突然有了不详的预感2333 果然...然后我gg了!被大佬虐了! hdu 2665 Kth ...
- WS_TABSTOP 与 BS_DEFPUSHBUTTON 第一次使有
关于 WS_TABSTOP,我一直没搞明白,为何加了 WS_TABSTOP ,当按下 Tab 键时,窗口中的控件还是不能自动的切换焦点. 为何 SetFocus(hwnd); 后,虽然按钮已获得焦点, ...