怎么做网站产品图片滚动展示功能发布者：本站     时间：2020-05-12 14:05:42

方法如下：

第一步、删除原有图片调用所有代码包括div框。

第二步、如果是固定的图片展示就放上下面自己的图片div代码：

	
	

		<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
	

如果要是调用自动更新的某一分类的文章图片用以下代码（循环代码）：（注意：黄色的代码就是上面的缩略图调用代码，如果一个模板没有上面的产品图片模板，这个代码失效，或者要重新操作缩略图步骤。）

	
	

		<div id="demo">
<div id="indemo">
<div id="demo1">
<?php if (have_posts()) : ?>
<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
 <div class="thumb">
<a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ) { ?><?php the_post_thumbnail( array(160,100)); ?><?php } else {?><img src="<?php echo get_first_image(); ?>" width="160px" height="100px" /><?php }?><br/><?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></a>
</div>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</div>
<div id="demo2"></div>
</div>
</div>
	

第三步：将以下js 代码放到首页底部 </body>上面。

	
	

		<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>
	

第四步、复制css样式（可以设置长和高）

	
	

		#demo {
overflow:hidden;
width: 750px;
height:170px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
.thumb
{
float:left;
width:170px;
height:150px;
text-align:center;
}
.thumb img
{
width:160px;
height:120px;
}