PlusSlider 2個焦點圖，一個可以固定圖片寬和高一個顯示實際大小

PlusSlider 2個焦點圖，一個可以固定圖片寬和高一個顯示實際大小

演示

 

XML/HTML Code

<div id="slider">

                <div data-title="PlusSlider" class="slide1">
                    <div>
                        <h2>PlusSlider</h2>
                        <p>
                            A content slider that simply works...<br />
                            The right way
                        </p>
                    </div>
                </div>

                <a data-title="Tree" href="#"><img src="images/tree.jpg" alt="" height="250" width="351" /></a>

                <img data-title="Sunset" src="images/clouds.jpg" alt="" height="134" width="630" />

                <img data-title="Stop Sign" src="images/image4.jpg" alt="" height="250" width="630" />

            </div>
            <br /><br />
            <div id="slider2">


                <a href="#"><img src="images/image2.jpg" alt="" height="250" width="630" /></a>

                <img src="images/image3.jpg" alt="" height="250" width="630" />


                <img src="images/image4.jpg" alt="" height="250" width="630" />

            </div>


        </div>
    </div>

 

JavaScript Code

<script type="text/javascript">
    $(document).ready(function(){

        $('#slider').plusSlider({
            autoPlay: false,
            sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin
            paginationPosition: 'append',
            sliderType: 'slider' // Choose whether the carousel is a 'slider' or a 'fader'
        });

        $('#slider2').plusSlider({
            autoPlay: false,
            displayTime: 2000, // The amount of time the slide waits before automatically moving on to the next one. This requires 'autoPlay: true'
            sliderType: 'fader', // Choose whether the carousel is a 'slider' or a 'fader'
            width: 500, // Overide the default CSS width
            height: 250 // Overide the default CSS width
        });

        $('#slider3').plusSlider({
            sliderEasing: 'easeInOutExpo', // Anything other than 'linear' and 'swing' requires the easing plugin
            fullWidth: true,
            autoPlay: false,
            sliderType: 'slider' // Choose whether the carousel is a 'slider' or a 'fader'
        });

    });
    </script>

 

原文地址:http://www.freejs.net/article_jiaodiantu_150.html