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. ...
随机推荐
- Java程序员面试题收集（2）
1 String = 与 new 的不同 使用“=”赋值不一定每次都创建一个新的字符串,而是从“字符串实例池”中查找字符串.使用“new”进行赋值,则每次都创建一个新的字符串. 2 String与S ...
- 警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' did not find a matching property.
警告: [SetPropertiesRule]{Context/Loader} Setting property 'useSystemClassLoaderAsParent' to 'false' d ...
- Java TimeUnit使用
TimeUnit是java.util.concurrent包下面的一个类,表示给定单元粒度的时间段. 常用的颗粒度 TimeUnit.DAYS //天 TimeUnit.HOURS //小时 Time ...
- Power Strings POJ2406 KMP 求最小循环节
相比一般KMP,构建next数组需要多循环一次,因为next[j]代表前j-1个字符的最长相同前缀后缀,比如字符串为aab aab aab共9个字符,则next[10]等于前9个字符中最长相同前缀后缀 ...
- 【vue】/vue-ele-project
作者大大的地址是:https://github.com/JinwenXie/vue-ele-project 还是老办法,先运行项目看看效果 我不算是外卖爱好者,不过觉得那个添加商品到购物车的动画效果很 ...
- git pull拉取远程分支时出现冲突
现象:在git clone一个项目后,默认是master分支,但是如果想要切换到另一个已经存在的dev分支,那么不要先在本地创建dev分支再拉取远程的dev分支,而是应该直接切换到dev分支,然后再拉 ...
- 洛谷2593 [ZJOI2006]超级麻将——可行性dp
题目:https://www.luogu.org/problemnew/show/P2593 发现三个连续牌的影响范围只有3.相同牌的影响范围只有1之后就可以dp了. O(100^7)T飞. #inc ...
- Centos Apache 多站点配置
首先明白APACHE配置文件位置 /etc/httpd/ 系统会自动加载 "/etc/httpd/conf.d" 目录下面的 "*.conf"文件 创建多个 & ...
- mysql查询某个字段重复的数据
查询某个字段重复的数据 ; 查询股票重复的营业厅 ;
- Asio与Boost.Asio
译自http://think-async.com/Asio/AsioAndBoostAsio Asio有两种变体:(非Boost)Asio和Boost.Asio.本文概要描述二者的不同. 1. 源代码 ...