透明轮播原生JavaScript实现

html代码

<div id="box"><ul id="ul"><li><a href="javascript:void(0)"><img src="data:images/slidepic1.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic2.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic3.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic4.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic5.jpg" alt=""/></a></li></ul><ol id="ol"><li><a href="javascript:void(0)"><img src="data:images/slidepic1.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic2.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic3.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic4.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="data:images/slidepic5.jpg" alt=""/></a></li></ol>
</div>

css代码

 * {margin: 0;padding: 0;}#box {height: 500px;width: 800px;border: 1px solid #c0c0c0;position: absolute;margin: 100px auto;left: 100px;}ul {list-style: none;height: 100%;width: 100%;}ul > li {height: 100%;width: 100%;position: absolute;font-size: 30px;text-align: center;}ol {list-style: none;width: 100%;margin-top: 5px;}ol > li {height: 100px;width: 146px;margin-left: 8px;float: left;text-align: center;border: 1px solid #999999;}ol > li img {height: 100px;width: 146px;float: left;}

JS代码

动画封装

 function getStyle(ele, attr){if(ele.currentStyle){return ele.currentStyle[attr];}//一会回头再看看 null应该如何使用?return window.getComputedStyle(ele, null)[attr]}function animate(obj, json, callback) {//1.情况定时器clearInterval(obj.timer);//2.创建定时器obj.timer = setInterval(function () {// 新的位置=当前的位置+步长var flag = true;// 默认认为所有的 值 都完成了动画for (var key in json) {var target = 0;//目标位置var current = 0;//当前位置if (key.toLowerCase() == "opacity") {target = Math.round(json[key] * 100);current = Math.round(getStyle(obj, key) * 100)} else if (key != "zIndex") {// height,width,left toptarget = parseInt(json[key]);current = parseInt(getStyle(obj, key));}//步长if (key != "zIndex") {//说明 不参与  zIndex 变化var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);}// 新的位置=当前的位置+步长if (key.toLowerCase() == "opacity") {obj.style.opacity = (current + step) / 100;} else if (key != "zIndex") {obj.style[key] = current + step + "px";// height,width,left top}if (key == "zIndex") {// 如果key== zIndex 直接给 对象赋值obj.style.zIndex = Number(json[key]);}//关注哪些属性的动画还没完成if (current != target) {flag = false;}}//如果for里面都没有任何属性需要改变 flag的状态,说明动画都完成了if (flag) {clearInterval(obj.timer);//动画完成后,通知或者做其他操作//此处说明 callback就是一个函数if (typeof(callback) == "function") {callback(obj);//执行callback函数}}}, 30)}

 var ul = document.getElementById('ul');var ol = document.getElementById('ol');var lis = ul.children;var olls = ol.children;var timer = setInterval(autoPlay, 1500);var index = 0;function autoPlay() {index++; //if (index >= 5) {index = 0}for (var i = 0; i < lis.length; i++) {if (i == index) {animate(lis[index], {"opacity": 1});animate(olls[index], {"opacity": 1})} else {animate(lis[i], {"opacity": 0});animate(olls[i], {"opacity": 0.1})}}for (var i = 0; i < olls.length; i++) {olls[i].index = i;olls[i].onmouseenter = function () {index = this.index;index--;clearInterval(timer);autoPlay();};olls[i].onmouseleave = function () {index = this.index;index;timer = setInterval(autoPlay, 1500);}}ul.onmouseenter = function () {clearInterval(timer);};ul.onmouseleave = function () {timer = setInterval(autoPlay, 1500);}}

透明轮播原生JavaScript实现相关推荐

html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
图片轮播器——javascript
在网页中,图片轮播器用得比较多. 效果图: <!DOCTYPE html> <html><head><meta http-equiv="Conten ...
html图片轮播replace,JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下无标题文档 .img-div img{display:none;} 1 2 3 4 5 var zBase= { $id:function(id){r ...
html图片重叠轮播,原生JS实现层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: wtf < > CSS: .box {width: 1200px; height: 300px; transform-style: perse ...
html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
html图片自动左右轮播,原生JS实现图片左右轮播
本效果使用js实现,当图片移动到200像素后回到0像素再向右移动200像素一直左右移动,不需要marquee标签. 完整的HTML代码如下,保存到HTML文档打开可以查看效果: JS使图片左右移动_何 ...
javaScript小案例------js实现无缝轮播图效果篇
原生js书写无缝轮播图 javaScript无缝轮播图思路及源码无缝轮播图效果总体思路下面附上代码: html css animate.js index.js javaScript无缝轮播图思路 ...
HTML 简易、易懂版轮播图有图有真相 JavaScript实现
HTML 简易.易懂版轮播图 JavaScript实现

透明轮播原生JavaScript实现

透明轮播原生JavaScript实现相关推荐

最新文章

热门文章