轮播图

//Main布局:
只有一个ViewPager;
//Main里:
//一个handler机制
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
if (msg.what == 0){
//viewPager显示下一页
vp.setCurrentItem(vp.getCurrentItem() +1);
//再次发送延时消息
handler.sendEmptyMessageDelayed(0,2000);
}
}
};
//一个ImageView类集合存放图片
List< ImageView> images;
//获取轮播图数据的方法
getDataFromNet();
【第一种方法————————-
//创建getDataFromNet方法获取轮播图数据
//异步的第二个方法里
if (s != null){//判断json数据是否为空
Gson gson = new Gson();
DataDataBean dataDataBean = gson.fromJson(s, DataDataBean.class);
final List< DataDataBean.DataBean> list = dataDataBean.getData();
//给viewPager设置适配器
MyAdapter myAdapter = new MyAdapter(MainActivity.this, list,handler);
//设置适配器
vp.setAdapter(myAdapter);
//3.根据集合的长度动态添加小圆点…linearLayout
initDoc(list);
//2.手动的可以无限滑动
vp.setCurrentItem(list.size()*100000);//设置当前展示中间某个足够大的位置
handler.sendEmptyMessageDelayed(0,2000);//发送一个延时的空消息
//viewPage设置监听事件
vp.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 < images.size();i++){
if (i == position%images.size()){
images.get(i).setImageResource(R.drawable.shape_01);
}else {
images.get(i).setImageResource(R.drawable.shape_02);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//动态添加小圆点的方法
private void initDoc(List< DataDataBean.DataBean> list) {
//1.需要一个集合记录一下小圆点的imageView控件
images = new ArrayList();
//2…linearLayout上面的视图清空一下再去添加
ll.removeAllViews();
for (int i=0;i< list.size();i++){
ImageView imageView = new ImageView(MainActivity.this);
if (i==0){
imageView.setImageResource(R.drawable.shape_01);
}else {
imageView.setImageResource(R.drawable.shape_02);
}
//添加到集合去
images.add(imageView);
//添加到线性布局上
//这是布局参数,,刚开始小圆点之间没有距离,所以使用java代码指定宽度高度,并且指定小圆点之间的距离
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(5,0,5,0);
ll.addView(imageView,params);
}
}
————————————— 】
**【第二种方法———————————————-
NetDataUtil.getData(“http://v3.wufazhuce.com:8000/api/reading/index/?version=3.5.0&platform=android“, MainActivity.this, new JsonStringCallaBack() {
@Override
public void getJsonString(String json) {
//这个结合记录轮播图的所有地址
List< String> list= new ArrayList< >();
Gson gson = new Gson();
LunBoBean lunBoBean = gson.fromJson(json, LunBoBean.class);
List< LunBoBean.DataBean.EssayBean> essay = lunBoBean.getData().getEssay();
for (LunBoBean.DataBean.EssayBean essayBean: essay) {
//essayBean.getAuthor().get(0).getWeb_url()
list.add(essayBean.getAuthor().get(0).getWeb_url());
}
//此时应该根据图片的路径,加载图片,设置适配器
ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity.this, imageUrlList);
vp.setAdapter(adapter);
//1.手动可以无限滑动….maxValue….把当前开始展示的位置放在足够大的某个位置
vp.setCurrentItem(imageUrlList.size()*100000);
//2.自动轮播
handler.sendEmptyMessageDelayed(0,2000);
}
});

】**
//适配器类 是PagerAdapter适配器
public class MyAdapter extends PagerAdapter{
Context context;
List< DataDataBean.DataBean> list;
Handler handler;
public MyAdapter(Context context, List< DataDataBean.DataBean> list, Handler handler) {
this.context = context;
this.list = list;
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(final ViewGroup container, int position) {
//创建一个ImageView类
ImageView iv = new ImageView(context);
//水平平铺整个个控件
iv.setScaleType(ImageView.ScaleType.FIT_XY);
//imageLoader加载图片到这个imageView控件上
ImageLoader.getInstance().displayImage(list.get(position %list.size()).getImg(),iv, ImageLoaderUtil.getDefaultOption());
//给imageView设置触摸的监听事件
iv.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
int action = motionEvent.getAction();//获取手指的动作
switch (action) {
case MotionEvent.ACTION_DOWN://按下的动作…应该取消发送消息的操作
handler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_MOVE://移动的动作
handler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_CANCEL://取消
//重新发送
handler.sendEmptyMessageDelayed(0, 2000);
break;
case MotionEvent.ACTION_UP://抬起的动作
handler.sendEmptyMessageDelayed(0, 2000);
break;
}
//返回true表示自己处理触摸事件
return true;
}
});
container.addView(iv);//添加到容器
//2.把当前展示的视图返回
return iv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//销毁视图
container.removeView((View) object);
}
}
//还有一个ImageLoaderUtil类和BaseApplation类
//下面是在drawable里创建两个xml设置小圆点
//创建时是;点击Drawable res… file(第一个),在下面选成shape;
shape_01.xml:(选中小圆点时)
< solid android:color=”#00ff00”/ >
< corners android:radius=”10dp”/>
< size android:height=”10dp”
android:width=”10dp”/>
shape_02.xml:(未选中小圆点时)
< solid android:color=”#ff0000”/>
< corners android:radius=”10dp”/>
< size android:height=”10dp” android:width=”10dp”/>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现轮片切换背景根据片颜色渐变的效果,可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码: HTML部分: ```html <div class="slideshow"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> </div> ``` CSS部分: ```css .slideshow { position: relative; } .slide { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slideshow img { width: 100%; height: auto; } .slideshow::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0)); z-index: -1; } ``` JavaScript部分: ```javascript const slides = document.querySelectorAll('.slide'); let currentIndex = 0; function changeSlide() { slides[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].classList.add('active'); } setInterval(changeSlide, 3000); ``` 上述代码中,通过CSS设置了轮容器的样式以及背景渐变效果。JavaScript部分实现了切换轮的逻辑,并使用setInterval函数定时调用changeSlide函数来切换片。每次切换片时,会为当前显示的片添加active类,从而使其显示出来。 你可以根据实际需要修改CSS样式和JavaScript代码,来适应你的项目需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值