善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是怎么做网站产品图片滚动展示功能

傅汉松

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

方法如下:

第一步、删除原有图片调用所有代码包括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 代码放到首页底部上面。

<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: 550px;
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;
}


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 怎么做网站产品图片滚动展示功能
很多网站的产品图片都采用滚动展示的效果,我们在学建网站时,也可以制作网站产品图片滚动展示功能。方法如下:第一步、删除原有图片调用所有代码包括div框。第二步、如...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    89.50ms