零基础建站培训教程介绍

当前位置:

怎么做网站产品图片滚动展示功能

很多网站的产品图片都采用滚动展示的效果,我们在学建网站时,也可以制作网站产品图片滚动展示功能。
网站产品图片滚动展示功能

方法如下:

第一步、删除原有图片调用所有代码包括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;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注