xiuno图文列表调用三张图片代码分别实现不同图片样式
2022年05月03日 3067

xiuno

代码不能直接拿来用,要做修改后才能使用,因为我是复制粘贴的代码。

如果有能力,可以把代码整理好,分享出来。

能够实现的效果,就是网站有一张图片的时候在列表输出一张,有三张输出三张。

	<div class="xxyd">
			
		<?php
			$post = post_read($_thread['firstpid']);
			$content =($post['message']);
			$message = strip_tags($content);
			$jianjie = mb_substr($message,0,100,'utf-8'); //这里截取字符串100个
			$pattern="/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png]))[\'|\"].*?[\/]?>/";
			$imgcount=preg_match_all($pattern,$content,$match);
			$imgs=array();
			for($i=0;$i<3;$i++){    //此处要调用几张将数字改成调用张数即可,默认2张
			    if(!empty($match[0][$i])){
			        $imgs[$i]=$match[1][$i];
			    }
			}?>	
			
		<p class="item-excerpt" style="margin-top: 20px;"><?php echo $jianjie ?>…</p>  
		
		<div class="xxyd1" style=" overflow: hidden; text-align: center ; margin: auto;">
			<?php if($imgcount >= 1 && $imgcount < 2 ) { ?>
				<?php foreach($imgs as $pic){?>
					<img src="<?php echo $pic ?>" style="width:48%; max-height:500px; display: inline-block;">
				<?php }?>
			<?php } ?>
		</div>
		
		<div class="xxyd2" style=" overflow: hidden; text-align: center ; margin: auto;">
			<?php if($imgcount >= 2 && $imgcount < 3) { ?>
				<?php foreach($imgs as $pic){?>
					<img src="<?php echo $pic ?>" style="width:48%; max-height:200px; display: inline-block;">
				<?php }?>
			<?php } ?>
		</div>
		
		<div class="xxyd3" style=" overflow: hidden; text-align: center ; margin: auto;">
			<?php if($imgcount >= 3 && $imgcount < 4 ) { ?>
				<div class="" style=" width=500px" height="500px">
				<img src="<?php echo $imgs[0]; ?>" style="width:100%; max-height:200px; display: inline-block;"><div>
                <div class="" style=" width=300px" height="500px">
                <img src="<?php echo $imgs[1];  ?>" style="width:100%;height=50%;   display: inline-block;">
                <img src="<?php echo $imgs[2]; ?>" style="width:100%; height="50%;   display: inline-block;">
                <div>
					
			<?php } ?>
		</div>
		
	</div>

以上代码直接输出三张图 加上class=a-i就行,i取123 然后写上css

<div class="" style=" width=500px" height="500px"><img src="<?php echo $imgs[0]; ?>" style="width:100%; max-height:200px; display: inline-block;"><div>
<div class="" style=" width=300px" height="500px">
<img src="<?php echo $imgs[1];  ?>" style="width:100%;height=50%;   display: inline-block;">
<img src="<?php echo $imgs[2]; ?>" style="width:100%; height="50%;   display: inline-block;">
<div>

不同样式判断

switch(count($imgs)){

case 1:

//一张图的样式代码

break;

case 2:

//两张图的样式代码

break;

case 3:

//三张图的样式代码

break;

defalut:

//没有图片或者其它情况

break;

}

可以实现效果

TAG


- End -




1 条评论
  • 表情
  • 游客你好,回复内容需要 登录 查看!