html代碼

<div id="box"><ul id="ul"><li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic5.jpg" alt=""/></a></li></ul><ol id="ol"><li><a href="javascript:void(0)"><img src="images/slidepic1.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic2.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic3.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="images/slidepic4.jpg" alt=""/></a></li><li><a href="javascript:void(0)"><img src="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实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。