关于Bunner简单框架加载网络图片轮播。

1、先来一张效果图


下边的图片是自己加载的本地的图片。上边的图片是无限轮播的。

使用的时候需要添加依赖:

compile 'com.youth.banner:banner:+'
compile 'com.github.bumptech.glide:glide:3.8.0'
还有添加网络权限

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

2、

activity_main中:

<com.youth.banner.Banner
    android:id="@+id/main_banner"
    android:layout_width="match_parent"
    android:layout_height="400px" />
3、

mainActivity中:

public class MainActivity extends AppCompatActivity {

    private Banner banner;
    //将网址存入到数组中
    private String[] imageUrl2 = {"http://www.eoeandroid.com/data/attachment/forum/201107/18/142935bbi8d3zpf3d0dd7z.jpg",
            "http://p2.so.qhmsg.com/t012260d3b41f75fd6c.jpg",
            "http://p4.so.qhmsg.com/t013ffda9265fda17e9.jpg",
    "http://p1.so.qhmsg.com/t01eb38aed4329fff56.jpg",
    "http://p3.so.qhmsg.com/t018bad5bce1c4ad613.jpg"};
    private List<String> urlList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        urlList = new ArrayList<String>();
        //把数组中的数据添加到集合中去

for
(int i = 0; i < imageUrl2.length; i++) { urlList.add(imageUrl2[i]); } banner = (Banner) findViewById(R.id.main_banner); //设置间隔 banner.setDelayTime(3000); //添加图片 banner.setImages(urlList);
        //设置图片加载的方式(这里是用的glide
 banner.setImageLoader(new BannerImageLoader()); Log.d("image", urlList+"onCreate: "); //banner加点 banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR); //点居中 banner.setIndicatorGravity(Banner.TEXT_ALIGNMENT_CENTER); //点击事件 banner.setOnBannerClickListener(new OnBannerClickListener() { @Override public void OnBannerClick(int position) { //页面的点击跳转 Toast.makeText(MainActivity.this, "页面的点击跳转详情", Toast.LENGTH_SHORT).show(); } }); banner.start(); }}
4、创建图片加载的方式

BannerImageLoader

public class BannerImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {

        Glide.with(context).load(path).into(imageView);
    }
}

如果是加载本地图片的话

把本地图片添加到一个集合中去。

格式例如:

private int[] imageUrl = {R.drawable.x,R.drawable.e,R.drawable.w,R.drawable.q,R.drawable.v};
然后把数据中的数据通过for循环添加到集合中去,在这里集合的泛型必须是Integer类型的。

urlList = new ArrayList<Integer>();
for (int i = 0; i < imageUrl.length; i++) {
    urlList.add(imageUrl[i]);
}












  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学成在线网页轮播banner部分的代码可能会有所不同,这里提供一种常见的实现方式,基于Bootstrap框架和jQuery库: HTML部分: ```html <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/slide1.jpg" class="d-block w-100" alt="slide1"> </div> <div class="carousel-item"> <img src="img/slide2.jpg" class="d-block w-100" alt="slide2"> </div> <div class="carousel-item"> <img src="img/slide3.jpg" class="d-block w-100" alt="slide3"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> ``` CSS部分: ```css .carousel-item { height: 500px; } .carousel-item img { height: 100%; width: 100%; object-fit: cover; } ``` JavaScript部分: ```javascript $(document).ready(function() { // 初始化轮播图 $('.carousel').carousel({ interval: 3000, // 每隔3s自动切换 keyboard: true, // 允许使用键盘控制 pause: 'hover' // 鼠标悬停时自动暂停 }); }); ``` 这段代码实现了一个基本的轮播图,包括三张图片、左右箭头和底部的圆点指示器。您可以根据需要修改图片路径、样式和配置参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值