js___原生js轮播
原生js轮播
作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评;
首先css代码
a{text-decoration:none;color:#3DBBF5;}
*{
margin:;
padding:;
}
.wrapper{
width: 400px;
height: 300px;
margin: 100px auto;
}
#lunbo{
position: relative;
overflow: hidden;
}
#list{
position: relative;
white-space: nowrap; // 这块用行元素模拟,所以才用该属性,块元素可修改这块
}
#list span{
display: inline-block;
width: 400px;
height: 300px;
text-align: center;
line-height: 300px;
font-weight: bold;
font-size: 100px;
color: #fff;
}
#buttons{
position: absolute;
bottom:;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
}
#buttons span{
display: inline-block;
width: 15px;
height: 5px;
background: #fff;
margin: 0 10px;
cursor: pointer;
transition: all .5s;
}
#buttons span.on{
height: 20px;
}
.arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 80px;
font-weight: bold;
color: #fff;
opacity: .3;
transition: all .5s;
}
.wrapper:hover .arrow{
opacity:;
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
然后HTML代码
<div class="wrapper">
<div id="lunbo">
<div id="list" style="left: -400px;">
<span style="background:yellow;">5</span><span style="background: red;">1</span><span style="background:black;">2</span><span style="background:green;">3</span><span style="background:blue;">4</span><span style="background:yellow;">5</span><span style="background: red;">1</span>
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</div>
最后js代码
window.onload=function () {
var lunBo = document.getElementById("lunbo");
var list = document.getElementById("list");
var btn = document.getElementById("buttons").getElementsByTagName('span');
var prev = document.getElementById("prev");
var next = document.getElementById('next');
var interval = 3000;
var timer;
var index = 1;
var animated = false;
for (var i=0;i<btn.length;i++) { //按钮加点击事件
btn[i].onclick=function () {
if(this.className=='on') //如果是状态按钮直接返回节约资源
{
return
};
var myIndex =parseInt(this.getAttribute('index'));//获取按钮的index属性值
var offset = -400*(myIndex-index); //根据属性值 计算偏移量
animate(offset) //轮播动画
index = myIndex; // 改变索引值
showBtn(); //显示状态按钮
}
}
function showBtn () {
for (var i=0;i<btn.length;i++) {
btn[i].className='';
}
btn[index-1].className='on';
}
prev.onclick=function () { //上一页事件
if (animated) { //如果是动画状态 直接返回解决bug
return;
}
if (index==1) {
index =btn.length;
} else{
index-=1;
}
animate(400);
showBtn();
}
next.onclick=function () {
if (animated) {
return;
}
if (index==btn.length) {
index =1;
} else{
index+=1;
}
animate(-400);
showBtn();
}
function animate(offset) {
animated = true; //表示在动画状态
var newLeft = parseInt(list.style.left) + offset; //计算新的left值
var time = 400; //设置动画总时间
var interval = 10; //动画帧时间
var speed = offset/(time/interval); //每帧运动距离
function go () {
if ((speed>0 && parseInt(list.style.left)<newLeft) || (speed<0 && parseInt(list.style.left)>newLeft)) { //通过条件判断到它是否还要继续进行动画
list.style.left = parseInt(list.style.left) + speed +'px';
setTimeout(go,interval)
} else{
animated = false; //动画状态结束
list.style.left = newLeft + 'px'; //现在的位移
if (parseInt(list.style.left)<-2000) { // 辅助假图
list.style.left = -400 + 'px';
} else if( parseInt(list.style.left)>-400){
list.style.left = -2000 + 'px';
}
}
}
go();
}
function play () {
timer = setTimeout(function () {
next.onclick();
play();
},interval)
}
play();
function stop () {
clearTimeout(timer);
}
lunBo.onmouseover=stop;
lunBo.onmouseout=play;
}
以上是所有代码,欢迎指点交流!
js___原生js轮播的更多相关文章
- 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js轮播以及setTimeout和setInterval的理解
下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...
- 原生js轮播图
//用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 原生JS轮播-各种效果的极简实现
寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 原生js轮播图实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 面向对象原生js轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- .net core CLI(创建VueJS||Angular结合的项目)
net core cli 是快速创建模板项目 安装CLI 参考: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.as ...
- 蓝桥杯-组素数-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- eclipse 创建maven模块
先创建一个聚合模块. 勾选Create a simple project 点击finish . 看到已经创建好了这个聚合. 接下来我们创建子模块.pay-hk pay-web 两个字模块,前面一个是 ...
- .net使用RabbitMQ
前面的两篇博文算是把RabbitMQ的基础了解了下,今天学习.Net 中RabbitMQ的使用.原本这篇博文是应该上周写的,可在自己使用的过程中出现了一个问题bug:就是在连接服务端时,一直报下面的错 ...
- 利用PHPExcel读取Excel的数据和导出数据到Excel
PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我 ...
- React Native技术做的一个项目“微笑阅读”
最近用React Native做了一个APP应用,有点心得: React Native确实比Hybrid应用渲染快,响应快,用户体验更好: React Native比原生简单多了,会Js就可以了,开发 ...
- Java面试题之最扯淡的String
public class ThreadException { public static void main(String[] args) { 没加final的代码 String hello = &q ...
- 如何利用动态URL提升SEO及处理业务逻辑
如果你正在建设一个新网站或者对现有网站重新设计,我们认为应该将网站的 URL 转换为用户友好的 URL,或搜索引擎友好的 URL,这类 URL 也称为语义 URL(Semantic URL).哪些UR ...
- spring---简介
spring spring是什么? 目的:解决企业应用开发的复杂性 功能:使用基本的JavaBean代替EJB,并提供了更多的企业应用功能 范围:任何Java应用 简单来说,Spring是一个轻量级的 ...
- 20155212 实验四 《Android程序设计》 实验报告
20155212 实验四 <Android程序设计> 实验报告 (一)Android Stuidio的安装测试 参考<Java和Android开发学习指南(第二版)(EPUBIT,J ...