html 旋转木马 轮播,JS实现旋转木马式图片轮播效果

本文实例为大家分享了js图片轮播的具体代码，供大家参考，具体内容如下

主要html代码：

Document

• 
• 
• 
• 
• 

function $(id){ return document.getElementById(id);}

var js_wrap = $("js_wrap");

var wrap_slide = $("wrap_slide");

var wrap_slide_arrow = $("wrap_slide_arrow");

var lis = wrap_slide.children[0].children;

var json = [

{

//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铺开层次

var jieliu = true;

//两个按钮点击事件

var as = wrap_slide_arrow.children;

for(var k in as){

as[k].onclick = function(){

if(this.className == "prev"){

/*alert("左侧按钮");*/

//所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个

if(jieliu == true){

change(false);

jieliu = false;

}

}else if(this.className == "next"){

/*alert("右侧按钮");*/

//所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个

if(jieliu == true){

change(true);

jieliu = false;

}

}

}

}

function change(flag){

if(flag){

//所有图片顺时针旋转，相当于图片不动，json的最后一个删除并插到第一个

json.unshift(json.pop());

}else{

//所有图片逆时针旋转，相当于图片不动，json的第一个删除并插到最后一个

json.push(json.shift());

}

for(var k in json){

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

}

}

var timer = null;

timer = setInterval(autoPlay,2000);

function autoPlay(){

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

}*/

主要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 "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;}

.w-wrap{

width: 1200px;

margin: 100px auto;

}

.wrap-slide{

position: relative;

}

.wrap-slide li{

position: absolute;

left: 200px;

top: 0;

}

.wrap-slide li img{

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。