旋转木马图片效果图，轮播图

老规矩先上一张示例图：

HTML代码：

<div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li><a href="#"><img src="data:images/slidepic1.jpg" alt=""/></a></li><li><a href="#"><img src="data:images/slidepic3.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>

CSS代码：

/*初始化  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);
}

一些定义：

//获取ID
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"){//判断属性是不是opacityvar current= getAttrValue(element,attr)*100;//每次移动多少步var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改var step=(target-current)/10;//(目标-当前)/10step=step>0?Math.ceil(step):Math.floor(step);current=current+step;element.style[attr]=current/100;}else if(attr=="zIndex"){//判断属性是不是zIndexelement.style[attr]=json[attr];}else{//普通的属性//获取当前的位置----getAttrValue(element,attr)获取的是字符串类型var current= parseInt(getAttrValue(element,attr))||0;//每次移动多少步var target=json[attr];//直接赋值给一个变量,后面的代码都不用改var step=(target-current)/10;//(目标-当前)/10step=step>0?Math.ceil(step):Math.floor(step);current=current+step;element.style[attr]=current+"px";}if(current!=target){flag=false;//如果没到目标结果就为false}}if(flag){//结果为trueclearInterval(element.timeId);if(fn){//如果用户传入了回调的函数fn(); //就直接的调用,}}},10);
}

Arr Config

这里主要在于定义五张图的样式效果
定义五张图的层级，透明度，大小，位置，从而达到平铺呈现的样式
通过对象进行json格式封装，组成数组，不同的数组下标代表着不同的样式
到时候我们会遍历这个数组

  //配置数组对象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];

<script>//页面加载的事件window.onload=function () {//1---散开图片//获取所有的livar flag=true;//----假设所有的效果都执行完毕了var list=my$("slide") .getElementsByTagName("li");function assign(){for (var i=0;i<list.length;i++){//设置每个li的位置，透明度，left，topanimate(list[i],config[i],function () {//插入回调函数，待上一次动画走完之后，让flag的值重新变为trueflag=true;})}};assign();//右边按钮my$("arrRight").onclick=function(){if (flag){flag=false;//删除数组中第一个元素，把这个元素追加到最后config.push(config.shift());assign();//重新分配}};//左边按钮//删除最后一个元素，吧这个元素追加到开头my$("arrLeft").onclick=function(){if (flag){flag=false;config.unshift(config.pop());assign();//重新分配}};//鼠标进入，左右焦点显示my$("slide").onmouseover=function () {//调用一个动画渐渐的效果animate(my$("arrow"),{"opacity":1})};//鼠标离开,左右焦点隐藏my$("slide").onmouseout=function () {//调用一个动画渐渐的效果animate(my$("arrow"),{"opacity":0})};};</script>

逻辑

给左右2个角标注册，鼠标进入/退出事件，分别注册渐渐动画透明度的显示和隐藏
这个实现效果是通过左右2个小角标的点击事件（onclick）来触发数组的删除和追加
即：config.push(config.shift());
- config.unshift(config.pop());
在删除追加以后我们需要重新分配一下config 就是我前面定义的assign 这个方法
flag这个变量的值用Boolean类型来控制动画的执行次数，在上一次动画未执行完毕是不会执行下一次的动画的，这样就防止动画加快，和混乱变小
我们在开始flag=为true ；假设所有效果都执行完毕将要开始下一次效果，在执行完一次动画animate之后吧flag赋值为false；最后在callback 回调函数重新吧flag赋值为true；

旋转木马图片效果图，轮播图相关推荐

Vue 实现商品详情多播图(点击图片列表轮播图)
Vue 实现商品详情多播图(点击轮播图) 之前弄商城项目有要到这种效果的商品展示图(商品图片轮播),找了很久没找到,就自己写了一个. 实现效果: 点击左右按钮图片左右移动点击小图片图片展示到大图图 ...
java照片切换播放音乐_音乐播放器-图片切换-轮播图效果
* { margin: 0; padding: 0; border: 0; } CSS3 @keyframes 动画效果 @keyframs myframes{ from{ } to{ transfo ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
制作一个含文字和图片的轮播图
非原生JS制作轮播图有一定的参考价值,但是不能保证不出错,还请大佬门自己多多尝试实现3个功能: 1.自动轮播 2.鼠标放上去停止轮播 3.鼠标放在小圆点上实现轮播原理一个盒子(div)放置图片 ...
jq4 实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）...
1.磁力图片: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
解决bootstrap轮播图因为图片尺寸造成的问题
发现问题在使用bootstrap做轮播图时,由于图片尺寸,使得图片与轮播图结合的效果很差解决方案我们先找到轮播图的相关代码,如下: <div id="carousel ...
banner 获取当前指示物_Android轮播图图片的本地保存及读取
一.轮播图控件及图片加载对于Android端的轮播图控件,我这边选用的是banner库 //轮播图 compile 'com.youth.banner:banner:1.4.9' //Glide c ...
【Android】轮播图图片的本地保存及读取
#一.轮播图控件及图片加载对于Android端的轮播图控件,我这边选用的是banner库 //轮播图 compile 'com.youth.banner:banner:1.4.9' //Glide ...
swiper怎么在HTML引入JS文件,Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.超好用话不多说,直接上教程 1.首先加载插件,需要用到 ...

旋转木马图片效果图，轮播图

旋转木马图片效果图，轮播图

HTML代码：

CSS代码：

一些定义：

Arr Config

逻辑

旋转木马图片效果图，轮播图相关推荐

最新文章

热门文章