php如何让数据库中的图片在网页首页滚动显示
8个回答
展开全部
可以用无缝图片滚动效果 如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* { margin: 0; padding: 0;}
body{ background-color:#1B1B1B}
#div1{ width: 800px; height: 150px; position: relative; margin: 100px auto;overflow: hidden;}
#div1 ul { width: 800px; height: 150px; position: relative; }
#div1 ul li { height: 150px; float: left; list-style: none; padding-right:20px;}
#div1 ul li img { width: 200px; height: 150px; display: 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: block; margin:0 auto; width: 50px;">向左走</a>
<a href="#" style=" display: block; margin:0 auto; width: 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* { margin: 0; padding: 0;}
body{ background-color:#1B1B1B}
#div1{ width: 800px; height: 150px; position: relative; margin: 100px auto;overflow: hidden;}
#div1 ul { width: 800px; height: 150px; position: relative; }
#div1 ul li { height: 150px; float: left; list-style: none; padding-right:20px;}
#div1 ul li img { width: 200px; height: 150px; display: 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: block; margin:0 auto; width: 50px;">向左走</a>
<a href="#" style=" display: block; margin:0 auto; width: 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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以开个定时器，通过ajax向php请求，每秒请求一次，
请求一个图片的url
php接到请求后，向数据库取一张图片的url.
不过，这是很笨的方法。
正确的方法是你从数据库请求到一组图片的url后，进行缓存，然后从缓存中读取各图片的url，再通过CSS+html放到一个div里去，
再外面套一个div，设置overflow:hidden;
然后再用JS开个定时器，做个滚动的效果。
当然，这类代码网上很多了，你自己去搜索一下很容易找到的。
请求一个图片的url
php接到请求后，向数据库取一张图片的url.
不过，这是很笨的方法。
正确的方法是你从数据库请求到一组图片的url后，进行缓存，然后从缓存中读取各图片的url，再通过CSS+html放到一个div里去，
再外面套一个div，设置overflow:hidden;
然后再用JS开个定时器，做个滚动的效果。
当然，这类代码网上很多了，你自己去搜索一下很容易找到的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
php只负责与数据库交互
滚动显示靠前台的内容，一般用jquery实现滚动的元素，php把数据读取出来映射到页面
滚动显示靠前台的内容，一般用jquery实现滚动的元素，php把数据读取出来映射到页面
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
滚动效果属于HTML层面的,你可以用JAVASCRIPT实现,PHP和数据库只能负责提供数据与调整格式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
