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. ...
随机推荐
- phpStrom编辑器 通过 git 提交代码到 gitlab
前提: 1.已经成功安装 git: 2.将 phpstrom 和 gitlab 连接起来.参考此文章 一.在 phpstrom 中打开需要推送的项目 二.将 ‘工作区’ 代码 添加到 ‘暂存区’ 三. ...
- hbase表内存的分布
- hadoop面试题及答案解析
1.(Datanode)程序负责HDFS数据存储. 2.HDFS中的block默认保存(3份). 3.(TaskTracker)程序通常与NameNode在一个节点启动. 分析:hadoop集群是基于 ...
- 【html、CSS、javascript-12】jquery-效果
一.jQuery 效果- 隐藏和显示 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(func ...
- Browsersync 浏览器自动刷新
Browsersync 是一个很好用的工具,它可以实时监测文件的变动然后自动刷新浏览器,不用每次去点刷新或F5,特别在调试样式时非常有用. browsersync中文网 http://www.bro ...
- JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值
jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...
- Git的基本了解与使用、向github提交代码
#Git的基本了解与使用.向github提交代码- git:是一个版本控制系统.- github:一个代码托管提供商.开源网站.是一个面向开源及私有软件项目的托管平台,因为支持Git作为唯一的版本库格 ...
- SPSS20.O---软件安装
统计要与大量的数据打交道,涉及繁杂的计算和图表绘制.现代的数据分析工作如果离开统计软件几乎是无法正常开展.在准确理解和掌握了各种统计方法原理之后,再来掌握几种统计分析软件的实际操作,是十分必要的. 常 ...
- C#基础之Async和Await 的异步编程
官方文档地址:https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide/concepts/async/ Coffee cup = ...
- Javaweb项目中出现java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represents more than one time zone.异常
javaweb项目中java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represent ...