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. ...
随机推荐
- GULP入门之API（二）
GULP的API gulp.src(globs[, options]) 输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件. 将返回一个 Vin ...
- Luogu P2679 子串(字符串+dp)
P2679 子串 题意 题目描述 有两个仅包含小写英文字母的字符串\(A\)和\(B\). 现在要从字符串\(A\)中取出\(k\)个互不重叠的非空子串,然后把这\(k\)个子串按照其在字符串\(A\ ...
- 【python之路43】tornado的用法（一）
一.tonado的代码 1.返回字符串 #!/usr/bin/env python # -*- coding:utf-8 -*- import tornado.ioloop import tornad ...
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- Java方法传参的问题
1.基本数据类型(byte,short,int,long,float,double,boolean,char)的值传递,不改变其值 2.引用数据类型的值传递,改变其值 3.String类型虽然是引用数 ...
- IO流8 --- 使用FileReader和FileWriter实现文本文件的复制 --- 技术搬运工（尚硅谷）
@Test public void test4(){ FileReader fr = null; FileWriter fw = null; try { fr = new FileReader(&qu ...
- 【洛谷P2907】 【USACO08OPEN】农场周围的道路 水模拟分治
P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm 题目描述 Farmer John's cows have taken an interest in ex ...
- TSQL：让监控分析更简单更高效
1. 前言 阿里时序时空数据库TSDB最新推出TSQL,支持标准SQL的语法和函数.用户使用熟悉的SQL,不仅仅查询更简单易用,用户还可以利用SQL强大的功能,实现更加复杂的计算分析. 2. 为什么需 ...
- Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程
Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...
- 微信小程序制作下来菜单
wxml: <view class="phone_one" bindtap="clickPerson"> <view class=" ...