极客观点
项目管理
HarmonyOS
如何读取数据库中的图片，实现轮播？
类似于这样的： 图片3D叠加切换
但这个页面的图片是写死了，有没有办法做到读取数据库中的图片并展示？
如果看不到链接，下面是代码，随便粘几个图片到对应路径里面就行了
index.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片3D叠加切换</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="lxMove.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="wrap">
<img src="images/1.jpg" alt="" class="pos_1" name="img1">
<img src="images/2.jpg" alt="" class="pos_2" name="img1">
<img src="images/3.jpg" alt="" class="pos_3" name="img1">
<img src="images/4.jpg" alt="" class="pos_4" name="img1">
<img src="images/5.jpg" alt="" class="pos_5" name="img1">
<img src="images/6.jpg" alt="" class="pos_6" name="img1">
<img src="images/7.jpg" alt="" class="pos_7" name="img1">
<div id="left"></div>
<div id="right"></div>
<img id="prev" src="images/prev.png">
<img id="prev_txt" src="images/prev_txt.png">
<img id="next" src="images/next.png">
<img id="next_txt"src="images/next_txt.png">
<ul class="leige">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<img id="footer" src="images/1.jpg"></img>
<div id="btn"></div>
</div>
</body>
</html>
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.onload=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.onmouseover=oPrev.onmouseover=oPrev_txt.onmouseover=function(){
startMove(oPrev_txt,{'left':-20, 'opacity':100});
startMove(oPrev,{'left':-56});
}
oLeft.onmouseout=oPrev.onmouseout=oPrev_txt.onmouseout=function(){
startMove(oPrev_txt,{'left':-10, 'opacity':0});
startMove(oPrev,{'left':-75});
}
oRight.onmouseover=oNext.onmouseover=oNext_txt.onmouseover=function(){
startMove(oNext_txt,{'left':413, 'opacity':100});
startMove(oNext,{'left':480});
}
oRight.onmouseout=oNext.onmouseout=oNext_txt.onmouseout=function(){
startMove(oNext_txt,{'left':403, 'opacity':0});
startMove(oNext,{'left':500});
}
oPrev.onclick=oPrev_txt.onclick=function(){
setTimeout(function(){
clearInterval(timer);
timer=setInterval(tab,3000)
},100)
tab()
}
oNext.onclick=oNext_txt.onclick=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].onclick=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.onclick=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;}
额，正确的页面地址是： 图片3D叠加切换
我简单试验了一下，只要替换链接就可以该图片，如图。
所以要从数据库拿图的话，也不知道你数据库存的是地址还是二进制数据=。=二进制的话不知道，我猜可以先生成一张图片，再调用吧
如果是地址的话在渲染页面的时候直接把地址改一下。