html代碼

<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:;" class="prev"></a><a href="javascript:;" class="next"></a></div></div> </div>

css代碼

ol, ul {list-style: none }.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代碼

動畫封裝

function animate(obj, json, fn) {// 第一參數 動的對象 2 attr 動的那個屬性 3 屬性值少多少clearInterval(obj.timer);obj.timer = setInterval(function () {var flag = true; // 用來判斷是否停止定時器 定時器的里面// 每隔 30 毫秒就要運行一次for (var k in json) { // k 屬性 json[k] 是屬性值// 第一 k 是 width// 第二 k height// leader = 600 - 100// leader = leader + (target - leader ) /10 ;// 計算步長// target 目標位置 leader 不清楚，我們不知道用戶改那個屬性// 檢測用戶給我們了什么屬性， 我們就用這個屬性的值 來計算// 我們怎么知道用戶給我們屬性，我們怎么又能得到屬性的值呢？// var leader = obj.style[attr]; 他只能得到行內式var leader = 0;// 因為透明度是 小數 取值 0~1 之間 第二個 它沒有單位if (k == "opacity") {// 先解決小數的問題leader = Math.round(getStyle(obj, k) * 100) || 100;// 如果沒有opacity 默認當 1 看 1* 100 = 100// 我們去過來的是 0.3 但是小數不好計算 我們乘以100 30 好計算}else {leader = parseInt(getStyle(obj, k)) || 0;// 他本身有單位 所以要去掉 默認的默認是 0}//去掉px 的方法 parseInt(25px) 25/* alert(leader);*/var step = (json[k] - leader) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;if (k == "opacity") { // 記住我們的透明是不加單位的 不要加pxobj.style.opacity = leader / 100; // opacity: 0.4; // filter: alpha(opacity = 40); /*不能改只能是 40 不能是 0.4*/obj.style.filter = "alpha(opacity = " + leader + ")";}// 設置層級else if (k == "zIndex") {obj.style.zIndex = json[k]; // 直接給值}else {obj.style[k] = leader + "px"; // 其他的要單位}if (leader != json[k]) { // 只要三個屬性有一個沒有到達，我就取反// 這句話要寫到 for in 里面 因為有三個屬性，所以用 for in 才能遍歷// 三個都到了 都不執行這句話了flag = false;}}// console.log(flag);if (flag) {clearInterval(obj.timer);if (fn) { // 如果有函數傳遞過來 ， 定時器結束了，說明動畫結束 可以執行 回調函數fn(); // 執行函數 fn + ();}}}, 30) }function getStyle(obj, attr) {if (obj.currentStyle) {// 如果支持，返回改屬性值// return obj.style.left 只能得到行內式的// return obj.currentStyle["left"]; // 正確的寫法，但是left 是傳進來的return obj.currentStyle[attr];}else {return window.getComputedStyle(obj, null)[attr];} } window.onload = function () {var arrow = document.getElementById("arrow"); // 三角var wrap = document.getElementById("wrap"); // 大盒子var slide = document.getElementById("slide");var lis = slide.children[0].children; // 獲得所有的livar timer = null;var json = [ // 包含了5張圖片里面所有的樣式{ // 1width: 400,top: 20,left: 50,opacity: 20,z: 2},{ // 2width: 600,top: 70,left: 0,opacity: 80,z: 3},{ // 3width: 800,top: 100,left: 200,opacity: 100,z: 4},{ // 4width: 600,top: 70,left: 600,opacity: 80,z: 3},{ //5width: 400,top: 20,left: 750,opacity: 20,z: 2}];wrap.onmouseover = function () { // 鼠標經過顯示 三角animate(arrow, {opacity: 100});}wrap.onmouseout = function () { // 鼠標離開 隱藏三角animate(arrow, {opacity: 0});}move(); // 頁面執行也調用一次// 兩個按鈕var flag = true; // 用于函數節流var as = arrow.children; // 2 個 afor (var k in as) {as[k].onclick = function () {// 當俺們點擊的時候， 只做一件事情 ---- 交換jsonif (this.className == "prev") { // 左側按鈕// alert(11);if (flag == true) { // 實現按鈕只能點擊一次move(true);flag = false;}}else {/* 當我們點擊了 右側按鈕 ：把 數組里面的第一個值刪掉 ，然后把這個值追加到 數組的最后面。json.push(json.shift());*/// alert(22); // 右側按鈕if (flag == true) { // 實現按鈕只能點擊一次move(false);flag = false;}}}}//移入的時候輪播停止slide.onmouseover = function () {clearInterval(timer);// direction.style.display = "block";};//移出的時候輪播繼續slide.onmouseout = function () {autoPlay();// direction.style.display = "none";};autoPlay();//自動輪播function autoPlay() {timer = setInterval(function () {move(1)}, 2000)}function move(x) {if (x != undefined) { // 如果沒有值傳遞過來，就應該 不執行 里面的語句直接遍歷jsonif (x) {// 交換 反向json 左側json.unshift(json.pop())} else {// 正向 jsonjson.push(json.shift());}}// 交換完畢 json 之后，就要 循環執行一次for (var i = 0; i < json.length; i++) {animate(lis[i], {width: json[i].width,top: json[i].top,left: json[i].left,opacity: json[i].opacity,zIndex: json[i].z}, function () {flag = true;})}} }

總結

以上是生活随笔為你收集整理的用原生JS实现旋转轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

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