js輪播圖之旋轉木馬效果
阿新 • • 發佈：2020-10-15
本文例項為大家分享了js輪播圖之旋轉木馬效果的具體程式碼，供大家參考，具體內容如下
思路：給定一個數組，儲存每張圖片的位置，旋轉將位置進行替換
左旋轉：將陣列第一個資料刪除，然後新增到陣列的最後
右旋轉：將陣列最後一個資料刪除，然後新增到陣列的開頭
先附上效果圖，再來實現
接下來就是最主要的，封裝原生js動畫函式
//封裝函式獲取任意一個元素的任意屬性的值（相容ie8）
function getStyle(element,attr) {
return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currentStyle[attr];
}
//封裝js變速動畫
function animate(element,json,fn) {
//每次啟動定時器之前先停止
clearInterval(element.tmId);
element.tmId = setInterval(function () {
var flag = true;
//遍歷物件中的每個屬性
for (var attr in json) {
//執行透明度動畫
if (attr == "opacity") {
//獲取當前元素的屬性值
var current = parseInt(getStyle(element,attr)*100);
//獲取目標值
var target = json[attr]*100;
//移動的步數
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//移動後的值
current += step;
element.style[attr] = current / 100;
} else if (attr == "zIndex") {
//改變層級屬性
element.style[attr] = json[attr];
} else {
//獲取當前元素的屬性值
var current = parseInt(getStyle(element,attr));
//獲取目標值
var target = json[attr];
//移動的步數
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//移動後的值
current += step;
element.style[attr] = current + "px";
if (current != target) {
flag = false;
}
}
}
if (flag) {
clearInterval(element.tmId);
//如果有回撥函式就呼叫
if (fn) fn();
}
// 測試
// console.log("目標：" + target + "/當前：" + current + "/步數：" + step);
},20);
}封裝完函式，剩下的直接呼叫就可以了，最後附上旋轉木馬完整程式碼?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋轉木馬輪播圖</title>
<link rel="stylesheet" href="css/css(1).css" rel="external nofollow" />
<script src="common.js"></script>
<script>
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,left: 600,//3
{
width: 400,left: 750,zIndex: 2
}//4
];
window.onload = function () {
var flag = true;
var list = $query("#slide").getElementsByTagName("li");
function flower() {
//1、圖片散開
for (var i = 0; i < list.length; i++) {
//設定每個li的寬，透明度，left,top，zindex
animate(list[i],config[i],function () {
flag = true;
});
}
}
flower();//初始化呼叫函式
//按鈕的顯示與隱藏
$query("#slide").onmouseover = function () {
$query("#arrow").style.opacity = "1";
}
$query("#slide").onmouseout = function () {
$query("#arrow").style.opacity = "0";
}
//點選切換
$query("#arrLeft").onclick = function () {
if (flag) {
config.unshift(config.pop());
flower();
flag = false;
}
}
$query("#arrRight").onclick = function () {
if (flag) {
config.push(config.shift());
flower();
flag = false;
}
}
//自動切換
setInterval(function () {
config.push(config.shift());
flower();
},2000);
}
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt="js輪播圖之旋轉木馬效果"/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt="js輪播圖之旋轉木馬效果"/></a></li>
<li><a href="#" ><img src="images/slidepic3.jpg" alt="js輪播圖之旋轉木馬效果"/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt="js輪播圖之旋轉木馬效果"/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt="js輪播圖之旋轉木馬效果"/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:void(0);" class="prev" id="arrLeft"></a>
<a href="javascript:void(0);" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
</html>精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。