旋轉木馬輪播圖

時間 2019-11-13

標籤旋轉木馬简体版

原文原文鏈接

css部分

@charset "UTF-8";

/*初始化 reset*/

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

body,button,input,select,textarea{font:"Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color: #666;}

ol,ul{list-style:none}

a{text-decoration:none}

fieldset,img{border:0;vertical-align:top;}

a,input,button,select,textarea{outline:none;}

a,button{cursor:pointer;}

.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;

position: relative;

z-index:100;

}

.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);

}

html和js部分

<!DOCTYPE html>

<html>

<title>旋轉木馬輪播圖</title>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

var arr = [

{ //1

"width":400,

"top":20,

"left":750,

"opacity":20,

"zIndex":2

}

{ // 2

"width":600,

"top":70,

"left":600,

"opacity":80,

"zIndex":3

{ // 3

"width":800,

"top":100,

"left":200,

"opacity":100,

"zIndex":4

{ // 4

"width":600,

"top":70,

"left":0,

"opacity":80,

"zIndex":3

{ // 5

"width":400,

"top":20,

"left":50,

"opacity":20,

"zIndex":2

}

];

//頁面加載後獲取數組中的數據將每個json數據設置到頁面的每一張圖片上

var list = document.getElementsByTagName("li");

showData();

function showData(){

for( var i = 0 ; i < list.length ; i++ ){

startMove( list[i] , arr[i] , function(){

//上一次點擊運動完成後將flag的值變成 true

flag = true;

} );

}

$id("wrap").onmouseover = function(){

startMove( $id("arrow") , {"opacity":100} )

}

$id("wrap").onmouseout = function(){

startMove( $id("arrow") , {"opacity":0} )

}

var flag = true;//爲真時能夠點擊按鈕

//右側箭頭 next

$id("next").onclick = function(){

if( flag ){

//pop()刪除數組中的最後一個數據並返回刪除的數據

//刪除數組中的最後一個數據並放到數組的最前面

arr.unshift( arr.pop() );

showData();

flag = false;

}

//左側箭頭 prev

$id("prev").onclick = function(){

//刪除數組中第一個數據並放到數組的最後面

//shift()刪除數組的第一個數據並返回刪除的數據

arr.push( arr.shift() );

showData();

}

</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。