我正在尝试循环遍历通过WordPress动态生成的几个div。
无论我尝试什么,这些div都无法进行轮播或滑动,我无法弄清楚原因。
目前的源代码如下:
<div class="slider">
<div class="servicesslider">
<a href="link1">
<div class="slidertext">
<h1 class="sliderhead">Text1</h1>
<p>Body copy</p>
</div>
<img width="450" height="270" src="imglink" class="attachment-front-page-services wp-post-image" alt="alt" title="title" />
</a>
</div>
<div class="servicesslider">
<a href="link2">
<div class="slidertext">
<h1 class="sliderhead">Text2</h1>
<p>More body copy.</p>
</div>
<img width="450" height="270" src="imglink" class="attachment-front-page-services wp-post-image" alt="alt" title="title" />
</a>
</div>
CSS(层叠样式表):
.slider {width:1000px; height:400px; overflow:hidden; position:relative;}
.servicesslider {width:900px; height:300px; padding:50px; overflow:hidden; float:left; position:absolute; background:red;}
.servicesslider a {text-decoration:none;}
.attachment-front-page-services {width:450px; height:270px; background:#fff; border:10px solid #fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow: 5px 5px 7px #4f4f4f;}
.slidertext {font-family: Eurostyle; color:#ffffff; text-decoration:none; float:left; margin-right:20px; width:400px;}
.sliderhead {font-size:50px;}
.sliderhead a {color:#ffffff; text-decoration:none;}
使用最简单版本的jQuery来让任何事情发生。
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
jQuery已经加载成功,我正在使用此链接确保cycle插件正确加载。
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
!!!!!!!!!! * 已解决 * !!!!!!!!!!
这是一个关于WordPress中jQuery冲突的问题。WordPress中同时运行两个版本的jQuery导致冲突。