1.Android-自定义轮播Banner-Viewpaper2实现+贪吃蛇原点指示器+触摸暂停轮播处理
2.Axure怎么使用动态面板制作banner轮播?播源播图
3.IT大神求 麦考林 主页轮播图效果jQuery，就是码轮码百叶窗效果

Android-自定义轮播Banner-Viewpaper2实现+贪吃蛇原点指示器+触摸暂停轮播处理

       在上一篇文章《MonkeyLei：更全的ViewPager2使用方式总结与Glide加载问题》的基础上，我们继续优化自定义轮播Banner组件，源代详情已添加至GitHub项目github.com/FanChael/MVV...中的播源播图lib_banner模块。

       展示的码轮码轮播效果已经相当完善，注重了内存优化，源代源码量值并可能还有待进一步完善细节和修复小问题。播源播图代码库中包含简洁的码轮码实现和注释，便于查阅。源代

       实现的播源播图关键点包括：

       自定义ViewGroup以添加圆角效果，通过测量布局调整内部Viewpaper2的码轮码margin，确保内容在圆角内显示。源代重写dispatchDraw方法完成最终绘制。播源播图时机源码

       设计指示器绘制，码轮码考虑位置和颜色变化，源代结合ViewPager2的OnPageChangeCallback，实现贪吃蛇效果，通过判断位置和滚动距离动态调整。

       触控暂停轮播：利用Viewpaper2提供的回调机制，当手指按下时停止轮播，避免直接处理TouchEvent，因为ViewPaper2不支持继承。

       虽然目前满足项目需求，但仍有提升空间。你可以根据项目需求进一步扩展为组件库，鳕鱼源码甚至开源分享。我最近忙于面试准备，所以暂未继续深化这个组件。我的MVVM工程中已经自定义了两个组件，未来会继续完善它们。

       以上内容可供参考，期待你的创新与改进。

Axure怎么使用动态面板制作banner轮播?

       Axure就不多介绍了，一般对产品岗位比较了解的都知道，常用的原型工具。这里为大家做一个用动态面板做简单的banner轮播的方法。

一、复权源码基础准备工作

       1、打开Axure，页面名称命名为轮播；在左侧部件（线框图）中，选择动态面板，左键选中，并按住左键，拖动其至工作台页面中，如图，在上方菜单栏将宽调整为，高为（宽高根据个人需求来自行设置）

       2、双击建立的动态面板，弹出动态面板状态管理窗口。abstract源码给当前动态面板起名字为轮播；在面板状态区域，点击+增加状态，需要有几个轮播，建立几个状态，在每个状态上，右键，可重命名，当前我们做三个轮播的，命名为图1图2图3。完成后，点击窗口的确定按钮。

       3、在右侧窗口下方部件管理，双击动态面板的状态图1；（注意，如果看不到部件管理，可以在菜单栏的视图-面板设置）；在左侧的部件，左键选中并拖动一个放置于当前的工作窗口中。

       4、双击的图标，弹出选择的路径框，这里大家选择需要轮播的就可以了，将选中后确认即可在工作台窗口打开；这里需要大家注意，如果的边缘位于当前状态框（虚线）的外面，需要拖动当前到虚线内，或者过大的需要裁剪（选中，右键可裁剪），或者调整大小，能将放置于虚线框内，否则完成后的原型会无法显示全等问题。

       5、设置完成图1后，我们需要用同样的方法设置图2和图3，这里不细说了

       6、三个均设置完成后，点击左侧上方的轮播页面，返回主页面，这里我们可以看到之前的动态面板已经默认显示图1的了。

二、轮播的动态面板设置步骤

       1、选中动态工作页面的动态面板，在右侧部件交互和注释的载入时右键，选择新增用例，弹出窗口用例编辑器

       2、在用例编辑器窗口动态面板，选择设置面板状态。

       3、在第四步配置动作，选中设置轮播，前面会表示，表示选中；在选中状态选择next（表示正序轮播）previous（表示倒叙轮播）；并选中下面的从最后一个到第一个自动循环（这样才能实现一直轮播）；可以选择循环间隔时间，亦可以默认不设置。

       4、进入时，退出时的动画可以根据需求自行设置，我这里选择了一个进入时，向右滑动，完成后，点击确定按钮。

       5、可以F5预览，或者生成原型文件，部分浏览器不支持的，建议大家默认IE。ok了，完成。

IT大神求 麦考林 主页轮播图效果jQuery，就是百叶窗效果

       看源码是用Slider Revolution插件实现的

       源文件的实现代码

jQuery(document).ready(function() {

        api =  jQuery('.fullwidthbanner').revolution(

        {

        delay:,

        startheight:,

        startwidth:,

        hideThumbs:,

        thumbWidth:, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)

        thumbHeight:,

        thumbAmount:6,

        navigationType:"bullet", //bullet, thumb, none, both (No Thumbs In FullWidth Version !)

        navigationArrows:"verticalcentered", //nexttobullets, verticalcentered, none

        navigationStyle:"round", //round,square,navbar

        touchenabled:"on", // Enable Swipe Function : on/off

        onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off

        navOffsetHorizontal:0,

        navOffsetVertical:0,

        stopAtSlide:-1,

        stopAfterLoops:-1,

        shadow:0, //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)

        fullWidth:"on" // Turns On or Off the Fullwidth Image Centering in FullWidth Modus

        });

         

       });

       根据他们官网写了个实现demo 具体下载附件