本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下
主要html代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/css.css "比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/animate.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类=" w-wrap " id=癹s_wrap”比;
& lt; div类=" wrap-slide " id=皐rap_slide”比;
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic1.jpg " alt="祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic2.jpg " alt="祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic3.jpg " alt="祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic4.jpg " alt="祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic5.jpg " alt="祝辞& lt;/a> & lt;/li>
& lt; !——& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/images/slidepic6.jpg " alt="祝辞& lt;/a> & lt;/li>——比;
& lt;/ul>
& lt; div类=" wrap-slide-arrow " id=皐rap_slide_arrow”比;
& lt; a href=" javascript:,“class="上一页"祝辞& lt;/a>
& lt; a href=" javascript:;”class=跋乱桓觥弊４? lt;/a>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; script>
函数(id)美元{返回. 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]定格;
var json=[
{//1
宽度:400年,
上图:20,
左:50,
透明度:20,
z: 2
}，
{//2
宽度:600年,
上图:70年,
左:0,
透明度:80,
z: 3
}，
{//3
宽度:800年,
上图:100年,
左:200年,
透明度:100,
z: 4
}，
{//4
宽度:600年,
上图:70年,
左:600年,
透明度:80,
z: 3
}，
{//5
宽度:400年,
上图:20,
左:750年,
透明度:20,
z: 2
},/*
{//6
宽度:300年,
上图:10
左:400年,
透明度:10,
z: 1
} */]
改变();//将各个图片按照json铺开层次
var jieliu=true;//两个按钮点击事件
var=wrap_slide_arrow.children;
(var k) {
[k]。onclick=function () {
如果这一点。className==吧弦灰场?{/*警报(“左侧按钮”);*///所有图片逆时针旋转,相当于图片不动,json的第一个删除并插到最后一个
如果(jieliu==true) {
改变(假);
jieliu=false;
}
如果(这其他}。className==跋乱桓觥?{/*警报(“右侧按钮”);*///所有图片顺时针旋转,相当于图片不动,json的最后一个删除并插到第一个
如果(jieliu==true) {
改变(真正的);
jieliu=false;
}
}
}
}
函数变化(国旗){
如果(国旗){//所有图片顺时针旋转,相当于图片不动,json的最后一个删除并插到第一个
json.unshift (json.pop ());
其他}{//所有图片逆时针旋转,相当于图片不动,json的第一个删除并插到最后一个
json.push (json.shift ());
}
在json (var k) {
动画(lis [k], {
宽度:json [k] .width,
上图:json直[k]上,
左:json [k] .left,
透明度:json [k] .opacity,
zIndex: json [k]还是z
},function () {jieliu=true;});//当动画执行完,执行回调函数,此时置节流为真实的
}
}
var计时器=零;
计时器=setInterval(播放,2000);
函数自动播放(){
如果(jieliu==true) {
改变(真正的);
jieliu=false;
}
}
js_wrap。onmouseover=function () {
clearInterval(计时器);
不透明度动画(wrap_slide_arrow {: 100});
}
js_wrap。onmouseout=function () {
clearInterval(计时器);
计时器=setInterval(播放,2000);
动画(wrap_slide_arrow{不透明度:0});
}/* js_wrap。onmouseover=function () {
不透明度动画(wrap_slide_arrow {: 100});
}
js_wrap。onmouseout=function () {
动画(wrap_slide_arrow{不透明度:0});
} */& lt;/script>
& lt;/body>
& lt;/html>
