php如何让数据库中的图片在网页首页滚动显示

php如何让数据库中的图片在网页首页滚动显示,第1张

可以用无缝图片滚动效果 如:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

* { margin: 0padding: 0}

body{ background-color:#1B1B1B}

#div1{ width: 800pxheight: 150pxposition: relativemargin: 100px autooverflow: hidden}

#div1 ul { width: 800pxheight: 150pxposition: relative}

#div1 ul li { height: 150pxfloat: leftlist-style: nonepadding-right:20px}

#div1 ul li img { width: 200pxheight: 150pxdisplay: inline-block}

a{ color: #B4B4B4}

</style>

<script type="text/javascript">

window.onload=function(){

var odiv = document.getElementById('div1')

var oul = odiv.getElementsByTagName('ul')[0]

var ali = oul.getElementsByTagName('li')

var spa = -2

oul.innerHTML=oul.innerHTML+oul.innerHTML

oul.style.width=ali[0].offsetWidth*ali.length+'px'

function move(){

if(oul.offsetLeft<-oul.offsetWidth/2){

oul.style.left='0'

}

if(oul.offsetLeft>0){

oul.style.left=-oul.offsetWidth/2+'px'

}

oul.style.left=oul.offsetLeft+spa+'px'

}

var timer = setInterval(move,30)

odiv.onmousemove=function(){clearInterval(timer)}

odiv.onmouseout=function(){timer = setInterval(move,30)}

document.getElementsByTagName('a')[0].onclick = function(){

spa=-2

}

document.getElementsByTagName('a')[1].onclick = function(){

spa=2

}

}

</script>

</head>

<body>

<a href="#" style=" display: blockmargin:0 autowidth: 50px">向左走</a>

<a href="#" style=" display: blockmargin:0 autowidth: 50px">向右走</a>

<div id="div1">

<ul>

<li><img src="img/1.jpg"/></li>

<li><img src="img/2.jpg"/></li>

<li><img src="img/3.jpg"/></li>

<li><img src="img/4.jpg"/></li>

</ul>

</div>

</body>

</html>

有两个方法:

1是你使用FCK编辑器上传图片时就(分别一张张上传)时就保存好路径在一个隐藏input里。

2是提交表单后在文章内容里正侧提取所有图片地址。(建议)怎么样在内容里提取图片地址请参考:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/sjk/9904664.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-03
下一篇2023-05-03

发表评论

登录后才能评论

评论列表(0条)

    保存