JavaScript--缓动动画+轮播图
上效果：
实现步骤：
最重要的是运动公式！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>总有人比你富有，却比你更聪明更努力！</title>
<style type="text/css">
/* css 重置 */
* {
margin: 0;
padding: 0;
list-style: none;
} body {
background: #fff;
font: normal 12px/22px 宋体;
} img {
border: 0;
} a {
text-decoration: none;
color: #333;
} /* 本例子css */
.slideBox {
width: 790px;
height: 340px;
overflow: hidden;
position: relative;
border: 1px solid #ddd;
margin: 50px auto;
} .bd .hd {
height: 20px;
/*overflow: hidden;*/
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
width: 16%;
} .bd .hd ul {
/*overflow: hidden;*/
zoom: 1;
float: left!important;
} .bd .hd ul li {
margin-right: 5px!important;
width: 20px;
height: 20px;
line-height: 20px;
font-weight: bold;
text-align: center;
background: #fff;
cursor: pointer;
border-radius: 50%;
float: left; } .bd .hd ul li.on {
background: #f00;
color: #fff; } .slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
} .slideBox .bd ul{
float: left!important;
width: 600%;
position: absolute;
} /* ----------------------- */
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
left: 0;
top: 0;
float: left;
} /*.slideBox .bd li.first {*/
/*z-index: 1;*/
/*}*/ /* ----------------------- */
.slideBox .bd img {
width: 790px;
height: 340px;
display: block;
} .slideBox .prev,
.slideBox .next {
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
display: none;
width: 32px;
height: 40px;
background: rgba(0,0,0,0.3);
filter: alpha(opacity=50);
opacity: 0.5;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #fff;
line-height: 40px;
} .slideBox .next {
left: auto;
right: 0;
background-position: 8px 5px;
} .slideBox .prev:hover,
.slideBox .next:hover {
filter: alpha(opacity=100);
opacity: 1;
} </style>
</head>
<body>
<div id="slideBox" class="slideBox"> <div class="bd" id="bd">
<div class="hd">
<ul id="control"></ul>
</div> <ul id="imgsUl"></ul>
<a class="prev" id="prev" href="javascript:;" ><</a>
<a class="next" id="next" href="javascript:;">></a>
</div> </div>
</body>
</html>
<script>
// 记录当前图片下标-- 为了图片索引值同步
var imgIndex = 0;
var t = null; // 计时器变量
var imgWidth =790;
var target = 0 ; // 缓动动画移动目标和缓动动画开始位置
var autoTimer;
// 公共获取事件源函数
function $(id) {
return document.getElementById(id);
} // 功能需求类似tab栏，也可参考线上轮播图效果
// 获取轮播图区
// 获取轮播图
var imgArr = [
"images/01.jpg",
"images/02.jpg",
"images/03.jpg",
"images/04.jpg",
"images/05.jpg"
]; //自动生成小红点li
// 默认设置第一个li的className是on
// 生成第一个默认li带并设置className = "on"
var liArr = [];
for(var i = 0 ; i < imgArr.length ; i++ ) {
liArr.push('<li></li>')
}
// 转换成字符串
$('control').innerHTML = liArr.join('');
// 设置属性
$('control').children[0].setAttribute("class","on") // 自动生成图片li
var imgUl = $("imgsUl"); var imgsLis = [];
for(var i = 0 ; i < imgArr.length ; i++ ) {
imgsLis.push('<li><a href="#"><img id="bigImg" src="'+imgArr[i]+'"/></a></li>')
}
// 转换成字符串
imgUl.innerHTML = imgsLis.join('');
// 克隆第一张图片li
imgUl.appendChild(imgUl.children[0].cloneNode(true)); // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
$('bd').onmouseover = function () {
$('prev').style.display = "block";
$('next').style.display = "block";
}
$('bd').onmouseout = function () {
$('prev').style.display = "none";
$('next').style.display = "none";
} // 圆点鼠标移到上面图片轮播
var liBtns = $('control').getElementsByTagName('li');
for (var i = imgIndex ; i < liBtns.length ; i++) {
// 设置当前按钮下标
liBtns[i].index = i;
liBtns[i].onmouseover = function () {
imgIndex = this.index;
// 开启的缓动动画的计时器
startInterval(imgIndex);
}
} /*上下轮播图*/
// 下一张轮播图
$('next').onclick = function () {
clearInterval(t);
imgIndex++;
if(imgIndex == imgUl.children.length ) {
imgUl.style.left = 0;
imgIndex = 1;
}
startInterval(imgIndex);
};
// 上一张轮播图
$('prev').onclick = function () {
clearInterval(t);
imgIndex--;
if(imgIndex == -1 ) {
imgUl.style.left = -imgWidth*(imgUl.children.length-1) +"px";
imgIndex = imgUl.children.length - 2;
}
startInterval(imgIndex);
} // 开启缓动动画计时器
function startInterval(index) {
// 关闭缓动动画计时器
clearInterval(t);
for(var j = 0 ; j < liBtns.length ; j++) {
liBtns[j].className = "";
}
liBtns[index%5].className = 'on';
console.log(target+'ttt');
t = setInterval(function () {
// 无缝轮播图片
target = -index * imgWidth;
var speed = (target-imgUl.offsetLeft)/7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(target == imgUl.offsetLeft) {
clearInterval(t);
}else{
imgUl.style.left = imgUl.offsetLeft + speed + "px";
}
},30); } </script>
JavaScript--缓动动画+轮播图的更多相关文章
- 【JavaScript】固定布局轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript无缝流畅动画轮播，终于让我给搞出来了。
自己一直想写一个真正能用的轮播图,以前是写过一个,但是不是无缝的轮播,感觉体验很差,这个轮播之前也搞了很多实例,看了很多代码,但是脑子总转不过弯,为什么在运动到一定距离后可以突然转回到原始位置,而没有 ...
- 简要分析javascript的选项卡和轮播图
选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- jQuery封装轮播图插件
// 布局要求,必须有一个容器,图片和两个按钮,布局方式自定,小圆点样式固定 // <div class="all"> // <img src="img ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
随机推荐
- 转： V4L2驱动程序架构
源地址:http://blog.chinaunix.net/uid-26101960-id-3297657.html 1 V4L2简介 video4linux2(V4L2)是Linux内核中关于视频设 ...
- JavaScript 的 WebAssembly
本周发布的 Firefox 52 加入了对 WebAssembly 的支持,成为第一个支持 WebAssembly 标准的浏览器,而其它浏览器如 Chrome 57.Safari 和 Edge 也都会 ...
- JasperReports报表变量13
报表变量是建立在报表表达式之上的特殊对象.报表变量简化以下任务: 报表,其中大量使用在整个报告模板表达式.这些表达式可以通过使用报表变量只能声明一次. 计数,求和,平均,最低,最高,方差等:报表变量可 ...
- vue之this.$route.params和this.$route.query的区别
1.this.$route.query的使用 A.传参数: this.$router.push({ path: '/monitor', query:{ ...
- JavaScript多继承（转载）
js里是否有多继承,如何实现多继承.在这里可以看看java是如何处理多继承的问题,java里是没有多继承的,即一个子类不能同时继承多个父类,但可以实现多个接口,这也间接的实现了多继承.主要是因为多继承 ...
- python 实现发送短信验证码
[说明]短信接口使用的是“聚合数据”上面的接口. 那么在使用接口前,需要在聚合数据上面注册,进行申请接口.当然在正式使用之前,我们可以使用申请免得的进行测试. 一.申请成功后,需做的准备工作如下: 1 ...
- Nginx1.10.2安装配置
以下操作均在当前用户目录操作(root的目录,截止2016.11.2最新版本) 1.安装常用工具及基础包:yum -y install wget git vim make gcc gcc-c++ op ...
- 学习JDK1.8集合源码之--TreeMap
1. TreeMap简介 TreeMap继承自AbstractMap,实现了NavigableMap.Cloneable.java.io.Serializable接口.所以TreeMap也是一个key ...
- 2019.9.24 csp-s模拟测试51(a) 反思总结
T1:还在头铁,顺便复习了一下lct[虽然这题用不上因为复杂度不对] 头铁结束. 虽然题目存在换根的操作,实际上并不用真的换根. 2操作中求lca的时候只要考虑原树上root和x.y的lca以及x,y ...
- Django项目：CRM(客户关系管理系统)--11--04PerfectCRM实现King_admin注册功能03
#base_admin.py #Django admin 注册功能的形式 # sites = { # 'crm':{ # 'customers':CustomerAdmin, # 'customerf ...