使用jQuery循环插件循环遍历div答案

【问题标题】：Using jQuery cycle plugin to cycle through divs使用jQuery循环插件循环遍历div
【发布时间】：2014-05-04 08:24:09
【问题描述】：

我正在尝试循环浏览通过 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 确实已加载，我正在使用此链接来确保正确加载循环插件

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

!!!!!!!!!! * 已解决 * !!!!!!!!!!

wordpress 中存在 jQuery 冲突。它有两个版本的 jQuery 同时运行

【问题讨论】：

你能提供一个jsfiddle吗？
这是一个 jsfiddle：jsfiddle.net 它在那里工作，但不在我的网站上？我正在调查可能的冲突。
抱歉链接错误 - jsfiddle.net/txhPK

标签： jquery jquery-cycle

【解决方案1】：

如果你改变了，你只是使用了错误的选择器

$('.slideshow')

到

$('.slider')

它应该可以工作：http://jsfiddle.net/cchana/kenWK/

【讨论】：

是的，对不起，我复制了错误的源代码 - 使用 $('.slider') 不起作用。

【解决方案2】：

您在 Jquery 选择器中引用了错误的选择器。

<script type="text/javascript">
    $(document).ready(function () {
        $('.slider').cycle({
            fx: 'fade'
        });
    });
</script>

应该这样做。

并且不要忘记关闭您以标签开头的第一个 div。你的 sn-p 没有显示出来。

【讨论】：