js轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#wrap {
width: 590px;
height: 340px;
margin: 50px auto;
border: #000 1px solid;
overflow: hidden;
position: relative;
}
#wrap a {
display: block;
width: 50px;
height: 30px;
background: #000;
opacity: .5;
color: #fff;
line-height: 30px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -15px;
text-decoration: none;
font-weight: 900;
font-size: 24px;
z-index: 990;
}
#prev {
left: 0;
}
#next {
right: 0;
}
#btn {
position: absolute;
left: 50%;
bottom: 10px;
width: 130px;
margin-left: -65px;
z-index: 999;
}
#btn li {
width: 20px;
height: 20px;
float: left;
margin-left: 6px;
border-radius: 50%;
background: #c00;
}
#btn li.active {
background: #ccc;
}
#box {
height: 340px;
position: absolute;
}
#box li {
width: 590px;
height: 340px;
position: absolute;
left: 0;
top: 0;
opacity:0;
}
#box img {
width: 590px;
height: 340px;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function () {
var oWrap = document.getElementById('wrap');
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn');
var aBtn = oBtn.children;
var aLi = oBox.children;
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var iNow = 0;
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function () {
iNow = this.index;
tab();
}
}
function tab() {
for (var i = 0; i < aLi.length; i++) {
aBtn[i].className = '';
move(aLi[i], {opacity: 0});
}
aBtn[iNow].className = 'active';
move(aLi[iNow], {opacity: 1});
}
oPrev.onclick = function () {
iNow--;
if (iNow == -1)iNow = aBtn.length - 1;
tab();
};
oNext.onclick = next;
function next() {
iNow++;
if (iNow == aBtn.length)iNow = 0;
tab();
}
var timer = null;
timer = setInterval(next,3000);
oWrap.onmouseover = function(){
clearInterval(timer);
};
oWrap.onmouseout = function(){
timer = setInterval(next,3000);
};
}
</script>
</head>
<body>
<div id="wrap">
<a href="javascript:;" id="prev">←</a>
<a href="javascript:;" id="next">→</a>
<ul id="box">
<li style="opacity:1;"><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/5.jpg" alt=""/></li>
</ul>
<ol id="btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
/**
* Created by Administrator on 2016/11/3.
*/
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function move(obj, json, options) {
clearInterval(obj.timer);
options = options || {};
options.time = options.time || 500;
options.easeing = options.easeing || 'ease-out';
var dis = {};
var start = {};
for (var name in json) {
start[name] = parseFloat(getStyle(obj, name));
dis[name] = json[name] - start[name];
}
var count = Math.floor(options.time / 30);
var n = 0;
obj.timer = setInterval(function () {
n++;
for (var name in json) {
switch (options.easeing) {
case 'linear':
var a = n / count;
var cur = start[name] + dis[name] * a;
break;
case 'ease-in':
var a = n / count;
var cur = start[name] + dis[name] * a * a * a;
break;
case 'ease-out':
var a = 1 - n / count;
var cur = start[name] + dis[name] * (1 - a * a * a);
}
if (name == 'opacity') {
obj.style.opacity = cur;
obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
} else {
obj.style[name] = cur + 'px';
}
}
if (n == count) {
clearInterval(obj.timer);
options.fn && options.fn();
}
}, 30);
}
js轮播的更多相关文章
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- js___原生js轮播
原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- 纯js轮播图练习-2,js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
- 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化
之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS轮播图(网易云轮播图)
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- 原生js轮播以及setTimeout和setInterval的理解
下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...
- 问题:关于坛友的一个js轮播效果的实现
需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div 然后在原位置在隐藏一个div 给按钮添加click事件,转到下一个时 ...
随机推荐
- PHP脱mysql脚本
<?php $SQL_Server="xxxxxx:3306"; $SQL_User="xxxx"; $SQL_Name="xxxx" ...
- time模块目录下自己建立一个名为log的文件夹
使用python调用ping命令,然后在日志中记录ping的结果,用来监测网络连通情况. 代码: [python]from time import *from subprocess import *w ...
- shutter截图工具
安装: 1.打开ubuntu software center,搜索shutter,安装. 使用:
- 多维数组问题 int (*a)[] int []
今天做调整方阵这道题: 第一遍提交没有通过, 又gdb 重新温故了 交换二维数组中的两行数据: void swap(int *a, int *b) { int t = *a; *a = *b; *b ...
- python中的Queue
一.先说说Queue(队列对象) Queue是python中的标准库,可以直接import 引用,之前学习的时候有听过著名的“先吃先拉”与“后吃先吐”,其实就是这里说的队列,队列的构造的时候可以定义它 ...
- Java - Collection 高效的找出两个List中的不同元素
如题:有List<String> list1和List<String> list2,两个集合各有上万个元素,怎样取出两个集合中不同的元素? 方法1:遍历两个集合 public ...
- Git command line
# Pull the repo from master git pull # Create branch for myself in local git branch john/jenkins_cod ...
- C#编程利器之一:类(Class)【转】
C#编程利器之一:类(Class) 面向对象的程序设计(Object-Oriented Programming,简记为OOP)是一种功能非常强大的编程方法,立意于创建软件重用代码,以类为基础去思考编程 ...
- busybox rootfs 启动脚本分析(一)
imx6文件系统启动脚本分析.开机运行/sbin/init,读取/etc/inittab文件,进行初始化. 参考链接 http://blog.163.com/wghbeyond@126/blog/st ...
- blockdev命令和blkid命令
blockdev命令和blkid命令 http://www.jb51.net/LINUXjishu/310389.html block相关的命令 这篇文章主要介绍了Linux blockdev命令设置 ...