草草影院ccyy国产日本欧美-草草影院第一页yycccom-草草影院国产第一页-草的爽免费视频-国语自产精品视频在线区-国语自产拍在线观看任你躁

怎么做網站產品圖片滾動展示功能發布者：本站     時間：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;
}