简体   繁体   中英

setting jquery cycle plugin

I am trying to use a simple slideshow using jquery cycle plugin and It dosen't work and I really don't understand what I am missing?

Here is my code:

 <script src="js/1.5.2/jquery.min.js" type="text/javascript"></script>  
 <script src="js/jquery.easing.min.js" type="text/javascript"></script> 
 <script src="jquery.cycle.all.js" type="text/javascript"></script>

This is the script:

 <script type="text/javascript">
        $('#s2').cycle({
            fx: 'scrollDown',
            easing: 'easeOutBounce',
            delay: -2000
        });
    </script>

CSS:

 <style type="text/css">

    .pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
    position:absolute;
    left:520px;
    top:120px;
} 

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
} 
</style>

These are the Images:

    <div id="s2" class="pics">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />

            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />

            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />

    </div>

it works for me. see my jsfiddle

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM