图片轮播html1001无标题,js图片轮播

如何读取数据库中的图片，实现轮播？

类似于这样的： 图片3D叠加切换

但这个页面的图片是写死了，有没有办法做到读取数据库中的图片并展示？

如果看不到链接，下面是代码，随便粘几个图片到对应路径里面就行了

index.html：

图片3D叠加切换

lxMove.js：

function startMove(obj,json,fn){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

var bStop=true;

for(attr in json){

var iCur=0;

if(attr=='opacity'){

var iCur=parseInt((parseFloat(getStyle(obj,attr))*100).toFixed(0));

}

else{

var iCur=parseInt(getStyle(obj,attr))

}

var iSpeed=(json[attr]-iCur)/5

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

if(iCur!=json[attr]){

bStop=false;

}

if(attr=='opacity'){

obj.style.opacity=(iCur+iSpeed)/100

obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")"

}

else{

if(attr=='zIndex'){

obj.style[attr]=iCur+iSpeed

}

else{

obj.style[attr]=iCur+iSpeed+"px";

}

}

}

if(bStop){

clearInterval(obj.timer);

if(fn){

fn()

}

}

},20)

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr]

}

else{

return getComputedStyle(obj,false)[attr]

}

}

index.js

window.οnlοad=function(){

var oLeft=document.getElementById("left");

var oRight=document.getElementById("right");

var oNext=document.getElementById("next");

var oNext_txt=document.getElementById("next_txt");

var oPrev=document.getElementById("prev");

var oPrev_txt=document.getElementById("prev_txt");

var oImg=document.getElementsByName("img1")

var oLeige=document.getElementsByClassName("leige")[0]

var oLi=oLeige.getElementsByTagName("li");

var oFoo=document.getElementById("footer");

var oBtn=document.getElementById("btn")

var arr=[];

var timer;

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

arr.push([parseInt(getStyle(oImg[i],'left')),parseInt(getStyle(oImg[i],'top')),parseInt(getStyle(oImg[i],'width')),parseFloat(getStyle(oImg[i],'opacity'))*100,parseInt(getStyle(oImg[i],'zIndex'))]);

};

oLeft.οnmοuseοver=oPrev.οnmοuseοver=oPrev_txt.οnmοuseοver=function(){

startMove(oPrev_txt,{'left':-20, 'opacity':100});

startMove(oPrev,{'left':-56});

}

oLeft.οnmοuseοut=oPrev.οnmοuseοut=oPrev_txt.οnmοuseοut=function(){

startMove(oPrev_txt,{'left':-10, 'opacity':0});

startMove(oPrev,{'left':-75});

}

oRight.οnmοuseοver=oNext.οnmοuseοver=oNext_txt.οnmοuseοver=function(){

startMove(oNext_txt,{'left':413, 'opacity':100});

startMove(oNext,{'left':480});

}

oRight.οnmοuseοut=oNext.οnmοuseοut=oNext_txt.οnmοuseοut=function(){

startMove(oNext_txt,{'left':403, 'opacity':0});

startMove(oNext,{'left':500});

}

oPrev.οnclick=oPrev_txt.οnclick=function(){

setTimeout(function(){

clearInterval(timer);

timer=setInterval(tab,3000)

},100)

tab()

}

oNext.οnclick=oNext_txt.οnclick=function(){

setTimeout(function(){

clearInterval(timer)

timer=setInterval(tab,3000)

},1000)

arr.unshift(arr[arr.length-1]);

arr.pop();

liTab();

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

startMove(oImg[i],{'left':arr[i][0],'top':arr[i][1],'width':arr[i][2],'opacity':arr[i][3],'zIndex':arr[i][4]});

};

}

timer=setInterval(tab,3000);

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

oLi[i].ind=i;

oLi[i].οnclick=function(){

oFoo.style.width="50";

oFoo.style.height="0"

oFoo.src="images/"+(this.ind+1)+".jpg";

startMove(oFoo,{'height':700},function(){

startMove(oFoo,{'width':1366})

oBtn.style.display="block";

})

};

oBtn.οnclick=function(){

startMove(oFoo,{'width':50},function(){

startMove(oFoo,{'height':0})

})

oBtn.style.display="none"

}

}

function tab(){

var temp=0;

arr.push(arr[0]);

arr.shift();

liTab();

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

oImg[i].ind=i;

startMove(oImg[i],{'left':arr[i][0],'top':arr[i][1],'width':arr[i][2],'opacity':arr[i][3],'zIndex':arr[i][4]});

};

}

function liTab(){

var temp=0;

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

if(arr[i][1]==0){

temp=i;

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

oLi[i].style.background="#fff";

};

oLi[temp].style.background="green";

}

};

}

}

style.css:

@charset "utf-8";

*{margin:0;padding:0;list-style:none;}

#wrap{width:500px;height:333px;margin:0 auto;position:relative;margin-top:100px;}

#left{width:250px;height:333px;left:0;background:red;position:absolute;z-index:100;opacity:0;filter:alpha(opacity:0);}

#right{width:250px;height:333px;right:0;background:blue;position:absolute;z-index:100;opacity:0;filter:alpha(opacity:0);}

#wrap img{position:absolute;}

.pos_1{width:280px;left:-180px;top:-290px; z-index:0;opacity:0;filter:alpha(opacity:0);border-radius:20px;box-shadow:0px 0px 10px #6F8363;}

.pos_2{width:280px;left:-180px;top:68px; z-index:1;opacity:0.4;filter:alpha(opacity:40);border-radius:20px;box-shadow:0px 0px 10px #6F8363}

.pos_3{width:380px;left:-105px;top:35px;z-index:2;opacity:0.8;filter:alpha(opacity:80);border-radius:20px;box-shadow:0px 0px 10px #6F8363}

.pos_4{width:500px;left:0px;top:0px; z-index:3;opacity:1;filter:alpha(opacity:1);border-radius:20px;box-shadow:0px 0px 10px #6F8363}

.pos_5{width:380px;left:225px;top:35px; z-index:2;opacity:0.8;filter:alpha(opacity:80);border-radius:20px;box-shadow:0px 0px 10px #6F8363}

.pos_6{width:280px;left:400px;top:68px; z-index:1;opacity:0.4;filter:alpha(opacity:40);border-radius:20px;box-shadow:0px 0px 10px #6F8363}

.pos_7{width:280px;left:400px;top:-290px; z-index:0;opacity:0;filter:alpha(opacity:0);border-radius:20px;box-shadow:0px 0px 10px #6F8363}

#prev{left:-75px;top:110px;z-index:1000;cursor:pointer;}

#prev_txt{left:-10px;top:110px;z-index:1000;opacity:0;filter:alpha(opacity:0);cursor:pointer;}

#next{left:500px;top:110px;z-index:1000;cursor:pointer;}

#next_txt{left:403px;top:110px;z-index:1000;opacity:0;filter:alpha(opacity:0);cursor:pointer;}

.leige{width:100px;height:15px;position:absolute;bottom:0;left:220px;z-index:1001;padding-top:5px;}

.leige li{width:8px;height:8px;border-radius:4px;background:#fff;float:left;margin:0 2px;cursor:pointer;}

.leige li:nth-of-type(4){background:green;}

#footer{width:50px;height:0px;position:absolute;left:-432px;top:-100px;border-radius:20px;z-index:10000;}

#btn{width:16px;height:16px;background:url(../images/closed.gif) no-repeat;position:absolute;top:-92px;right:-425px;cursor:pointer;display:none;z-index:10001;}