js 幻灯片放映图片_如何制作数据库驱动的首页幻灯片放映

js 幻灯片放映图片

It is becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website, magazine or online news has one on their site, and even some e-commerce sites have one.

在网站上放置头版滑块变得越来越流行。几乎每个电视网站，杂志或在线新闻都在其网站上有一个，甚至一些电子商务网站也有一个。

Today you can use sliders with Joomla, WordPress or Drupal. But the problem I had when I used one of the ready-made components you can download is that it is not customizable. Yes, you can change the look and feel, but you can not change the code. It is very complicated even for experienced developers.

今天，您可以在Joomla，WordPress或Drupal中使用滑块。但是，当我使用可以下载的现成组件之一时遇到的问题是，它不可定制。是的，您可以更改外观，但是不能更改代码。即使对于有经验的开发人员，这也非常复杂。

Finally I decided to make one my own, which I believe is easier to manage and doesn't have 1000 options I do not need. The best part, though, is that I can upgrade it as I want when I need, just by adding a little more code.

最终，我决定自己做一个，我认为它更易于管理，并且没有1000个不需要的选项。不过，最好的部分是，我可以根据需要进行升级，只需添加更多代码即可。

Back-end section

后端部分

My component is made of two parts. The first one is the back-end section which is the side the visitors do not see -- the administration part of the slider. We will need a simple database table which will contain the data. I will use an Access DB. I created a table with these fields:

我的组件由两部分组成。第一个是后端部分，该部分是访客看不到的一侧-滑块的管理部分。我们将需要一个包含数据的简单数据库表。我将使用Access DB。我用以下字段创建了一个表：

id Autonumber - this is just for indexing and it will be the primary-key
slideimg Text - this will contain the path to the picture
slidetitle Text - this will contain the title of the slide
slideurl Text - this will contain the URL destination when you click the slide

I saved this table as "slider" and the file as "cms.mdb".

我将此表另存为“ slider”，文件另存为“ cms.mdb”。

Then I created the administration interface. I used WhizBase for querying/editing the DB. Everything between #* and *# are comments so you can follow the code I used.

然后，我创建了管理界面。我使用WhizBase查询/编辑数据库。＃*和*＃之间的所有内容都是注释，因此您可以遵循我使用的代码。

[FormFields]
WB_BaseName=cms.mdb #* the path to the DB file *#
WB_RcdSet=slider #* the table name *#
WB_MAXREC=20 #* show 20 records in every page in the navigation system *#
WB_ORDER=id DESC #* order records by ID in Desc *#
WB_Command=Q #* Query the table *#
<!--WB_BeginTemplate--> #* Begin the visual part *#
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slider admin</title>
</head>
<body>
<h1>Add slides<h1>
<form action="addslider.wbsp" method="post" enctype="multipart/form-data">
#* for adding new slides we will submit our data to addslider.wbsp which we will create later. Do not forget to put enctype="multipart/form-data" because we are uploading files to the server. *#
Slide title: <input type="text" name="wbf_slidetitle" /><br />
Slide URL: <input type="text" name="wbf_slideurl" /><br />
Slide IMG: <input type="file" name="wbf_slideimg" /><br />
<input type="submit" value="Add slider" />
</form>
#* You will notice that I am using wbf_ in the input names. It is a prefix I add to make WhizBase process the data I am sending and add it in the DB automatically. *#
<hr />
#* Here we list the result of the query we done in the start of this file *#
<h1>All slides<h1>
<table width="100%" border="1" cellpadding="5" cellspacing="0" align="left">
<tr><td align="left" valign="top"><b>Title</b></td><td align="left" valign="top"><b>Thumb</b></td><td align="left" valign="top"><b>URL</b></td><td align="left" valign="top"><b>Delete</b></td></tr>
<!--WB_BeginDetail--> #* this will go through every record and added in our table *#
<tr>
<td align="left" valign="top">$wbf[slidetitle]</td> #* $wbf is a function in WhizBase to show a field for a record *#
<td align="left" valign="top"><img src="$wbf[slideimg]" width="150" /></td>
<td align="left" valign="top">$wbf[slideurl]</td>
<td align="left" valign="top"><a href="delete.wbsp?wbf_id=$wbf[id]">$wbf[id]</a></td> #* to pass variables by GET method I am using the wbf_ prefix *#
</tr>
<!--WB_EndDetail--> #* this will end the records loop *#
</table>
<center>$wbnavigator[]</center> #* I am adding the navigation links, so we can navigate through big lists *#
</body>
</html>

This page will let me add or delete slides; save it as "slider.wbsp". Now let us see "addslider.wbsp":

此页面将允许我添加或删除幻灯片；将其另存为“ slider.wbsp”。现在让我们看到“ addslider.wbsp”：

[FormFields]
WB_BaseName=cms.mdb
WB_AllowMultipart=T #* Allow multipart data is set to True. Without this we can not upload files, because upload is False by default for security reasons *#
WB_Command=A #* Add our parameters in the DB - we get them from the form with wbf_ prefixes *#
WB_Redirect=slider.wbsp #* redirect us to the admin page again *#
WB_RcdSet=slider
[Upload] #* This section is for upload information *#
WB_Disallow=![jpg,gif,png,bmp]  #* Disallow everything but pictures *#
WB_UploadDir=/images/ #* Upload pictures to images folder *#
WB_BaseURL=/images/ #* Base path will be images folder *#
WB_Overwrite=F #* Do not overwrite images, new images with same name will be given a new unique name automatically *#
WB_MaxFSize=500000 #* Maximum size in bytes *#
WB_UploadLog=upload.log #* write a log file upload.log *#

This is a pure WhizBase file which will upload the picture and add the data to the DB. It will check the size of the file, the file type, set the upload folder, filter all data from SQL injections and keep the files without being overwritten.

这是一个纯WhizBase文件，它将上传图片并将数据添加到数据库。它将检查文件的大小，文件类型，设置上传文件夹，从SQL注入中过滤所有数据并保留文件而不会被覆盖。

Now let us make the "delete.wbsp" file which deletes our slides.

现在，让我们制作“ delete.wbsp”文件来删除幻灯片。

[FormFields]
WB_BaseName=cms.mdb
WB_RcdSet=slider
WB_Command=D #* D is for delete, we have got the id in the link with prefix wbf_ *#
WB_Redirect=slider.wbsp
<!--WB_BeginTemplate-->

Now we have the administration ready. You can make a password protected folder and put the administration files in it, but do not forget to change the paths.

现在我们已经准备好行政部门。您可以创建一个受密码保护的文件夹并将管理文件放入其中，但不要忘记更改路径。

Front-end section

前端部分

The second section is the front-end section which is the side the visitors see; it is the visual part of the slider. We will need some JavaScript and HTML code, with WhizBase for querying the DB.

第二部分是前端部分，它是访问者看到的一面。它是滑块的可视部分。我们将需要一些JavaScript和HTML代码，以及用于查询数据库的WhizBase。

[FormFields]
WB_BaseName=cms.mdb #* the path to the DB file *#
WB_RcdSet=slider #* the table name *#
WB_MAXREC=$all$ #* show all records in sliders we do not navigate *#
WB_ORDER=id DESC #* order records by ID in Desc *#
WB_Command=Q #* Query the table *#
<!--WB_BeginTemplate--> #* Begin the visual part *#
<html>
<head>
<title>Frontpage slideshow</title>
<script type="text/javascript">
var slides= new Array($wbp[RC]); #* $wbp[RC] will give the number of records count. We need the number of slides for JS array, we will fill the array with data in the looping section *#
</script>
</head>
<body onload="initslider();"> #* to start the slider we make a JavaScript call on-load of body *#
<div id="slider"></div> #* this will contain the slideshow *#
<!--WB_BeginDetail--> #* I will list all the slides here, but I will not display them. This is good for SEO *#
<script type="text/javascript">slides[$wbp[RN]] = 'slide$wbf[id]';</script> #* $wbp[RN] will give us the record number. We need the slide div id which will be slide+id *#
<div id="slide$wbf[id]" style="display:nome;"> #* Use display:none; to hide the slide *#
<a href="$wbf[slideurl]"><img src="$wbf[slideimg]" alt="$wbf[slidetitle]" border="0" /></a> #* we make the content of every slide *#
</div>
<!--WB_EndDetail-->#* We need initslider(); function in JavaScript *#
<script type="text/javascript">
var start=0;
function initslider(){setTimeout("initslider()",500);document.getElementById('slider').innerHTML = document.getElementById(slides[start]).innerHTML;if(start == $wbp[RC]-1)start = 0;
else
start++;
}
#* This function will take the content of the slide from a hidden div and set it in the slideshow div. It will launch itself every 500 miliseconds again and set the next slide in the slideshow div. We check also the slide number, and if it is equal to the number of all slides minus one, it will reset the slide number.  *#
</script>
</body>
</html>

With this file, named "default.wbsp", we have a custom made slideshow manager. You can now add more elements in the slide show, like thumbnail picture, description, slide types and timers.

有了这个名为“ default.wbsp”的文件，我们有了一个定制的幻灯片管理器。现在，您可以在幻灯片中添加更多元素，例如缩略图，说明，幻灯片类型和计时器。

For more information email me at: NurAzije [at] Gmail [dot] com.

有关更多信息，请发送电子邮件至：NurAzije [at] Gmail [dot] com。

NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.

NurAzije是一名PHP和WhizBase程序员，在撰写本文时，他正在与WhizBase合作进行多个项目。

翻译自: https://www.experts-exchange.com/articles/3549/How-to-make-a-database-driven-frontpage-slideshow.html

js 幻灯片放映图片

js 幻灯片放映图片_如何制作数据库驱动的首页幻灯片放映相关推荐

netbeans 添加gif图片_怎么制作动态图片？手机如何制作清晰gif动图？
对于gif动图大家是非常熟悉的一种图片展现形式,比如平常在微信,QQ中使用的表情包就是gif动图样式的一种.一般获取GIF动图的渠道主要是来自网上或者对于好友使用的比较有趣的图片进行收藏,然后在聊天的 ...
mysql数据库插入图片_向MySql数据库插入与读取图片文件
1.插入图片 import java.io.FileInputStream; import java.io.InputStream; import java.sql.Connection; impor ...
windowbuilder怎么加图片_一键制作音乐图片，这效果太惊艳了！微信这个功能简直是“宝藏”...
试过给视频添加音乐,那你有没有试过给图片添加音乐呢?如果没有试过的话,建议你可以试试,效果绝对让你惊艳.没有加音乐的图片就只是张图片,加了音乐之后,它就有了属于自己的故事~ 一.微信自带功能不知道大 ...
画布设置背景图片_如何制作一张独一无二、漂亮、免费的高清背景图片？
分享一个免费创建高分辨率背景图片的在线工具:背景生成器-BgGenerator,多语言自带中文. 这个工具提供了 7 种不同的背景创建类型,可以通过随机算法生成独一无二的高分辨率的背景图片. BgGe ...
苹果幻灯片没有音乐_如何将音乐添加到Google幻灯片
苹果幻灯片没有音乐 Adding music to an otherwise text-heavy Google Slides presentation can spice it up. If you ...
ecshop lbi替换为html,ecshop商城网站首页幻灯片替换成自定义js轮播方法
ecshop商城网站的首页都会有一个首页主广告位,可以不停的播放网站的一些图片.但是程序自带的首页幻灯片样式特别单一,而且首页幻灯片还带有黑色边框,不是很好看. 下面学做网站论坛总结的将ecshop商 ...
php源码首页幻灯片显示错误,织梦DEDE首页幻灯片不显示怎么办
织梦DEDE首页幻灯片不显示怎么办? 织梦DEDE首页幻灯片不显示的原因和解决办法 DEDE首页幻灯片不显示的大部分原因都是因为以下两点: 1．DEDE幻灯片里.swf动画的路径错误． 2．就是你设置 ...
js 幻灯片放映图片_20个响应式图像库和幻灯片放映（2018）
如果您的网站上有大量图片,例如投资组合或摄影网站等,那么您最需要两件事–相册插件可帮助您更好地管理网站上的图片 ,而图片幻灯片则可以展示您的图片向世界展示图像. 但是,我今天的帖子将主要讨论响应式图像 ...
go 连接服务器并存放图片_基于 Go 语言开发在线论坛（二）：通过模型类与MySQL数据库交互...
在这篇教程中,我们将在 MySQL 中创建一个 chitchat 数据库作为论坛项目的数据库,然后在 Go 项目中编写模型类与之进行交互.你可以本地安装 MySQL 数据库,也可以基于 Docker ...

js 幻灯片放映图片_如何制作数据库驱动的首页幻灯片放映

js 幻灯片放映图片_如何制作数据库驱动的首页幻灯片放映相关推荐

最新文章

热门文章