原生js 实现旋转木马
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
<script src="common.js"></script> </head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="data:images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
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(); //就直接的调用,
}
}
},10);
}
</script>
<script>
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4 ];
var flag = true;//假设所有的动画执行完毕了---锁
var list = my$("slide").getElementsByTagName("li"); //1---图片散开
function assign() {
for (var i = 0; i < list.length; i++) {
//设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置
animate(list[i], config[i], function () {
flag = true;
});
}
} assign();
//右边按钮
my$("arrRight").onclick = function () {
if (flag) {
flag = false;
config.unshift(config.pop());
assign();
} };
//左边按钮
my$("arrLeft").onclick = function () {
if (flag) {
flag = false;
config.push(config.shift());
assign();//重新分配
}
};
//鼠标进入,左右焦点的div显示
my$("slide").onmouseover = function () {
animate(my$("arrow"), {"opacity": 1});
};
//鼠标离开,左右焦点的div隐藏
my$("slide").onmouseout = function () {
animate(my$("arrow"), {"opacity": 0});
};
</script>
</body>
</html>
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:;padding:}
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:;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;
}a
.slide li{
position: absolute;
left:200px;
top:;
}
.slide li img{
width:100%;
}
.arrow{
opacity:;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index:;
}
.next{
right:;
background-image: url(../images/next.png);
}
原生js 实现旋转木马的更多相关文章
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- linux系统文件的安全与特殊权限
一. 文件与目录的原始属性 由于不希望文件具有可执行的原始权限,默认情况下,文件是没有可执行(x)权限的,因此文件的原始属性是:-rw-rw-rw(0666) 目录的原始属性全部开放,为:-rwxrw ...
- 3-为什么很多 对 1e9+7(100000007)取模
首先有很多题目的答案是很大的,然而出题人的本意也不是让选手写高精度或者Java,所以势必要让答案落在整型的范围内.那么怎么做到这一点呢,对一个很大的质数取模即可(自行思考为什么不是小数).那么如果您学 ...
- 浅谈Java中set.map.List的区别
就学习经验,浅谈Java中的Set,List,Map的区别,对JAVA的集合的理解是想对于数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操 ...
- C++获取字符串长度数
strlen,获取到的是字节数,中文占两个字节. 如何获取字符数,无论中文英文,标点符号,都按一个字符计算呢?这里提供其中的一个方法.那就是通过MultiByteToWideChar函数,将CStri ...
- xml与java代码相互装换的工具类
这是一个java操作xml文件的工具类,最大的亮点在于能够通过工具类直接生成xml同样层次结构的java代码,也就是说,只要你定义好了xml的模板,就能一键生成java代码.省下了自己再使用工具类写代 ...
- u盘安装Linux系统详细教程
2012-05-06 02:30:44 分类: LINUX 想不想体验一下Linux下呢?刻盘太浪费钱,而U盘却可以多次利用.本文就是要介绍如何通过U盘安装Linux系统的.只要用Universal- ...
- elasticsearch-jdbc 使用
elasticsearch-jdbc是一个将关系型数据库(RDBMS)数据导入到ElasticSearch库中的一个工具包,支持mysql.oracle.postgrey.csv等存储列式数据的容器. ...
- 设计模式19：Chain Of Responsibility 职责链模式（行为型模式）
Chain Of Responsibility 职责链模式(行为型模式) 请求的发送者与接受者 某些对象请求的接受者可能有多种多样,变化无常…… 动机(Motivation) 在软件构建过程中,一个请 ...
- 编写高质量代码改善C#程序的157个建议——建议145：避免过长的方法和过长的类
建议145:避免过长的方法和过长的类 如果违反“一个方法只做一件事”及类型的“单一职责原则”,往往会产生过长的方法和过长的类. 如果方法过长,意味着可以站在更高的层次上重构出若干更小的方法.以行数作为 ...
- Mysql的备份，权限与日志
1>Mysql的数据备份 mysqldump 工具 --single-transaction 该选项导出数据之前提交一个BEGIN SQL语句,不会阻塞任何应该程序而且能保证导出数据时的一 ...