非常好用的无限轮播

在GitHub看到一个非常好用的无限轮播分享给大家
地址:https://github.com/youth5201314/banner(其实他们提供的方法已经很简单了,在这个里我在更简化一下。)
依赖库(配置完成才可以实用)

dependencies{
    compile 'com.youth.banner:banner:1.4.9'  //最新版本
}

在清单文件里面配置权限

<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" /> 

<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

布局设置
这里可以使用自带的Banner布局当然也可以自己定义ImageView来加载图片(这里以自带布局为例子)

<com.youth.banner.Banner
   <!-- 这里的宽和高都可以根据自己需求来设置的-->
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="200dp" />

之前工作准备好重点来了
这里面重写图片加载器:就是把获取到的图片进行可视化加载在图片上
这里Imageloader和Glide都可以实现当然还有更多方法
重写加载的方法

public class GGG extends com.youth.banner.loader.ImageLoader {
    private ImageLoader imageloader;
    private DisplayImageOptions options;
    /**
    *由于这里在布局使用了Banner所以我重写了GGG()方法来加载图片提供了两种比较实用的加载图片的方法
    *
    */

    public GGG(Context context) {
        //创建默认的ImageLoader配置参数
//        ImageLoaderConfiguration configuration = ImageLoaderConfiguration
//                .createDefault(context);
//
//        //将configuration配置到imageloader中
//        imageloader= ImageLoader.getInstance();
//        imageloader.init(configuration);
//
//        options=new DisplayImageOptions.Builder()
//                .cacheInMemory(true)
//                .cacheOnDisk(true)
//                .bitmapConfig(Bitmap.Config.ARGB_8888)
//                .showImageOnLoading(R.mipmap.ic_launcher)
//                .showImageForEmptyUri(R.mipmap.ic_launcher)
//                .showImageOnFail(R.mipmap.ic_launcher)
//                .imageScaleType(ImageScaleType.EXACTLY)
//                .build();
//
//使用Glide加载图片
        Glide.with(context);
    }
    //这个是必须实现的重写方法如果你用的是ImageView来展示图片的话可以把参数传进去然后回调
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        Glide.with(context).load(path).into(imageView);

    }

}

最后是要通过从网络请求获取图片网址加载便可以如果是本地图片可以创建一个数组如:

Integer[] images={R.mipmap.a,R.mipmap.b,R.mipmap.c};

从网络上请求来的图片

public class MainActivity extends AppCompatActivity {
    private List<Data.DataBean> list;
    private Banner banner;
    private List<String> lists;
    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
           Data data= (Data) msg.obj;
            list.addAll(data.getData());
        for (int i=0;i<list.size();i++){
            lists.add(list.get(i).getImgSrc());
        }

            banner.setImages(lists);
            banner.start();
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        banner = (Banner) findViewById(R.id.banner);
        list=new ArrayList<>();
        lists=new ArrayList<>();

//读取图片轮播

        new Thread(){
            @Override
            public void run() {
                super.run();
                getData();
            }
        }.start();

        //设置图片加载器
        banner.setImageLoader(new GGG(this));
        //设置显示样式
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
        //设置圆点位置  左右中
        banner.setIndicatorGravity(BannerConfig.LEFT);

        banner.setBannerAnimation(Transformer.ScaleInOut);
    }

    private void getData() {
        try {
            String path="http://zkread.com/htnewsroom/articles/tops";
            URL url = new URL(path);
            HttpURLConnection urls= (HttpURLConnection) url.openConnection();
            urls.connect();
            if (urls.getResponseCode()==200){
                InputStream in = urls.getInputStream();
                int len=-1;
                byte [] buffer=new byte[1024];
                StringBuffer sb = new StringBuffer();
                while ((len=in.read(buffer))!=-1){
                    sb.append(new String(buffer,0,len));
                }
                Log.e("Tag","GGGGGGGGG"+sb.toString());
                Gson gson = new Gson();
                Data data = gson.fromJson(sb.toString(), Data.class);
//                把集合里面的值给
                Message msg= Message.obtain();
                msg.what=1;
                msg.obj=data;
                handler.sendMessage(msg);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

其实仅仅需要遍历集合把用到图片地址专门放到集合里面然后条用banner.setImages方法
和设置图片加载器让图片显示以及一些基本的样式(在这里看懂基本思路可以去上面提供的网址看更实用详细的方法。以及设置轮播样式)

    //设置图片加载器
        banner.setImageLoader(new GGG(this));
    banner.setImages(lists);
            banner.start();

以上就是简单的无限轮播实现的方法
这里是实现Glide和ImageLoader加载图片的简单方法:http://blog.csdn.net/qiaoshi96_bk/article/details/73350541

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用JavaScript和jQuery实现HTML无限的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无限</title> <style> #slider { width: 500px; height: 300px; overflow: hidden; position: relative; } #slider img { width: 500px; height: 300px; position: absolute; } #slider .btn { width: 20px; height: 20px; background-color: #fff; border-radius: 50%; position: absolute; bottom: 20px; cursor: pointer; } #slider .btn:hover { background-color: #ccc; } #slider .btn.prev { left: 20px; } #slider .btn.next { right: 20px; } </style> </head> <body> <div id="slider"> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> <img src="img/1.jpg" alt=""> <img src="img/2.jpg" alt=""> <img src="img/3.jpg" alt=""> <img src="img/4.jpg" alt=""> <img src="img/5.jpg" alt=""> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(function() { var slider = $('#slider'); var imgWidth = slider.find('img').eq(0).width(); var len = slider.find('img').length; var index = 0; var timer; // 自动轮 function autoPlay() { timer = setInterval(function() { index++; if (index === len) { slider.css('left', 0); index = 1; } slider.animate({left: -index * imgWidth}, 500); }, 2000); } autoPlay(); // 鼠标悬停停止轮 slider.hover(function() { clearInterval(timer); }, function() { autoPlay(); }); // 左右按钮控制轮 slider.find('.prev').click(function() { index--; if (index === -1) { slider.css('left', -(len - 1) * imgWidth); index = len - 2; } slider.animate({left: -index * imgWidth}, 500); }); slider.find('.next').click(function() { index++; if (index === len) { slider.css('left', 0); index = 1; } slider.animate({left: -index * imgWidth}, 500); }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值