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

最新推荐文章于 2024-09-18 10:39:38 发布

最新推荐文章于 2024-09-18 10:39:38 发布 · 259 阅读

文章标签：

#javascript #ViewUI

本文介绍使用CSS3Slide插件实现滑动焦点图的方法，包括XML/HTML结构定义及JavaScript交互逻辑。通过不同的背景颜色展示轮播效果，并且可以通过键盘回车键跳转到指定的轮播页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>  

  