wordpress怎么实现图片轮播？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4005 天前的主题，其中的信息可能已经有所发展或是发生改变。

看到一个站长的博客（链接：http://www.wanghaida.com/）特喜欢他网站上面那张动态的大图想弄到自己博客上。但是不知道怎么实现。也搜索了，搞了很长时间了，实在解决不了。我是新手。通过谷歌的审查元素，看他是用三张静态图实现的幻灯效果。我通过引用他上面的代码，在我的博客上是一张静态图。后来又弄了一个Nivo Slider插件，还是没有实现。实在没办法了，希望大家帮忙解答下，感激不尽.我用的是国外的免费空间，用来学习。（地址：http://mianfei8.comoj.com/)

轮播

WordPress

链接

16 条回复 • 2015-03-06 23:08:00 +08:00

qiayue

2013-12-07 11:45:42 +08:00

他用的是大前端开源的主题 http://www.daqianduan.com/

如果你只是想要图片轮播的话，去搜索幻灯片插件

yangyouzhi

2013-12-07 11:56:43 +08:00

@qiayue 我想实现他的那种效果，我用的也是那主题。

ccbikai

2013-12-07 12:21:22 +08:00 via Android

只想说他把主题改的好差

手机上边

chairuosen

2013-12-07 12:24:00 +08:00

以此兴趣为动力，学习Js去吧，你会爱上前端的

Zhang

2013-12-07 12:25:20 +08:00

学js吧

yangyouzhi

2013-12-07 12:53:53 +08:00

@Zhang
@chairuosen
@ccbikai
@qiayue 你们先教我怎么解决可以吗？各种搜索，实在解决不了。不管是用代码，还是用插件都没有调用起来。我用的他这代码显示的只是静态图...
<section class="container">
<div class="banner banner-site"><style type="text/css">#banner{width:100%;height:250px;overflow:hidden;}.index_4{width:100%;height:250px;background:rgb(186,63,55) url(http://blog.wanghaida.com/static/img/banner-2013.jpg) no-repeat center center;}.index_3{width:100%;height:250px;background:#354f0e url(http://blog.wanghaida.com/static/img/3.jpg) no-repeat center center;}.index_2{width:100%;height:250px;background:#8f6f18 url(http://blog.wanghaida.com/static/img/2.jpg) no-repeat center center;}.index_1{width:100%;height:250px;background:#5b1a3c url(http://blog.wanghaida.com/static/img/1.jpg) no-repeat center center;}</style>
<div id="banner" class="slideshow" style="position: relative;">
<div class="index_1" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 1320px; height: 250px;"></div>
<div class="index_2" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 1320px; height: 250px;"></div>
<div class="index_3" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 1320px; height: 250px;"></div>
</div></div>
</section>

tayuo

2013-12-07 12:59:19 +08:00

http://html5maker.com 做好了iframe上去...

不是办法的办法

lemonda

2013-12-07 13:25:12 +08:00

http://jquery.malsup.com/cycle/
fade 效果，只能帮到这了
顺嘴问下D8主题付费了么？
http://www.daqianduan.com/theme/d8

emric

2013-12-07 13:27:27 +08:00

http://gist.github.com/7837601

yangyouzhi

2013-12-07 14:45:54 +08:00

@tayuo 还是不会。。。

yangyouzhi

2013-12-07 14:54:49 +08:00

@tayuo 在线制作好，怎么用？

yangyouzhi

2013-12-07 15:06:19 +08:00

[iframe height="200" width="1024" src="http://cdn.html5maker.com/8810bbd2be297a53de15d45e072c98b7eb80832eef.html" frameborder="0" scrolling="no"]


这应该放在哪个文件里？

tayuo

2013-12-07 15:26:57 +08:00

你主题文件index.php或header.php相应的位置。

<iframe height="200" width="1024" src="http://cdn.html5maker.com/8810bbd2be297a53de15d45e072c98b7eb80832eef.html" frameborder="0" scrolling="no"></iframe>

yangyouzhi

2013-12-07 16:30:09 +08:00

@tayuo 太谢谢你了，总算可以了

yangyouzhi

2013-12-07 17:49:12 +08:00

没有他那博客效果好。。。。

igfw

2015-03-06 23:08:00 +08:00

有空再来看看，看着不好整