JS实现旋转木马轮播案例
本文实例为大家分享了JS实现旋转木马轮播的具体代码，供大家参考，具体内容如下
效果：
每张图片排列的位置是以中间为对称的。图片大小，透明度不相同，但对称的图片的样式是相同的，呈现出一种立体的轮播效果。
轮播动态效果图：
先看看代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:void(0);" class="prev" id="arrLeft"></a>
<a href="javascript:void(0);" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
<script>
//定义一个数组 使用绝对定位来设置五个li的位置
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}
];
//页面加载的事件
window.onload = function () {
var flag = true;//假设所有的动画执行完毕了
//图片散开
var list = my$("slide").getElementsByTagName("li");
function assgin() {
for (var i=0;i<list.length;i++) {
//设置每个li，都要把宽 层级 透明度 left top到达指定的目标位置
animate(list[i],config[i],function () {
flag = true;
});
}
}
assgin();
//给按钮设置点击事件
//右边按钮 图片顺时针旋转 数组的第一个元素放在最末尾
/*
pop() 删除最后面的元素
push() 在末尾添加元素
shift() 删除最前面的元素
unshift() 将元素添加到数组的最前面
*/
my$("arrRight").onclick = function(){
if (flag){
flag = false;
config.push(config.shift());
assgin();//重新分配
}
};
//左边按钮 图片逆时针旋转 数组的最后一个元素放在开始的位置
my$("arrLeft").onclick = function(){
if (flag){
flag = false;
config.unshift(config.pop());
assgin();//重新分配
}
};
//鼠标进入 左右焦点的div显示
my$("wrap").onmouseover = function () {
animate(my$("arrow"),{"opacity":1});
};
//鼠标离开 左右焦点的div隐藏
my$("wrap").onmouseout = function () {
animate(my$("arrow"),{"opacity":0});
};
};
//根据id获取元素
function my$(id) {
return document.getElementById(id);
}
//获取任意一个元素的任意一个样式属性的值
function getAttrValue(element,attr) {
return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0;
}
//动画
function animate(element,json,fn) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//假设都达到了目标
for(var attr in json){
if(attr=="opacity"){//判断属性是不是opacity
var current= getAttrValue(element,attr)*100;
//每次移动多少步
var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
current=current+step;
element.style[attr]=current/100;
}else if(attr=="zIndex"){//判断属性是不是zIndex
element.style[attr]=json[attr];
}else{//普通的属性
//获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
var current= parseInt(getAttrValue(element,attr))||0;
//每次移动多少步
var target=json[attr];//直接赋值给一个变量,后面的代码都不用改
var step=(target-current)/10;//(目标-当前)/10
step=step>0?Math.ceil(step):Math.floor(step);
current=current+step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;//如果没到目标结果就为false
}
}
if(flag){//结果为true
clearInterval(element.timeId);
if(fn){//如果用户传入了回调的函数
fn(); //就直接的调用,
}
}
console.log("target:"+target+"current:"+current+"step:"+step);
},10);
}
</script>
</html>
css.css样式：
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS实现旋转木马式图片轮播效果
本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下 主要html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href=
-
js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 整个页面的文件结构如下图所示: html部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="
-
原生js实现旋转木马效果
本文实例为大家分享了js实现旋转木马效果的具体代码,供大家参考,具体内容如下 html部分 <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href=""><img src="images/
-
原生JS实现旋转木马式图片轮播插件
本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看
-
JavaScript实现旋转木马轮播图
本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 html代码段 图片自己添加,或者使用本人的上传照片,拉到最下面即可看见 <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#" ><img
-
原生js实现旋转木马轮播图效果
话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;mar
-
js轮播图之旋转木马效果
本文实例为大家分享了js轮播图之旋转木马效果的具体代码,供大家参考,具体内容如下 思路:给定一个数组,储存每张图片的位置,旋转将位置进行替换 左旋转:将数组第一个数据删除,然后添加到数组的最后 右旋转:将数组最后一个数据删除,然后添加到数组的开头 先附上效果图,再来实现 接下来就是最主要的,封装原生js动画函数 //封装函数获取任意一个元素的任意属性的值(兼容ie8) function getStyle(element, attr) { return window.getComputedStyl
-
JS实现旋转木马轮播图
本文实例为大家分享了JS实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 知识点 1.旋转木马思想: 1).固定五种图片的位置信息jsonArr进行布局 2).点击<或者>会对jsonArr进行重新排序,重新排序后对界面重新进行布局 2.数据驱动界面,数据的改变会影响界面 3.数组的四种操作 ① push:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. ② pop:pop() 方法用于删除并返回数组的最后一个元素. ③ shift:shift() 方法用于把数组的第
-
js实现旋转木马效果
效果图: 代码如下: <html class=" js csstransforms3d" lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport"
-
JS实现旋转木马轮播案例
本文实例为大家分享了JS实现旋转木马轮播的具体代码,供大家参考,具体内容如下 效果: 每张图片排列的位置是以中间为对称的.图片大小,透明度不相同,但对称的图片的样式是相同的,呈现出一种立体的轮播效果. 轮播动态效果图: 先看看代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title&
-
BootStrap的JS插件之轮播效果案例详解
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class
-
原生js实现图片轮播特效
本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
-
js实现图片轮播效果
本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati
-
使用JS实现图片轮播的实例(前后首尾相接)
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(再次表示感谢),但是没有首尾相接的功能,本人在此基础上增加了首尾相接功能. 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
-
js实现图片轮播效果学习笔记
本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉. 2.根据传递过