[转载]如何用节点队列来创建高级图片轮播

用到的模块: 以下模块必须被安装并启用:Dynamic display block 模块(RC6)jQuery update 模块CCK 模块Views 模块filefield 模块imagefield 模块imageapi 模块imagecache (optional)Nodequeue 创建内容 在nodequeue可以被用来创建节点队列之前，我们必须先新建一个内容类型“新闻”。1 在之前的教程中我们已经介绍过如何新建内容类型，这里就不冗述了，只要保证你的内容类型有以下属性就行了。· 标题- 作为幻灯片的标题和完整的节点页面的标题· 翻页器文字- 用来显示在翻页器上面。(新建一个text field（文本属性）就行了)· 幻灯片文字- 用来悬浮显示在幻灯片上方(新建text field(文本属性))· 幻灯片- 作为幻灯片的和翻页器的(新建imagefield（属性）)· 正文- 完整节点的详细文字(和每一个content type有的正文一样) 2 创建一些示例节点- 你可以随便填入一些内容来新建示例节点，至少新建两个 为新建的内容类型“新闻”启用和配置nodequeue(节点队列）1 在模块管理页面启用Nodequeue:Admin(管理) > Site building(站点构建) > Modules(模块)2 打开Nodequeue管理页面：Admin（管理）> Content management（内容管理）> Nodequeue3 点击Add （添加）nodequeue 选项卡4 填入以下属性值:· 标题- 队列名称, 例如(高级轮播区块的节点队列)· 队列大小- 队列中有几个节点, 比如(6)· Reverse in admin view（倒序添加节点）- (可选。勾选后将把新节点放在最上，而底部的节点被删除)· "add to queue"（添加新节点到队列中）的链接文本: - (可选。如果希望出现这个链接就输入一个链文本)· "remove from queue" （从队列删除节点）的链接文本: - (可选。用法同上。)· 类型- 将在节点队列中使用的Content type（内容类型） 比如(勾选我们刚才新建的“新闻”类型)· 点击Submit（提交）按钮。 添加节点到节点队列:5 打开Nodequeue（节点队列）管理页面：Admin（管理）> Content management（内容管理）> Nodequeue（节点队列）, 找到刚才新建的Nodequeue（节点队列）。6 队列 注意:要想添加节点到队列里面，你只需要打出某个节点的标题的头几个字母或字，如果找到匹配的，剩余的就会自动列出来 然后再在列出的节点列表里面选择一个就行了。7 8 现在输入你要添加的节点标题吧9 从d出的列表中选择你要添加的节点。4 选择区块类型-views - Queue '高级轮播用的节点队列'Click the Add Instance button 配置使用节点队列的轮播区块1 打开DDBlock管理页面：Administer（管理员）> Site configuration（站点配置）> Dynamic display block2 在你的区块列表中找到“基于节点队列的轮播”3 点击配置区块Follow the detailed instruction of thePreprocess functionsDdblock free themes and export files:Download the free Dynamic display block theme files and Dynamic display block export files at thedownloadpage The preprocess function code is already a package in the Export_fileszipDynamic display block themesFollow the detailed instruction of theDynamic display block theme pageNote:Follow the instructions at thePreprocess functionspage In this case, we use another view name aside from the default view_name news item in the preprocess functionUncomment the drupal_set_message lines at the top of the two preprocess function[theme_name]_preprocess_ddblock_cycle_block_content and[theme_name]_preprocess_ddblock_cycle_pager_contentDisplay advanced Dynamic display block slideshow:Follow the detailed instruction on how toDisplay advanced Dynamic display block slideshowNote:In the how to display Dynamic display block slideshow tutorial page, the block name should be Ddblock slideshow using nodequeue instead of ddblock-News item slideshow

下面是使用html+css+js(javascript)来完成轮播图功能的简单例子，有兴趣的可以看一下。

1首先创建一个html文件，下图中我创建的是html5的，所以看起来很简单。

2然后在html的主体部分添加一个div标签，然后在该标签下添加一个img标签，并设置img的宽高。

3然后我们可以在html头部标题下添加css样式代码来控制div的显示效果。

4接下来在body标签中添加js的事件onload，也就是加载该页面的时候，调用onload的值对应的方法，图中的话就是init()。再为img添加一个id属性，这样我们可以通过getElementById(id值)来得到该元素标签。

5然后通过

先看App运行效果:

react-native中有专门实现轮播图的模块Swiper,和引入React的方式一样,通过import方式引入:

轮播图上方的标题'狗狗的家',用Text控件实现由于render方法中不能同时返回多个控件,所以需要将Swiper和Text通过一个View来封装

轮播图中的狗,猫,熊三张都是通过网络异步加载,通过添加isShow属性来对网络加载结果进行不同渲染,请求成功后,才进行Swiper控件的渲染

其中items用来存放的地址
在componentDidMount方法中添加地址,并通过setState方法,重新调用控件的render方法:

详细请参看 Demo

喜欢和关注都是对我的支持和鼓励~

*** 作如下：

到店铺的卖家中心点击“店铺装修”

进入装修首页，把鼠标放在在轮播模块上，模块即显示出“编辑”按钮

点击“编辑”进入轮播编辑页面：

在上图中，箭头所指的框内输入宝贝链接，当点击轮播的时页面跳转到链接指定的网页。

1、登入淘宝——卖家中心，点击空间。
2、点击上传——通用上传。
3、选择分类（要上传到哪个分类下，有助于查看。没有合适的，也可以点击创建分类），点击添加
4、选择要上传的——确定
5、点击回到管理
6、复制空间中的连接
和店铺首页中的宝贝连接地址（点击这张轮播，会跳到哪个宝贝详情页或其他页面）
7、在桌面新建一个TXT格式的文档，将连接都黏贴其内
8、登入卖家中心——店铺装修，在右侧模块点击在此处添加新模块——添加“轮播”
9、点击编辑
10、设置——保存
1模块标题可以更改，可以显示、也可以不显示。不显示就直接在模块标题处留空白。
2选择合适的模块高度，找不到合适的，点击下拉框——自定义，输入高度值。
3切换效果，根据个人要求选择。
4点击添加，可增添数量。将地址和连接地址（链接地址就是点击这张轮播，会跳到哪个宝贝详情页或其他页面）黏贴到指定区域。
11、最后点击发布

---