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

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

十多年建站经验， 网站设计、网站建设客户的见证与正确选择。创新互联建站提供完善的营销型网页建站明细报价表。后期开发更加便捷高效，我们致力于追求更美、更快、更规范。

!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.offsetLeft0){

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

liimg src="img/1.jpg"//li

liimg src="img/2.jpg"//li

liimg src="img/3.jpg"//li

liimg src="img/4.jpg"//li

/ul

/div

/body

/html

PHP如何实现搜索结果（或分类）下的图片滚动浏览（如百度图片一样）

哈哈,你这个需求大部分都是javascript来完成的.

关于图一的列表样式,无非就是瀑布流滚动配合ajax到php后台取数据实现无限加载而已

插件都是现成的

至于图二就更简单.无非是一个javascript的相册插件,也用现成的,php就是按照插件的格式把数据循环出来即可

鉴于你可能比较菜,给你推荐这款插件吧 比较简单 配置也有详细说明

如何在PHP网代码中加入图片滚动的效果？

#indemo给的宽度是不够的，宽度是要大于等于的demo1和demo2宽度之和。具体操作如下：

style type="text/css"

!--

#demo {

background: #000;

overflow:hidden;

border: 0px dashed #000;

width: 750px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

--

/style

div id="demo"

div id="indemo"

div id="demo1"

 ul

   ?php echo dt_product(8,5,10,0,0,false,null,'id')?

 /ul

/div

div id="demo2"/div

/div

/div

script

!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

--

/script

当前文章：php数据库图片滚动 php商品图片连接数据库
转载注明：http://chengdu.cdxwcx.cn/article/doiedcj.html