简单实现轮播图和创建小圆点

public class OneFragment extends Fragment {
    private HorizontalScrollView hs;
    private LinearLayout linearLayout;
    private ViewPager viewPager;
    private ViewPager viewPagerlb;
    private boolean ismash;
    private ViewPagerAdapter adapter;
    private RelativeLayout relativeLayout2;
    private LinearLayout linearLayout2;
    private HttpUitls httpUitls;
    private int i;//接受当前的页
    private List<ImageView> imag_list = new ArrayList<>();
    private String[] title = {"头条", "娱乐", "科技", "信息", "八卦", "北京", "上海", "天津", "重庆", "美女"};
    private List<TextView> list;
    private String[] imags = {
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530147896&di=a108779183cfcf652d8b0e575326e3f1&imgtype=jpg&er=1&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F0bd162d9f2d3572ca715ccac8613632763d0c3cf.jpg",
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1109914389,2791689143&fm=27&gp=0.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530148203&di=f76108132220d420f20e670007cbfc7c&imgtype=jpg&er=1&src=http%3A%2F%2Ff10.topitme.com%2Fo042%2F10042332873d775e7b.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529553529652&di=b620d433ed2c93c296e1bf5434594399&imgtype=0&src=http%3A%2F%2Fgame.ahgame.com%2Fuploads%2Fallimg%2F171120%2F1-1G120102133.jpg",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529553594735&di=4133e5bb6f4221acbc673d0518e34ed6&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1706558701%2C1505343713%26fm%3D214%26gp%3D0.jpg"
    };
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            //接受当前的位置
            i = viewPagerlb.getCurrentItem();
            //改变页的选中
            viewPagerlb.setCurrentItem(i+1);
            handler.sendEmptyMessageDelayed(0,2000);
        }
    };
    //单列模式
    public static  Fragment getInstance(String title){
        //创建Fragment1
       OneFragment oneFragment = new OneFragment();
        //创建bundle
        Bundle bundle = new Bundle();
        //添加值
        bundle.putString("title",title);
        //把值添加到Arguments中
         oneFragment.setArguments(bundle);
        return oneFragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.onefragment, container, false);
        hs = view.findViewById(R.id.hs);
        linearLayout = view.findViewById(R.id.linearLayout);
        linearLayout2 = view.findViewById(R.id.ll);
        relativeLayout2  = view.findViewById(R.id.f_relativelayout);
        viewPager = view.findViewById(R.id.viewPager);
        viewPagerlb = view.findViewById(R.id.viewpagerlp);

        //创建集合
        list = new ArrayList<>();
        //遍历取到数组里的内容
        for (int i = 0; i < title.length; i++) {
            //创建TextView 循环添加到集合中去
            TextView textView = new TextView(getActivity());
            textView.setText(title[i]);//取到数组
            textView.setTextSize(24);//textVie文字的大小
            textView.setId(i + 10000);//数组的长度
            //给textView设置点击监听
            textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int id = v.getId();
                    viewPager.setCurrentItem(id - 10000);
                }
            });
            //刚进程序第一个默认红色,其他为黑色
            if (i == 0) {
                textView.setTextColor(Color.RED);//字体颜色设置为红色
            } else {
                textView.setTextColor(Color.BLACK);//字体颜色设置为黑色
            }
            //c创建一个LinearLayout
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.setMargins(20, 10, 20, 10);//设置间距
            //添加到布局中
            linearLayout.addView(textView, layoutParams);
            //添加到集合
            list.add(textView);
            //设置适配器
          Myadapter myadapter = new Myadapter(getChildFragmentManager(), list, getActivity());
            viewPager.setAdapter(myadapter);
            //viewPager的滑动监听
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                    //list中存的是 textview
                    for (int i = 0; i < list.size(); i++) {
                        if (position == i) {
                            list.get(i).setTextColor(Color.RED);
                        } else {
                            list.get(i).setTextColor(Color.BLACK);
                        }
                    }
                    //获取当前的textview
                    TextView textView = list.get(position);
                    //width是每次滑动的距离
                    int width = textView.getWidth() + 10;
                    //让scrollView滑动   滑动距离是textview之间的间距
                    hs.scrollTo(width * position, 0);
                }
                @Override
                public void onPageSelected(int position) {
                }
                @Override
                public void onPageScrollStateChanged(int state) {
                }
            });
        }
            return view;
        }
     @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //得到网络的状态
        //ismash = MyNetwork.getInStance().ismash(getActivity());
        // Bundle arguments = getArguments();
         //取值赋值
         initview();
         adapter = new ViewPagerAdapter(imags,getActivity(),handler);
         viewPagerlb.setAdapter(adapter);
         //开始轮播
         handler.sendEmptyMessageDelayed(1, 2000);
         //滑动选择对应的图片
         viewPagerlb.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
             @Override
             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
             }
             @Override
             public void onPageSelected(int position) {
                 for (int i = 0; i < imag_list.size(); i++) {
                     if (i == position % imag_list.size()) {
                         imag_list.get(i).setSelected(true);
                     } else {
                         imag_list.get(i).setSelected(false);
                     }
                 }
             }
             @Override
             public void onPageScrollStateChanged(int state) {
             }
         });
    }
    //创建小圆点
    private void initview() {
        for (int i =0; i < imags.length;i++){
            //创建图片
            ImageView imageView = new ImageView(getActivity());
            //设置选择器
            imageView.setImageResource(R.drawable.selectorimge);
            linearLayout2.addView(imageView);
            //添加到集合
            imag_list.add(imageView);
        }
        //设置默认选中的远点
        imag_list.get(0).setSelected(true);
    }


}
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:layout_height="wrap_content">
    <HorizontalScrollView
        android:id="@+id/hs"
        android:layout_width="match_parent"
        android:scrollbars="none"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/linearLayout"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </LinearLayout>
    </HorizontalScrollView>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_below="@+id/hs"
        android:layout_height="50dp">
    </android.support.v4.view.ViewPager>
    </LinearLayout>
   
这是使用了Fragment、嵌套实现的一个简单的轮播图

 <RelativeLayout
        android:id="@+id/f_relativelayout"
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpagerlp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"></android.support.v4.view.ViewPager>
        <LinearLayout
            android:id="@+id/ll"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_height="30dp"></LinearLayout>
    </RelativeLayout>


适配器

public class ViewPagerAdapter extends PagerAdapter {
    private String[] image;
    private Context context;
    private Handler handler;

    public ViewPagerAdapter(String[] image, Context context,Handler handler) {
        this.image = image;
        this.context = context;
        this.handler = handler;
    }
    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        ImageLoader.getInstance().displayImage(image[position%image.length],imageView,MyApplocation.getOptions());

        imageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    //按下
                    case MotionEvent.ACTION_DOWN:
                        handler.removeCallbacksAndMessages(null);
                        break;
                    //移动
                    case MotionEvent.ACTION_MOVE:
                        handler.removeCallbacksAndMessages(null);
                        break;
                    //抬起
                    case MotionEvent.ACTION_UP:
                        handler.sendEmptyMessageDelayed(0,2000);
                        break;
                    //结束
                    case MotionEvent.ACTION_CANCEL:
                        handler.sendEmptyMessageDelayed(0,2000);
                        break;
                }
                return true;
            }
        });
        container.addView(imageView);

        return imageView;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }
}


以下是一个简单实现轮播图片并带有小圆点的JS代码示例: HTML部分: ```html <div class="slider"> <div class="slider-images"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <div class="slider-dots"></div> </div> ``` CSS部分: ```css .slider { position: relative; } .slider-images { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slider-images img.active { opacity: 1; } .slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; } .slider-dots button { width: 10px; height: 10px; margin: 0 5px; border: none; border-radius: 50%; background-color: gray; cursor: pointer; } .slider-dots button.active { background-color: white; } ``` JS部分: ```js const sliderImages = document.querySelectorAll('.slider-images img'); const sliderDots = document.querySelector('.slider-dots'); let currentImageIndex = 0; // 创建小圆点按钮 for (let i = 0; i < sliderImages.length; i++) { const button = document.createElement('button'); button.addEventListener('click', () => { showImage(i); }); sliderDots.appendChild(button); } // 显示指定索引的图片和按钮 function showImage(index) { sliderImages[currentImageIndex].classList.remove('active'); sliderDots.children[currentImageIndex].classList.remove('active'); currentImageIndex = index; sliderImages[currentImageIndex].classList.add('active'); sliderDots.children[currentImageIndex].classList.add('active'); } // 自动轮播 setInterval(() => { let nextIndex = currentImageIndex + 1; if (nextIndex >= sliderImages.length) { nextIndex = 0; } showImage(nextIndex); }, 3000); // 显示第一张图片和按钮 showImage(0); sliderDots.children[0].classList.add('active'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值