dedecms滚动图片(html网页图片滚动效果)

随着互联网的不断发展,网站已经成为企业、个人展示形象、宣传产品的重要平台。一个美观、实用的网站不仅能够提升用户体验,还能为企业带来更多的商机。而DedeCMS滚动图片作为网站中常见的元素,能够有效吸引用户的注意力,提升网站的吸引力。本文将为大家详细讲解DedeCMS滚动图片的制作方法,让你的网站更生动、更吸引人。

一、DedeCMS滚动图片的作用

DedeCMS滚动图片主要有以下作用:

1. 吸引用户注意力:通过动态的图片展示,吸引访客的注意力,提高网站的点击率。

2. 展示重点内容:将网站的重点内容以图片形式展示,让访客一目了然。

3. 美化页面:滚动图片能够美化页面,提升网站的视觉效果。

二、DedeCMS滚动图片制作步骤

下面以DedeCMS V5.7版本为例,为大家讲解滚动图片的制作步骤。

1. 准备图片

我们需要准备多张图片,用于制作滚动图片。图片尺寸建议为宽度:960px,高度:300px,格式为jpg或png

2. 创建图片文件夹

在网站根目录下创建一个名为images的文件夹,用于存放滚动图片。

3. 上传图片

将准备好的图片上传到images文件夹中。

4. 修改配置文件

打开DedeCMS后台,进入系统设置 -> 基本参数设置,找到滚动图片设置项,将开启滚动图片设置为

5. 添加滚动图片

进入内容管理 -> 单页内容,点击添加单页内容

1. 标题:填写滚动图片的标题。

2. 缩略图:选择图片文件夹中的图片作为缩略图。

3. 内容:在内容编辑器中,将图片上传到图片按钮,然后点击插入图片

4. 发布:点击发布按钮,将单页内容发布到网站。

6. 设置滚动参数

进入内容管理 -> 单页内容,找到刚发布的单页内容,点击编辑

1. 滚动方向:选择图片的滚动方向,如左右滚动、上下滚动等。

2. 滚动速度:设置图片的滚动速度,如慢速、中速、快速等。

3. 自动播放:设置图片是否自动播放,如开启、关闭等。

4. 暂停时间:设置图片暂停的时间,如3秒、5秒等。

7. 预览效果

点击预览按钮,查看滚动图片的效果。

三、DedeCMS滚动图片常见问题

1. 图片无法显示:检查图片是否上传到正确的文件夹,以及图片格式是否正确。

2. 滚动速度过快或过慢:调整滚动参数中的滚动速度设置。

3. 图片无法正常播放:检查浏览器是否支持JavaScript,以及网站是否开启了JavaScript功能。

四、总结

通过以上步骤,我们可以轻松制作出精美的DedeCMS滚动图片。滚动图片能够有效提升网站的视觉效果,吸引用户的注意力。希望本文能够帮助大家更好地制作DedeCMS滚动图片,让你的网站更生动、更吸引人。

步骤 操作 说明
1 准备图片 尺寸:宽度960px,高度300px;格式:jpg或png
2 创建图片文件夹 在网站根目录下创建名为images的文件夹
3 上传图片 将图片上传到images文件夹中
4 修改配置文件 开启滚动图片
5 添加滚动图片 填写标题、选择缩略图、上传图片、发布
6 设置滚动参数 设置滚动方向、滚动速度、自动播放、暂停时间
7 预览效果 查看滚动图片效果

以上就是DedeCMS滚动图片的制作方法,希望对大家有所帮助。

织梦无法上传图片出现一个滚动条

图片不能上传成功的原因大概有以下几种:

1、目录上传权限不够。

2、程序本身漏洞导致,或程序不完整导致。

3、操作系统问题。

检测目录权限

当提示图片上传失败的时候,我首先检测的是文件权限是否足够。经过检测,文件夹的权限是755表示已经足够,并且已经重新创建了文件夹并赋予最高权限,依然没有解决该问题,接着检测用户组权限是否足够,通过检测也没有发现任何的问题,因此文件夹权限导致图片不能正常上传的可能性被排除。

网站程序完整性

接着检测网站程序的完整性,发现十多个网站都不能正常上传图片,于是排除了网站程序完整性导致图片上传失败的可能性。

操作系统问题

于是检测 WEB NGINX服务器,将图片上传文件夹的可执行权限开放,但任然不能成功上传图片。此时,忽然想起了之前配置过 php.ini配置文档,将 open_basedir配置成了网站程序所在根目录/htdocs,于是将该行代码注释掉,之后便成功的上传了图片,问题被解决掉。但是,这样做放弃了安全性,有些舍不得。

通过以下方法,不仅让安全性提高,也解决了图片上传失败的问题:

php.ini中的open_basedir表示:php程序执行限制在了指定的目录中,这样可以限制入侵者继续提权到操作系统,安全性有更一步的保障。其中 upload_tmp_dir表示的是文件上传临时目录,如果设置了 open_basedir参数,那么 upload_tmp_dir必须配置,否则文件上传将不能成功。

总结:遇到图片不能上传,表示相当棘手。需要从上传的图片类型、图片的尺寸、文件夹权限、程序完整性到最后的系统环境一一分析,遇到问题不要焦急,相信经过透彻的分析与测试,问题总会被解决掉。本文最终解决方法就有两个,注释 open_basedir该行代码就能解决问题,如果配置了 open_basedir那么需要设定文件上传临时目录,最后笔者将 upload_tmp_dir设定为/tmp后,图片就可以成功上传了!

dedecms列表调用内容多张图片

普通文章列表调用内容多张图片不能用图集模型的办法,需要自己写一个函数,在include/extend.func.php增加函数

functionGetpic($body)

{

$getpic='';

preg_match_all(“/(src)=[\”|'|]{0,}([^>]*\.(gif|jpg|bmp|png))/isU”,$body,$img_array);

$img_array=array_unique($img_array[2]);

if(count($img_array)>0)

{

foreach($img_arrayas$key=>$value)

{

$picname=preg_replace(“/[\”|'|]{1,}/”,'',$value);

$getpic.=”<p><imgsrc='”.$picname.”'border=0/></p>”;

}

}

else

{

$getpic=”<p>没有图片</p>”;

}

return$getpic;

}

列表页模版使用标签

{dede:listpagesize='10'addfields='body'}

<li><ahref='[field:arcurl/]'target='_blank'>

<spanclass=”title”>[field:title/]</span>

[field:bodyfunction='Getpic(@me)'/]

</a></li>

{/dede:list}

同时到网站后台-内容模型管理,修改普通文章模型附加列表字段增加body

保存后,就可以更新列表了,这样就能在列表页显示文章正文内所有图片

dedecms5.7调用图片出现严重失真,缩略图显示严重变形

首先在网站后台系统中设置网站缩略图尺寸大小和模板中调用图片最大尺寸相同.

再打开文件include/helpers/extend.helpes.php在最下面加上以下代码

if(! function_exists('thumb'))

{

function thumb($imgurl,$width,$height,$bg= true)

{

global$cfg_mainsite,$cfg_multi_site;

$thumb= eregi(“http://”,$imgurl)?str_replace($cfg_mainsite,'',$imgurl):$imgurl;

list($thumbname,$extname)= explode('.',$thumb);

$newthumb=$thumbname.'_'.$width.'_'.$height.'.'.$extname;

if(!$thumbname||!$extname||!file_exists(DEDEROOT.$thumb)) return$imgurl;

if(!file_exists(DEDEROOT.$newthumb))

{

include_once DEDEINC.'/image.func.php';

if($bg==true)

{

ImageResizeNew(DEDEROOT.$thumb,$width,$height, DEDEROOT.$newthumb);

}

else

{

ImageResize(DEDEROOT.$thumb,$width,$height, DEDEROOT.$newthumb);

}

}

return$cfg_multi_site=='Y'?$cfg_mainsite.$newthumb:$newthumb;

}

}

调用方法:

标签: [field:picname function='thumb(@me,$width,$height,$bg)'/]

参数说明:

$width:缩略图宽度(整数)

$height:缩略图高度(整数)

$bg:是否用空白填补,默认自动填补,背景填充颜色在系统-附件设置里(true/false)

举例:

调用长宽为100像素的缩略图:[field:picname function='thumb(@me,100,100)'/]

保留原有比例,不自动填充(不建议):[field:picname function='thumb(@me,100,100,false)'/]

再到 include/helpers/image.helpes.php中写入以下代码

/**

*缩图片自动生成函数,来源支持bmp、gif、jpg、png

*但生成的小图只用jpg或png格式

*@access public

*@param string$srcFile图片路径

*@param string$toW转换到的宽度

*@param string$toH转换到的高度

*@param string$toFile输出文件到

*@return string

*/

if(! function_exists('ImageResize'))

{

function ImageResize($srcFile,$toW,$toH,$toFile=””)

{

global$cfg_photo_type;

if($toFile==””)

{

$toFile=$srcFile;

}

$info=””;

$srcInfo= GetImageSize($srcFile,$info);

switch($srcInfo[2])

{

case 1:

if(!$cfg_photo_type['gif'])

{

return false;

}

$im= imagecreatefromgif($srcFile);

break;

case 2:

if(!$cfg_photo_type['jpeg'])

{

return false;

}

$im= imagecreatefromjpeg($srcFile);

break;

case 3:

if(!$cfg_photo_type['png'])

{

return false;

}

$im= imagecreatefrompng($srcFile);

break;

case 6:

if(!$cfg_photo_type['bmp'])

{

return false;

}

$im= imagecreatefromwbmp($srcFile);

break;

}

$srcW=ImageSX($im);

$srcH=ImageSY($im);

if($srcW<=$toW&&$srcH<=$toH)

{

return true;

}

//缩略生成并裁剪

$newW=$toH*$srcW/$srcH;

$newH=$toW*$srcH/$srcW;

if($newH>=$toH)

{

$ftoW=$toW;

$ftoH=$newH;

}

else

{

$ftoW=$newW;

$ftoH=$toH;

}

if($srcW>$toW||$srcH>$toH)

{

if(function_exists(“imagecreatetruecolor”))

{

@$ni= imagecreatetruecolor($ftoW,$ftoH);

if($ni)

{

imagecopyresampled($ni,$im,0,0,0,0,$ftoW,$ftoH,$srcW,$srcH);

}

else

{

$ni=imagecreate($ftoW,$ftoH);

imagecopyresized($ni,$im,0,0,0,0,$ftoW,$ftoH,$srcW,$srcH);

}

}

else

{

$ni=imagecreate($ftoW,$ftoH);

imagecopyresized($ni,$im,0,0,0,0,$ftoW,$ftoH,$srcW,$srcH);

}

//裁剪图片成标准缩略图

$new_imgx= imagecreatetruecolor($toW,$toH);

if($newH>=$toH)

{

imagecopyresampled($new_imgx,$ni,0,0,0,($newH-$toH)/2,$toW,$toH,$toW,$toH);

}

else

{

imagecopyresampled($new_imgx,$ni,0,0,($newW-$toW)/2,0,$toW,$toH,$toW,$toH);

}

switch($srcInfo[2])

{

case 1:

imagegif($new_imgx,$toFile);

break;

case 2:

imagejpeg($new_imgx,$toFile,85);

break;

case 3:

imagepng($new_imgx,$toFile);

break;

case 6:

imagebmp($new_imgx,$toFile);

break;

default:

return false;

}

imagedestroy($new_imgx);

imagedestroy($ni);

}

imagedestroy($im);

return true;

}

}

即可

QQ:51461981

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享