知识点
旋转木马思想:
固定五种图片的位置信息jsonArr进行布局
点击<或者>会对jsonArr进行重新排序,重新排序后对界面重新进行布局
数据驱动界面,数据的改变会影响界面
数组的四种操作 ① push:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 ② pop:pop() 方法用于删除并返回数组的最后一个元素。 ③ shift:shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。 ④ unshift:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
引入工具库工具库
运行效果
代码
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> < / title>
< style>
* {
margin: 0 ;
padding: 0 ;
border: none;
list- style: none;
}
img {
vertical- align: top;
}
body {
background- color: #000 ;
}
#slider {
width: 1200 px;
height: 460 px;
margin: 100 px auto;
position: relative;
}
#slider li {
position: absolute;
left: 200 px;
top: 0 ;
}
#slider li img {
width: 100 % ;
height: 100 % ;
}
. slider_ctl_prev, . slider_ctl_next {
width: 76 px;
height: 112 px;
position: absolute;
top: 50 % ;
margin- top: - 56 px;
z- index: 99 ;
}
#slider_ctl {
opacity: 0 ;
}
. slider_ctl_prev {
background: url ( "images/prev.png" ) no- repeat;
left: 0 ;
}
. slider_ctl_next {
background: url ( "images/next.png" ) no- repeat;
right: 0 ;
}
< / style>
< / head>
< body>
< div id= "slider" >
< ul id= "slider_main" >
< li> < img src= "images/slidepic1.jpg" alt= "" > < / li>
< li> < img src= "images/slidepic2.jpg" alt= "" > < / li>
< li> < img src= "images/slidepic3.jpg" alt= "" > < / li>
< li> < img src= "images/slidepic4.jpg" alt= "" > < / li>
< li> < img src= "images/slidepic5.jpg" alt= "" > < / li>
< / ul>
< div id= "slider_ctl" >
< span class = "slider_ctl_prev" > < / span>
< span class = "slider_ctl_next" > < / span>
< / div>
< / div>
< script src= "../00MyTools/MyTools.js" > < / script>
< script>
window. addEventListener ( 'load' , function ( ev) {
var slider = myTool. $ ( 'slider' ) ;
var sliderMain = myTool. $ ( 'slider_main' ) ;
var allLis = sliderMain. children;
var sliderCtl = myTool. $ ( 'slider_ctl' ) ;
var jsonArr = [
{ "width" : "400" , "top" : "20" , "left" : "50" , "opacity" : "0.2" , "zIndex" : "2" } ,
{ "width" : "600" , "top" : "70" , "left" : "0" , "opacity" : "0.8" , "zIndex" : "3" } ,
{ "width" : "800" , "top" : "100" , "left" : "200" , "opacity" : "1" , "zIndex" : "4" } ,
{ "width" : "600" , "top" : "70" , "left" : "600" , "opacity" : "0.8" , "zIndex" : "3" } ,
{ "width" : "400" , "top" : "20" , "left" : "750" , "opacity" : "0.2" , "zIndex" : "2" }
] ;
for ( var i = 0 ; i < jsonArr. length; i++ ) {
myTool. slowMoving ( allLis[ i] , jsonArr[ i] ) ;
}
slider. addEventListener ( 'mouseover' , function ( ) {
myTool. slowMoving ( sliderCtl, { 'opacity' : 1 } ) ;
} ) ;
slider. addEventListener ( 'mouseout' , function ( ) {
myTool. slowMoving ( sliderCtl, { 'opacity' : 0 } ) ;
} ) ;
for ( var j = 0 ; j < sliderCtl. children. length; j++ ) {
var item = sliderCtl. children[ j] ;
item. addEventListener ( 'click' , function ( evt) {
if ( this . className === 'slider_ctl_prev' ) {
jsonArr. push ( jsonArr. shift ( ) )
} else {
jsonArr. unshift ( jsonArr. pop ( ) )
}
for ( var i = 0 ; i < jsonArr. length; i++ ) {
myTool. slowMoving ( allLis[ i] , jsonArr[ i] ) ;
}
} , false ) ;
}
} , false )
< / script>
< / body>
< / html>