首頁 > 開發者 > JavaScript
標籤：html+css == 方法 utf-8 ref row dex document 不執行
實現效果：
實現原理：
javascript+jQuery+html+css
// 0. 擷取元素
// 1. 滑鼠放置到輪播圖上，顯示兩側的控制按鈕，移開後隱藏
// 2. 為兩側控制按鈕綁定事件（調用同一個方法，只有一個參數，true為正向旋轉，false為反向旋轉）
實現代碼：
<!DOCTYPE html><html><head><title>旋轉木馬效果輪播圖</title><meta charset="utf-8"><style type="text/css">*{padding: 0;margin: 0;}body{font: 12px/1.5 "微軟雅黑";background-color: #2f2f2f;}a{text-decoration: none;outline: none;cursor: pointer;}.warp{width: 1000px;margin: 10px auto;border: 1px solid red;}.slide{height: 200px;margin: 150px auto;position: relative;}.slide li{position: absolute;left: 200px;top: 0;}.slide li img{width: 100%;border: 0;vertical-align: top;}ul{list-style: none;}.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: 999;}.next{right: 0;background-image: url(‘./images/next.png‘);}</style></head><body><div class="wrap" id="wrap"><div class="slide" id="slide"><ul><!-- 五張圖片 --><li><a href="#"><img src="./images/01.jpg"></a></li><li><a href="#"><img src="./images/02.jpg"></a></li><li><a href="#"><img src="./images/03.jpg"></a></li><li><a href="#"><img src="./images/04.jpg"></a></li><li><a href="#"><img src="./images/05.jpg"></a></li></ul><!-- 左右切換按鈕 --><div class="arrow" id="arrow"><a href="javascript:;" class="prev"></a><a href="javascript:;" class="next"></a></div></div></div><!-- 引入jQuery --><script src="jquery1.0.0.1.js"></script><script type="text/javascript">window.onload = function(){var arr = [ { // 1 width:400, top:0, left:170, opacity:20, zIndex:2 }, { // 2 width:600, top:70, left:80, opacity:80, zIndex:3 }, { // 3 width:800, top:50, left:250, opacity:100, zIndex:4 }, { // 4 width:600, top:70, left:600, opacity:80, zIndex:3 }, { //5 width:400, top:0, left:720, opacity:20, zIndex:2 } ];// 0. 擷取元素var slide = document.getElementById("slide");var liArr = slide.getElementsByTagName("li");var arrow = slide.children[1];var arrowChildren = arrow.children;// 設定一個開閉變數，點擊以後修改這個值var flag = true;// 1. 滑鼠放置到輪播圖上，顯示兩側的控制按鈕，移開後隱藏slide.onmouseenter = function(){animate(arrow,{"opacity":100});}slide.onmouseleave = function(){animate(arrow, {"opacity":0});}move();// 3. 為兩側控制按鈕綁定事件（調用同一個方法，只有一個參數，true為正向旋轉，false為反向旋轉）arrowChildren[0].onclick = function(){if(flag){flag = false;move(true);}}arrowChildren[1].onclick = function(){if(flag){flag = false;move(false);}}// 書寫slider移動函數function move(bool){// 判斷，如果等於undefined，那麼不執行這兩個if語句if(bool === true || bool === false){if(bool){// 將最後一個添加到第一個位置arr.unshift(arr.pop());}else{// 將第一個添加到最後一個位置arr.push(arr.shift());}}// 再次為頁面的所有li賦值屬性，利用緩動架構for(var i=0; i<liArr.length; i++){animate(liArr[i], arr[i], function(){flag = true;});}}}</script></body></html>
【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
