这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 js 轮播特效,简单实用的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生 js 写的轮播,欢迎指点批评:
首先 CSS 代码
- a {
- text - decoration: none;
- color: #3DBBF5;
- } * {
- margin: 0;
- padding: 0;
- }.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: 0;
- 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: 1;
- }#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;
- }
以上是所有代码,欢迎指点交流!
来源: http://www.phperz.com/article/17/0720/335327.html