安卓轮播图怎么让到最后一张的时候来

Posted 2023-04-26

参考技术A 　　利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换，其中当点击“上一张”图片时，切换到上一张图片；当点击“下一张”图片时，切换到下一张图片。其效果图如下：

　　ViewFlipper类和WindowManager类
　　animation动画效果translate和alpha
　　方法/步骤
　　1
　　设置布局文件，其内容如下：
　　activity_image_flipper_shade.xml
　　<?xml version="1.0" encoding="utf-8"?>
　　<RelativeLayout xmlns:android=""
　　xmlns:tools=""
　　android:layout_width="match_parent"
　　android:layout_height="match_parent"
　　android:background="@drawable/background"
　　android:paddingBottom="@dimen/activity_optopns_vertical_margin"
　　android:paddingLeft="@dimen/activity_options_horizontal_margin"
　　android:paddingRight="@dimen/activity_options_horizontal_margin"
　　android:paddingTop="@dimen/activity_optopns_vertical_margin"
　　tools:context=".ImageFlipperActivity" >
　　<RelativeLayout
　　android:id="@id/rl_image_flipper_shade_title"
　　android:layout_width="match_parent"
　　android:layout_height="wrap_content"
　　android:orientation="horizontal" >
　　<Button
　　android:id="@+id/btn_image_flipper_shade_back"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:layout_alignParentLeft="true"
　　android:layout_marginBottom="10dp"
　　android:background="@drawable/custom_button"
　　android:text="@string/back"
　　android:textColor="@color/textColor"
　　android:textSize="16sp"
　　android:visibility="visible" />
　　<TextView
　　android:id="@id/tv_image_flipper_shade_title"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:layout_centerInParent="true"
　　android:text="@string/image_flipper_shade"
　　android:textColor="@color/textColor"
　　android:textSize="30sp"
　　android:textStyle="bold" />
　　</RelativeLayout>
　　<LinearLayout
　　android:id="@id/ll_image_flipper_shade_content"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent"
　　android:layout_below="@id/rl_image_flipper_shade_title"
　　android:layout_marginBottom="20dp"
　　android:layout_marginTop="20dp"
　　android:gravity="center"
　　android:orientation="vertical" >
　　<ViewFlipper
　　android:id="@id/vf_image_flipper_shade"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent" />
　　</LinearLayout>
　　</RelativeLayout>
　　2
　　动画效果配置文件，其内容如下：
　　A.push_left_in.xml（从左边进入屏幕）
　　<?xml version="1.0" encoding="utf-8"?>
　　<set xmlns:android="" >
　　<!-- translate：画面转换位置移动动画效果 -->
　　<translate
　　android:duration="500"
　　android:fromXDelta="100%p"
　　android:toXDelta="0" />
　　<!-- alpha：渐变透明度动画效果 -->
　　<alpha
　　android:duration="500"
　　android:fromAlpha="0.1"
　　android:toAlpha="1.0" />
　　<!-- scale：渐变尺寸伸缩动画效果 -->
　　<!-- rotate：画面转换位置移动动画效果 -->
　　</set>
　　B.push_left_out.xml（从左边退出屏幕）
　　<?xml version="1.0" encoding="utf-8"?>
　　<set xmlns:android="http://schemas.android.com/apk/res/android" >
　　<translate
　　android:duration="500"
　　android:fromXDelta="0"
　　android:toXDelta="-100%p" />
　　<alpha
　　android:duration="500"
　　android:fromAlpha="1.0"
　　android:toAlpha="0.1" />
　　</set>
　　C.push_right_in.xml（从右边进入屏幕）
　　<?xml version="1.0" encoding="utf-8"?>
　　<set xmlns:android="http://schemas.android.com/apk/res/android" >
　　<translate
　　android:duration="500"
　　android:fromXDelta="-100%p"
　　android:toXDelta="0" />
　　<alpha
　　android:duration="500"
　　android:fromAlpha="0.1"
　　android:toAlpha="1.0" />
　　</set>
　　D.push_right_out.xml（从右边退出屏幕）
　　<?xml version="1.0" encoding="utf-8"?>
　　<set xmlns:android="http://schemas.android.com/apk/res/android" >
　　<translate
　　android:duration="500"
　　android:fromXDelta="0"
　　android:toXDelta="100%p" />
　　<alpha
　　android:duration="500"
　　android:fromAlpha="1.0"
　　android:toAlpha="0.1" />
　　</set>
　　Android实现图片轮播切换
　　3
　　实现图片轮播切换的类为ImageFlipperShadeActivity.java，其内容为：
　　/**
　　*
　　*/
　　package com.i114gbox.aglieguy;
　　import android.annotation.SuppressLint;
　　import android.content.Context;
　　import android.graphics.PixelFormat;
　　import android.os.Bundle;
　　import android.os.Handler;
　　import android.view.Gravity;
　　import android.view.MotionEvent;
　　import android.view.View;
　　import android.view.View.OnClickListener;
　　import android.view.WindowManager;
　　import android.view.WindowManager.LayoutParams;
　　import android.view.animation.AnimationUtils;
　　import android.widget.Button;
　　import android.widget.ImageView;
　　import android.widget.ViewFlipper;
　　import com.i114gbox.sdk.activity.I114gBoxActivity;
　　import com.i114gbox.sdk.utils.I114gBoxCollectActivityUtils;
　　import com.i114gbox.sdk.utils.I114gBoxLogUtils;
　　import com.i114gbox.sdk.utils.I114gBoxResourceUtils;
　　/**
　　* 图片滑动渐变Activity
　　*
　　* @author SJC
　　*
　　*/
　　public class ImageFlipperShadeActivity extends I114gBoxActivity
　　private static String TAG = "ImageFlipperShadeActivity";
　　private Context ctx = null;
　　private ViewFlipper viewFlipper;// 视图轮播
　　private WindowManager windowManager;// 窗口管理器
　　private WindowManager.LayoutParams layoutParams;// 布局参数
　　private boolean isHide;
　　private int mAlpha = 0;
　　// 左边图片视图
　　private ImageView leftImageView;
　　// 右边图片视图
　　private ImageView rightImageView;
　　private int WHAT_HIDE = 0;
　　private int WHAT_SHOW = 1;
　　@Override
　　protected void onCreate(Bundle savedInstanceState)
　　I114gBoxLogUtils.d(TAG, "The onCreate method execute.");
　　super.onCreate(savedInstanceState);
　　I114gBoxCollectActivityUtils.getInstance().addActivity(this);// 收集Activity
　　ctx = this;
　　setContentView(I114gBoxResourceUtils.getLayoutId(ctx,
　　"activity_image_flipper_shade"));
　　viewFlipper = (ViewFlipper) findViewById(I114gBoxResourceUtils.getId(
　　ctx, "vf_image_flipper_shade"));
　　viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
　　ctx, "flipper_01")));
　　viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
　　ctx, "flipper_02")));
　　viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
　　ctx, "flipper_03")));
　　viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
　　ctx, "flipper_04")));
　　viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
　　ctx, "flipper_05")));
　　viewFlipper.addView(addImageView(I114gBoxResourceUtils.getDrawableId(
　　ctx, "flipper_06")));
　　Button backButton = (Button) findViewById(I114gBoxResourceUtils.getId(
　　ctx, "btn_image_flipper_shade_back"));
　　backButton.setOnClickListener(new OnClickListener()
　　@Override
　　public void onClick(View v)
　　finish();
　　
　　);

js实现效果：循环轮播图

参考技术A

跟普通的左右切换轮播图类似，但是它看起来是首尾相连的。

首先来讲一下我的思路：
我们要想无缝切换图片，必须要在所有图片的最后添加一张第一张图片，因为要实现从最后一张切换到第一张时有过渡效果；
之后我们要让你处在第一张时，向前向后切换都要进行 隐式切换 。

我们也可以将所有的轮播图的图片外面套一层div，并设置绝对定位，然后使用 父相子绝 ，来让图片可以相对父元素定位（父元素就是装轮播图的盒子）

之后，只要我们让不该显示的图片定位到盒子范围外的位置（父元素设置overflow:hidden;），在需要切换图片时，我们就把当前图片前后的图片定位到对应位置，然后通过setInterval方法循环改变其位置实现轮播效果。之后更改当前图片的索引即可。