Question

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

我正在使用Page Slider中的Image滑块。当我试图使用相同的图像滑块与页面幻灯片3的不同图像时，它无法正常工作。请帮助将是伟大的欣赏。

我对Jquery并不擅长，所以我做了很多研究而没有运气......

                            <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="kitchen2">
                   <script type="text/javascript"> 
                  $(function(){
                var options = {
                firstImageIndex: 0,
                borderWeight: 0 },
                                                                            params = {
                            sources: [
                            {
                                    preview: 'images/previews/1.jpg',
                original: 'images/originals/1.jpg',}, 
                                    {
                                                                preview: 'images/previews/2.jpg',
                original: 'images/originals/2.jpg',}, 
                                    {
                                                                preview: 'images/previews/3.jpg',
                original: 'images/originals/3.jpg',}, 
                                    {
                                                                preview: 'images/previews/4.jpg',
                original: 'images/originals/4.jpg',}
                       ]
                };
                $( '.photocradle' ).photocradle( params, options );
                                 }); </script>
                            </div>

                            <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>

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

链接是http://theshoaibahmed.com/jquery.photocradle-0.4.2.js

这里是我想要实现的目标的链接

http://www.theshoaibahmed.com/roman/

如果您注意到我使用了

photocradle。$ area = $（''） .appendTo（$（“＃kitchen2”））;

我可以使用什么选项，所以如果我必须使用另外3个不同尺寸的图像滑块，我就可以使用它。

Answer 1

那是因为你在同一页面上有2个不同的div具有相同的名称类，而且photocradle会混淆应该附加哪个代码。

这样做：

<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 );

Answer 2

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

http://www.theshoaibahmed.com/roman/

Jquery与Sliing页面和滑动图像

2 个答案: