Javascript 带滑动页面和滑动图像的Jquery

我刚刚完成了5个滑动页面站点，每个页面我都有图像滑块

我在页面滑块中使用图像滑块。当我尝试在第3页的不同图像中使用相同的图像滑块时，它不起作用。请帮忙，我将不胜感激

我不擅长Jquery，所以我做了很多研究，但运气不好

---

$（函数（）{
变量选项={
firstImageIndex:0，
边界权重：0}，
参数={
资料来源：[
{
预览：“images/previews/1.jpg”，
原文：'images/originals/1.jpg'，}，
{
预览：“images/previews/2.jpg”，
原文：'images/originals/2.jpg'，}，
{
预览：“images/previews/3.jpg”，
原文：'images/originals/3.jpg'，}，
{
预览：“images/previews/4.jpg”，
原文：'images/originals/4.jpg'，}
]
};
$（'.photoradle'）.photoradle（参数，选项）；
}); 

$（函数（）{
变量选项={
firstImageIndex:0，
边界权重：0}，
参数={
资料来源：[
{
预览：“images/previews/5.jpg”，
原文：'images/originals/5.jpg'，}，
{
预览：“images/previews/6.jpg”，
原文：'images/originals/6.jpg'，}，
{
预览：“images/previews/7.jpg”，
原文：'images/originals/7.jpg'，}，
{
预览：“images/previews/8.jpg”，
原文：'images/originals/8.jpg'，}
]
};
$（'.photoradle'）.photoradle（参数，选项）；
}); 

我使用了下面的方法，在第一个页面滑块上，我得到2个图像重叠，我需要3个不同大小的3个页面滑块中的3个小图像

链接是

这里是我试图实现的目标和没有实现的目标的链接

如果你注意到我用过

光电雷达。$面积=$（''） 。附件（$（“#厨房2”）

---

我可以使用什么选项，如果我必须使用3个不同大小的图像滑块，我就可以使用它。

这是因为在同一页上有两个同名类的不同div，PhotoRadle不知道应该将代码附加到哪个div

这样做：

<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

-

---

下面是我尝试上述技术时的链接

---

我想你忘了添加jquery和jquery.photoradle-0.4.0.js的引用

                            <div id="address">
                            <img src="images/address.png" width="300" height="119" alt="address">
                            </div>

                            <div id="shop">
                            <img src="images/shop.jpg" width="300" height="225" alt="Shop">
                            </div>

                            <div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

                             <div id="kitchen3">
                   <script type="text/javascript"> 
                  $(function(){
                var options = {
                firstImageIndex: 0,
                borderWeight: 0 },
                                                                            params = {
                            sources: [
                            {
                                    preview: 'images/previews/5.jpg',
                original: 'images/originals/5.jpg',}, 
                                    {
                                                                preview: 'images/previews/6.jpg',
                original: 'images/originals/6.jpg',}, 
                                    {
                                                                preview: 'images/previews/7.jpg',
                original: 'images/originals/7.jpg',}, 
                                    {
                                                                preview: 'images/previews/8.jpg',
                original: 'images/originals/8.jpg',}
                       ]
                };
                $( '.photocradle' ).photocradle( params, options );
                                 }); </script>
                            </div>

<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

$( '#first' ).photocradle( params, options );

<div id="second" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>

$( '#second' ).photocradle( params, options );