js实现轮播图动画
在网页浏览中，可以看到轮播图是无处不在的，这是一个前端工程最基本的技巧。首先看看几个网页的呈现的效果。
QQ音乐：
网易云音乐：
天猫：
接下来将从简到难总结几种实现轮播图的方法。
1、样式一：鼠标滑入滑出实现图片切换
当鼠标滑入到小圆点上时，显示当前对应的图片，鼠标移出时回到默认的图片。如果点击了小圆点，显示当前的图片，移出时仍不改变显示。
html+css设置
<!-- 轮播图片 -->
<div class="slider">
<!-- 小圆点 -->
<div class="control">
<!-- 根据图片数量添加小圆点 -->
<ul> </ul>
</div>
<!-- 图片显示 -->
<div class="content">
<img src="./22.jpg" alt="" class="active" />
<img src="./66.jpg" alt="" />
<img src="./33.jpg" alt="" />
<img src="./44.jpg" alt="" />
<img src="./55.jpg" alt="" />
</div>
</div>
/*css样式*/
*{margin: 0;padding: 0;} .slider{
margin: 100px auto;
width: 640px;
height: 400px;
position: relative;
}
.slider .control{
position: absolute;
width: 640px;
height: 20px;
left: 0;
bottom: 30px;
}.slider .control ul{
list-style: none;
width: 150px;
margin: 0 auto;
}.slider .control li{
width: 20px;
height: 20px;
margin: 0 5px;
float: left;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.slider .control li.active{
background-color: red;
}/*默认设置不显示其他图片*/
.slider .content img{
width: 640px;
height: 400px;
display: none;
}
/*只显示第一张图片*/
.slider .content img.active{
display: block;
}
样式展示效果：
javascript设置
//定义一个改变图片函数
function changImage(i) {
var index = i;
var ul = document.getElementsByTagName("ul")[0];
//获取所有的images
var images = document.getElementsByTagName("img"); //数组
//获取所有的li
var lis = ul.getElementsByTagName("li");
for(var j = 0; j < lis.length; j++){
var li = lis[j];
var img = images[j];
//清除li 和 img 默认的active (img的active表示显示这个图片)
li.className = '';
img.className = '';
}
//设置当前的active属性 lis[index].className = 'active';
images[index].className = 'active';
} window.onload = function () {
//根据图片数改变小圆点数
//1获得图片数
var content = document.getElementsByClassName("content")[0];
var images = content.getElementsByTagName("img"); //数组 所有图片
//图片数
var imageCount = images.length;
//根据图片数创建小圆点数,添加到ul中
//遍历图片数
for(var i = 0; i < imageCount; i++){
//1创建小白点
var li = document.createElement("li")
li.index = i;
//3默认的第一个选中
if (i == 0) {
li.className += 'active';
}
//2添加到ul中
var control = document.getElementsByClassName("control")[0];
var ul = control.getElementsByTagName("ul")[0];
ul.appendChild(li)
var select = 0;
li.onclick = function(){
select = this.index;
changImage(this.index); li.onmousemove = function () {
changImage(this.index); li.onmouseout =function () {
changImage(select); //4设置ul宽度 保证居中
ul.style.width = (imageCount*30)+ 'px';
}
2、样式二：实现图片自动切换
展示时，图片在页面中自动切换。鼠标点击小圆点，直接切换显示当前图片。
html+css设置（基本和上面一样）
<body>
<div class="slider">
<div class="control">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="content" id="imag-list">
<ul >
<li><img src="data:images/1.jpg" alt="" /></li>
<li><img src="data:images/5.jpg" alt="" /></li>
<li><img src="data:images/4.jpg" alt="" /></li>
<li><img src="data:images/3.jpg" alt="" /></li>
<li><img src="data:images/2.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
*{padding: 0;margin: 0;}
.slider{
width: 800px;
height: 500px;
position: relative;
overflow: hidden;
margin: 30px auto;
}
.slider img{
width: 800px;
height: 500px;
}
.slider .content{
}
.slider .content ul{
width: 10000px;
list-style: none;
position: absolute;
left:0px;
}
.slider .content li{
float: left;
.slider .control{
position: absolute;
width: 100%;
z-index: 10;
bottom: 50px;
left: 0;
text-align: center;
}
.slider .control span{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 14px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
.slider .control span.current{
background-color: red;
}
JavaScript设置
//封装移动函数
function animate(element,target){
clearInterval(element.animateTimer);
var left = element.offsetLeft;
var step = (target - left) / 10;
element.animateTimer = setInterval(function(){
left += step;
element.style.left = left + 'px';
if(Math.abs(target - left) <= Math.abs(step)){
clearInterval(element.animateTimer);
element.style.left = target + 'px';
}
},100);
}
window.onload =function(){
var ul = document.getElementsByTagName('ul')[0];
var spanArr = document.getElementsByTagName('span');
//4.最后一张显示后，克隆第一张图片继续显示第一张
ul.appendChild(ul.children[0].cloneNode(true));
var ulLeft = ul.offsetLeft;
console.log(ulLeft);
var ulIndex = 0; //默认第一张图片下标
// console.log(ulLeft);
//开启
var autoPlayTimer = setInterval(function(){
//4.2 从最后一张滚回到第一张(ulIndex == 5)之后 需重置回第一张状态
if(ulIndex == 5){
ulIndex = 0;
ul.style.left = '0';
ulLeft = 0;
}
ulLeft -= 800;
// console.log(ulLeft);
animate(ul, ulLeft);
ulIndex++;
for(var i = 0; i< spanArr.length; i++){
spanArr[i].className = '';
}
//4.3改变页面 第五张图片结束后ulIndex是4
//第六张图片即第一张图片的ulIndex是5 所以求ulIndex % 5恢复ulIndex为0
spanArr[ulIndex % 5].className = 'current';
},3000);
//第二大步 给小圆点span添加点击事件
for(var i = 0; i< spanArr.length; i++){
var span = spanArr[i];
span.index = i;
span.onclick = function(){
//实现点击span后图片移动
var targetLeft = -800 * this.index; //0 - 4
//点击后自动滚动到 当前圆点对应的图片的位置 即左移800*下标
animate(ul, targetLeft);
//记录此时的ulLeft ulIndex 为了继续从当前点击图片向下一张图片移动
ulLeft = targetLeft;
ulIndex = this.index;
//切换当前span选中样式
for(var j = 0; j<spanArr.length; j++){
spanArr[j].className = '';
}
this.className = 'current';
}
}
}
3、样式三：实现带有箭头的录播图
展示时，图片在页面中自动切换，横条随之选中。点击左箭头，图片向左滑动；点击右箭头，图片向右滑动。 鼠标点击小圆点，直接切换显示当前图片。鼠标放入图片中，停止图片滑动，移开时继续滑动。
html+css设置
<body>
<div class="box">
<div class="content">
<div><img src="img/1.jpg" alt="" /></div>
<div><img src="img/2.jpg" alt="" /></div>
<div><img src="img/3.jpg" alt="" /></div>
<div><img src="img/4.jpg" alt="" /></div>
<div><img src="img/5.jpg" alt="" /></div>
<div><img src="img/6.jpg" alt="" /></div>
<div><img src="img/7.jpg" alt="" /></div>
</div>
<div class="control">
<!-- <span class="control-bar current"></span> -->
<!-- <span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span>
<span class="control-bar"></span> -->
</div> <span id="pre"></span>
<span id="next"></span>
</div>
</body>
*{margin: 0;padding: 0;}
.box{
width: 310px;
height: 250px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.content{
width: 310px;
height: 220px;
overflow: hidden;
position: relative;
}
.content div{
position: absolute;
top: 0;
left: 0;
}
.content div img{
width: 310px;
height: 220px;
}
.control{
width: 310px;
height: 30px;
background-color: #333;
text-align: center;
}
.control-bar{
display: inline-block;
width: 24px;
height: 5px;
background: url(img/icon.png) no-repeat -24px -790px ;
margin: 12px 2px 0 2px;
cursor: pointer;
}
.control .control-bar:hover{
background: url('img/icon.png') no-repeat -24px -770px;
}
.control .control-bar.current{
background: url('img/icon.png') no-repeat 0 -770px;
}
#pre, #next{
position: absolute;
top: 50%;
margin-top: -35px;
width: 20px;
height: 34px;
background-color: pink;
cursor: pointer;
}
#pre{
left: 3px;
background:url(img/icon.png) no-repeat 0 0;
}
#next{
right: 3px;
background:url(img/icon.png) no-repeat -9px -45px;
}
样式效果如图：
javascript设置
思路：box设置overflow:hidden属性，第一张图片显示在box中，其余图片均隐藏放置在第一张图的右边。当开启动画时，第一张图片向左移动隐藏，下一张图片向左移动显示，依次类推，当显示完最后一张时，继续回到显示第一张图片。
// 前面内容已讲过
// 封装好的获取属性函数
function getStyle(element, styleName){
if(element.currentStyle){
return element.currentStyle[styleName];
}else{
var computedStyle = window.getComputedStyle(element, null);
return computedStyle[styleName];
}
}
//封装好的动画函数
function animate(element,json){
clearInterval(element.timer);
var isStop = false;
element.timer = setInterval(function(){
isStop = true;
for(var key in json){
var current = parseInt(getStyle(element, key));
var target = json[key];
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
if(Math.abs(target -current) > Math.abs(step)){
isStop = false;
}else{
current = target;
}
element.style[key] = current + 'px';
}
if(isStop){
clearInterval(element.timer);
}
},30);
} //实现轮播图
window.onload = function(){
var box = document.getElementsByClassName('box')[0];
var contentBox = document.getElementsByClassName('content')[0];
var controlBox = document.getElementsByClassName('control')[0];
var imageDivArr = contentBox.getElementsByTagName('div'); var currentIndex = 0;
var boxWidth = box.offsetWidth;
//1.动态创建横条
for(var i= 0; i < imageDivArr.length; i++){
var span = document.createElement('span');
if(i == 0){
span.className = 'control-bar current';
}else{
span.className = 'control-bar';
}
span.index = i;
controlBox.appendChild(span); //6.设置span点击事件
span.onclick = function(){
//如果当前点击的按钮,就是当前的按钮则不作操作
if(currentIndex != this.index){ //点击的图片，在当前图片的右边
if(this.index > currentIndex){
//当前的图片向左移 移除当前位置
animate(imageDivArr[currentIndex],{left:-boxWidth}); //此时被点击对应的图片放在显示框右边 再进行向左移
currentIndex = this.index;
imageDivArr[currentIndex].style.left = boxWidth; }else{ //点击的图片，在当前图片的右边
animate(imageDivArr[currentIndex],{left:boxWidth}); currentIndex = this.index;
imageDivArr[currentIndex].style.left = boxWidth;
} //
animate(imageDivArr[currentIndex], {left : 0})
//刷新控制条
refresh();
}
}
} //2.放置图片位置
// var boxWidth = box.offsetWidth;
for(var i= 0; i < imageDivArr.length; i++){
var imgDiv = imageDivArr[i];
imgDiv.style.left = boxWidth + 'px';
}
imageDivArr[0].style.left = '0'; //3.从左边划入
// var currentIndex = 0;
function nextImage(){
animate(imageDivArr[currentIndex],{left:-boxWidth}); currentIndex++; if(currentIndex >= imageDivArr.length){
currentIndex = 0;
}
imageDivArr[currentIndex].style.left = boxWidth + 'px'; animate(imageDivArr[currentIndex],{left:0});
refresh();
} //3.1从右边划入
function prevImage(){
animate(imageDivArr[currentIndex],{left:boxWidth}); //最后一张currentIndex = 6 currentIndex--; if(currentIndex < 0){
currentIndex = imageDivArr.length - 1; //返回到最后一张
}
imageDivArr[currentIndex].style.left = (-boxWidth) + 'px'; animate(imageDivArr[currentIndex],{left:0});
refresh();
} //4.刷新横条显示
function refresh(){
for(var i = 0; i < controlBox.children.length; i++ ){
// console.log(controlBox.children[i]);
var bar = controlBox.children[i];
bar.className = 'control-bar'
// console.log(bar);
}
controlBox.children[currentIndex].className = 'control-bar current';
} //点击箭头切换
document.getElementById('next').onclick = nextImage;
document.getElementById('pre').onclick = prevImage; //自动播放
var timer = setInterval(nextImage,2000); box.onmouseover = function (){
clearInterval(timer);
}
//移出时，重新开始定时器
box.onmouseout = function (){
timer = setInterval(nextImage ,2000);
}
}
4、“旋转木马”轮播图
html+css样式设置
<body>
<div class="box"> <!-- 图片设置 -->
<div class="content">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!-- 左右箭头设置 -->
<div class="control">
<a href="javascript:;" id="prev"></a>
<a href="javascript:;" id="next"></a>
</div>
</div>
</body>
*{margin: 0;padding: 0;}
ul{list-style: none;}
/*大盒子*/
.box{
width: 1000px;
margin: 5px auto;
position: relative;
background-color: pink;
}
/*左右箭头*/
#next, #prev{
position: absolute;
width: 76px;
height: 112px;
top: 0;
background: url(../images/next_1.png) no-repeat 0 0;
z-index: 5;
}
#next{
right: 10px;
}
#prev{
left: 10px;
background: url(../images/prev_1.png) no-repeat 0 0;
}
.box .content li{
position: absolute;
}
.box .content li img{
width: 100%;
}
/*可以通过css设置定位
.box .content li.li1{
width: 300px;
opacity: 0.4;
top: 30px;
left: 50px;
z-index: 1;
}
.box .content li.li2{
width: 400px;
opacity: 0.7;
top: 100px;
left: 0;
z-index: 2;
}
.box .content .li3{
width: 600px;
opacity: 1;
top: 200px;
left: 200px;
z-index: 3;
}
.box .content .li4{
width: 400px;
opacity: 0.7;
right: 0;
top: 100px;
z-index: 2;
}
.box .content .li5{
width: 300px;
opacity: 0.4;
top: 30px;
right: 50px;
z-index: 1;
}
*/
javascript设置
window.onload =function () {
//定位置 五个位置对应五个json对象,放入数组中,可以灵活的获取这些json对象
var json = [{
width: 300,
opacity: 0.4,
top: 30,
left: 50,
zIndex: 1
},{
width: 400,
opacity: 0.7,
top: 100,
left: 20,
zIndex: 2
},{
width: 700,
opacity: 1,
top: 200,
left: 150,
zIndex: 3
},{
width: 400,
opacity: 0.7,
top: 100,
left: 580,
zIndex: 2
},{
width: 300,
opacity: 0.4,
top: 30,
left: 650,
zIndex: 1
}];
refreshImageLocation(0);
function refreshImageLocation(index){
//默认情况下 第i个对应i-index个位置
var liArr = $('li');
console.log(liArr);
for(var i = 0; i < liArr.length; i++){
var li = liArr[i];
var locationIndex = i - index;
if(locationIndex < 0){
locationIndex += 5;
}
var locationDate = json[locationIndex];
console.log(locationDate);
animate(li, locationDate, null);
}
}
var index = 0;
//设置点击箭头事件
$('#next').onclick = function(){
// console.log('#next');
index++;
if(index == 5){
index = 0;
}
refreshImageLocation(index);
}
$('#prev').onclick = function(){
index--;
if(index < 0){
index = 4;
}
refreshImageLocation(index);
}
}
js实现轮播图动画的更多相关文章
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
随机推荐
- 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...
- Android开发随手记
本文是作者在Android开发实践中的随手速记,记录一些小问题的解决方案和注意事项,持续更新. 以下是速记内容,若有不严谨的地方,望小伙伴们指出. 1.Module 不生成R文件,可尝试取消对该Mod ...
- Google调试工具
f11 逐语句,到过程里,f10逐过程,跳到下一个off,f8调到下一个断点执行.
- Unity3D拖尾组件在Ui界面下正常显示
在项目中Canvas下UI添加拖尾效果,会发现Ui完全遮挡住了拖尾. 如果要正常显示通常需要对Canvas进行设置,Render Mode 我这里用的是-Camera模式 其次要对Material 下 ...
- STL—对象的构造与析构
STL内存空间的配置/释放与对象内容的构造/析构,是分开进行的. 对象的构造.析构 对象的构造由construct函数完成,该函数内部调用定位new运算符,在指定的内存位置构造对象 ...
- 关于Verilog HDL的一些技巧、易错、易忘点（不定期更新）
本文记录一些关于Verilog HDL的一些技巧.易错.易忘点等(主要是语法上),一方面是方便自己忘记语法时进行查阅翻看,另一方面是分享给大家,如果有错的话,希望大家能够评论指出. 关键词: ·技巧篇 ...
- Javascript百学不厌-递归
虽然偶尔也用过,但是从来没具体来整理过 普通递归: function fac(n) { ) ; ); } fac() 这是个阶乘.但是占用内存,因为: fac(5) (5*fac(4)) (5*(4* ...
- PHP超全局变量$_SERVER
$_SERVER 是一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组.这个数组中的项目由 Web 服务器创建.不能保证每个服务器都 ...
- 用Node.JS+MongoDB搭建个人博客（成品展示）
在博客里可以随意畅写和分享自己喜欢的技术,和网友分享知识也是一种提升.根据自己所发表的博客也能更加加深印象. 与此同时写博客也可以提高自己的写作能力(虽然不咋地),但我相信博客只会越写越有质量的. 博 ...
- Java设计模式之适配器模式(项目升级案例)
今天是我学习Java设计模式中的第三个设计模式了,但是天气又开始变得狂热起来,对于我这个凉爽惯了的青藏人来说,又是非常闹心的一件事儿,好了不管怎么样,目标还是目标(争取把23种Java设计模式接触一遍 ...