css3 slide滑动焦点图 文字或者图片均支持

css3 slide滑动焦点图 文字或者图片均支持

 

演示

 

 

XML/HTML Code

<div class="slider">
            <ul class="slides">
                <li class="slide"><div class="box" style="background-color: #1abc9c;"></div></li>
                <li class="slide"><div class="box" style="background-color: #16a085;"></div></li>
                <li class="slide"><div class="box" style="background-color: #f1c40f;"></div></li>
                <li class="slide"><div class="box" style="background-color: #f39c12;"></div></li>
                <li class="slide"><div class="box" style="background-color: #d35400;"></div></li>
                <li class="slide"><div class="box" style="background-color: #c0392b;"></div></li>
            </ul>
        </div>

 

JavaScript Code

<script type="text/javascript">
            var glide = $('.slider').glide().data('api_glide');

                $(window).on('keyup', function (key) {
                    if (key.keyCode === 13) {
                        glide.jump(3, console.log('Wooo!'));
                    };
                });

                glide.afterChange(function() {
                    alert('lelele');
                });

                $('.slider-arrow').on('click', function() {
                    console.log(glide.current());
                });
        </script>

 

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