JS实现旋转木马式图片轮播效果
本文实例为大家分享了js图片轮播的具体代码，供大家参考，具体内容如下
主要html代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<linkrel="stylesheet"type="text/css"href="css/css.css">
<scripttype="text/javascript"src="js/animate.js"></script>
</head>
<body>
<divclass="w-wrap"id="js_wrap">
<divclass="wrap-slide"id="wrap_slide">
<ul>
<li><ahref="#"><imgsrc="images/slidepic1.jpg"alt=""></a></li>
<li><ahref="#"><imgsrc="images/slidepic2.jpg"alt=""></a></li>
<li><ahref="#"><imgsrc="images/slidepic3.jpg"alt=""></a></li>
<li><ahref="#"><imgsrc="images/slidepic4.jpg"alt=""></a></li>
<li><ahref="#"><imgsrc="images/slidepic5.jpg"alt=""></a></li>
<!--<li><ahref="#"><imgsrc="images/slidepic6.jpg"alt=""></a></li>-->
</ul>
<divclass="wrap-slide-arrow"id="wrap_slide_arrow">
<ahref="javascript:;"class="prev"></a>
<ahref="javascript:;"class="next"></a>
</div>
</div>
</div>
<script>
function$(id){returndocument.getElementById(id);}
varjs_wrap=$("js_wrap");
varwrap_slide=$("wrap_slide");
varwrap_slide_arrow=$("wrap_slide_arrow");
varlis=wrap_slide.children[0].children;
varjson=[
{
//1
width:400,
top:20,
left:50,
opacity:20,
z:2
},
{
//2
width:600,
top:70,
left:0,
opacity:80,
z:3
},
{
//3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{
//4
width:600,
top:70,
left:600,
opacity:80,
z:3
},
{
//5
width:400,
top:20,
left:750,
opacity:20,
z:2
}/*,
{
//6
width:300,
top:10,
left:400,
opacity:10,
z:1
}*/
]
change();//将各个图片按照json铺开层次
varjieliu=true;
//两个按钮点击事件
varas=wrap_slide_arrow.children;
for(varkinas){
as[k].onclick=function(){
if(this.className=="prev"){
/*alert("左侧按钮");*/
//所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
if(jieliu==true){
change(false);
jieliu=false;
}
}elseif(this.className=="next"){
/*alert("右侧按钮");*/
//所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个
if(jieliu==true){
change(true);
jieliu=false;
}
}
}
}
functionchange(flag){
if(flag){
//所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个
json.unshift(json.pop());
}else{
//所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个
json.push(json.shift());
}
for(varkinjson){
animate(lis[k],{
width:json[k].width,
top:json[k].top,
left:json[k].left,
opacity:json[k].opacity,
zIndex:json[k].z
},function(){jieliu=true;});//当动画执行完，执行回调函数，此时置节流为true
}
}
vartimer=null;
timer=setInterval(autoPlay,2000);
functionautoPlay(){
if(jieliu==true){
change(true);
jieliu=false;
}
}
js_wrap.onmouseover=function(){
clearInterval(timer);
animate(wrap_slide_arrow,{opacity:100});
}
js_wrap.onmouseout=function(){
clearInterval(timer);
timer=setInterval(autoPlay,2000);
animate(wrap_slide_arrow,{opacity:0});
}
/*js_wrap.onmouseover=function(){
animate(wrap_slide_arrow,{opacity:100});
}
js_wrap.onmouseout=function(){
animate(wrap_slide_arrow,{opacity:0});
}*/
</script>
</body>
</html>
主要css代码：
/*初始化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:12px/1.5"MicrosoftYaHei","微软雅黑",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;}
.w-wrap{
width:1200px;
margin:100pxauto;
}
.wrap-slide{
position:relative;
}
.wrap-slideli{
position:absolute;
left:200px;
top:0;
}
.wrap-slideliimg{
width:100%;
}
.wrap-slide-arrow{
opacity:0;
position:relative;
}
.prev,.next{
width:76px;
height:112px;
position:absolute;
top:50%;
margin-top:-56px;
background:url(../images/prev.png)no-repeat;
}
.next{
right:0;
background:url(../images/next.png)no-repeat;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。