您的位置:首页 > 其它

PlusSlider 2个焦点图,一个可以固定图片宽和高一个显示实际大小

2014-05-26 08:48 567 查看

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐