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. ...
随机推荐
- 用Jmeter参数化实现接口自动化测试
本文记录如何使用Jmeter参数化(csv)实现接口自动化——测试Token不同入参情况下,接口请求能够返回正确的结果 1. 首先需要使用Jmeter获取一个Token,如何获取暂略(同一般访问请求方 ...
- 整体二分(模板） 求区间第k小
整体二分,将询问与初值一起放入一个结构体里,然后每次二分判断询问在哪边,树状数组维护,时间复杂度O((n+Q)lognlogMAX_a[i] 代码 #include<iostream> # ...
- loj2324 「清华集训 2017」小 Y 和二叉树
https://loj.ac/problem/2324 太智障,一开始以为中序遍历的第一个点一定是一个叶子,想了个贪心.然而,手算了一下,第一个点都过不了啊. input 5 2 3 4 1 3 3 ...
- Lvs 环境搭建 vbox搭建centos6.9 vbox设置 centos上安装nginx
1.现在vbox上虚拟出3个虚拟机,分别为负载均衡器(Load Balance).实际服务器1(Real server1).实际服务器2(Real Server2) 要点: :vbox系统网络连接方式 ...
- COOK50小结
题目链接 很遗憾.看到第五题的通过人数就不敢做了.待日后补上. A题 求最长的连续子序列,使得他们满足gcd为1. 如果有相邻的两个数的gcd为1,那么整个序列的gcd值也就是1, 否则就是该序列不存 ...
- 配置 CentOS 7 的网络,及重命名网卡名
Centos 安装时应配置网络,如果当时没配置好,则装完系统后, 也可通过修改配置文件并重启网络服务进行配置. 说明:CentOS 7.0默认安装好之后是没有自动开启网络连接的! cd /etc/sy ...
- java知识点---文件分隔符
本篇讲述java编程中,怎样解决跨平台时,因不同系统中分隔符不同导致的文件或路径找不到的问题 首先来看两个例子: 一.linux系统和windows系统中的文件路径: Linux系统: Windows ...
- io.spring.platform继承方式和import方式更改依赖版本号的问题
使用io.spring.platform时,它会管理各类经过集成测试的依赖版本号. 但有的时候,我们想使用指定的版本号,这个时候就需要去覆盖io.spring.platform的版本号. 前面的文章总 ...
- maven下载安装以及环境配置
1.到官网下载maven 2.解压到自己想放的安装目录 3.复制maven所在的安装路径,然后右键我的电脑-->属性-->高级系统设置-->环境变量 4.在系统变量中新建,设置变量名 ...
- IO流8 --- 使用FileReader和FileWriter实现文本文件的复制 --- 技术搬运工（尚硅谷）
@Test public void test4(){ FileReader fr = null; FileWriter fw = null; try { fr = new FileReader(&qu ...