Question

我希望有人可以帮助我解决我遇到的Jquery问题。我正试图找到一种方法，使用next和back按钮将多个内容加载到div中。

这是一张图片来解释：

Jquery Slideshow Picture http://www.lindsaygross.com/shared/slideshow.png

这是一个投资组合。理想情况下，我希望这样做是当用户点击左侧或右侧的绿色箭头时，它将其下方的所有客户端内容（.clientbox中的所有内容，包括照片幻灯片）更改为另一个具有.clientbox类的div。

我完全乐于接受有关更好的结构方式的建议。我曾经想过尝试让客户端导航从其他本地html页面中提取.clientbox信息，但我没有任何运气，我已经尝试过了。

有人有什么想法吗？我完全坚持这个。

以下是我正在使用的代码：

    <div class="container_24 slider_clients">

<!-- Top Slider Navigation to rotate clients -->
<span class="grid_1 prefix_4">
        <a id="mainlf_slidenav" class="left"></a>
    </span>

  <span class="grid_12 prefix_1 slider_headertxt">
    <p>Client Number 1</p>
    </span>

  <span class="grid_1 prefix_1">
    <a id="mainrt_slidenav" class="right"></a>
    </span>

<!-- END Top Slider Navigation to rotate clients --> 

    <div class="clientbox">

    <div id="slides" class="clear_left">


    <div class="grid_2 clear_left">
        <!-- "previous slide" button --> 
        <a class="prev" id="sublf_slidenav"></a> <!-- Affects the <li> for each image in slider_background -->
    </div>


        <span class="grid_20 slider_background slides_container"> <!-- DIV FOR PHOTOS OF EACH CLIENT -->

                <img src="images/logo.png" alt="Client Image 1" /> 
                <img src="images/slider_nav.png" alt="Client Image 2" /> 
                <a><img src="#" alt="Client Image 3" />THE IMAGE WILL GO HERE IN PLACE OF THIS TEXT</a>
                <img src="#" alt="Client Image 4" />

        </span> <!-- END slider_background -->


    <div class="grid_2">
        <!-- "next slide" button --> 
        <a id="subrt_slidenav" class="next"></a> <!-- Affects the <li> for each image in slider_background -->
    </div>


        <span class="clear_left">
        <span id="slider_objective" class="grid_9 prefix_2">

            <h2>Objective:</h2>
            <p>Design a website that engages visitors with a fun, yet professional, tone while drawing interest in the array of products offered by Nspire and connecting visitors tot he people who make up the company through the use of social media.</p>

        </span> <!-- END slider_objective -->

        <span id="slider_cultivated" class="grid_11 prefix_1">

            <h2>What We Cultivated:</h2>
            <ul>
                <li>Fun & Professional tone by using strategic copywriting</li>
                <li>Latest blog posts widget that dynamically pulled posts</li>
                <li>Twitter integration showing the most recent tweet</li>
                <li>Salesforce CRM integration with forms</li>
                <li>Interactive product descriptions</li>
            </ul>

        </span> <!-- END slider_cultivated -->

        </span> <!-- END clear_left -->

    </div> <!-- END slides -->


</div> <!-- END clientbox -->

</div> <!-- END div container_24 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>

我正在使用的jquery用于slider.js：

<script language="javascript">
$(function(){
  $("#slides").slides({
    next: 'next'
  });
});
</script>

Answer 1

看起来我能够使用Jquery Cycle来进行嵌套幻灯片放映。感谢Chrisdpratt的帮助。

使用Jquery将内容加载到div中

1 个答案: