效果如下：

首先看下一下佈局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <!-- 廣告條的使用 -->

    <com.xuliugen.viewpager.MyViewPagerTransformerAnim
 
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <!-- 廣告條下邊的文字 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
 

        android:background="#33000000"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/image_desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/app_name"
 

            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <LinearLayout
            android:id="@+id/point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="5dp"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

效果很簡單，從佈局檔案中我們看到使用了一個自定義的ViewPager動畫，程式碼如下：

package com.xuliugen.viewpager;

import java.util.HashMap;
import java.util.Map;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

import com.nineoldandroids.view.ViewHelper;

/*
 * 自定義viewpager實現動畫切換效果：
 * 
 * 1、需要拿到當前切換的兩個view
 * 
 * 2、一個動畫的梯度值
 */
public class MyViewPagerTransformerAnim extends ViewPager {

    private View mLeft;
    private View mRight;

    private float mTrans;
    private float mScale;

    private static final float MIN_SCALE = 0.6f;
    private Map<Integer, View> mChildren = new HashMap<Integer, View>();

    /*
     * 要有兩個構造方法
     */
    public MyViewPagerTransformerAnim(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyViewPagerTransformerAnim(Context context) {
        super(context);
    }

    /*
     * 設定put的方法
     */
    public void setViewForPosition(View view, int position) {
        mChildren.put(position, view);
    }

    /*
     * remove的方法
     */
    public void removeViewFromPosition(Integer position) {
        mChildren.remove(position);
    }

    /**
     * 重寫的方法
     */
    @Override
    protected void onPageScrolled(int position, float offset, int offsetPixels) {

        // Log.e("TAG", "position =" + position + ",offset = " + offset);
        mLeft = mChildren.get(position);
        mRight = mChildren.get(position + 1);

        animStack(mLeft, mRight, offset, offsetPixels);// 建立動畫效果

        super.onPageScrolled(position, offset, offsetPixels);
    }

    private void animStack(View left, View right, float offset, int offsetPixels) {
        if (right != null) {

            // 從0-1頁，offset:0`1
            mScale = (1 - MIN_SCALE) * offset + MIN_SCALE;

            mTrans = -getWidth() - getPageMargin() + offsetPixels;

            ViewHelper.setScaleX(right, mScale);
            ViewHelper.setScaleY(right, mScale);

            ViewHelper.setTranslationX(right, mTrans);
        }
        if (left != null) {
            left.bringToFront();
        }
    }
}

MainActivity.java

package com.xuliugen.viewpager;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    private ViewPager viewPager;

    private LinearLayout pointGroup;

    private TextView iamgeDesc;

    // 圖片資源ID
    private final int[] imageIds = { R.drawable.a, R.drawable.b, R.drawable.c,
            R.drawable.d, R.drawable.e };

    // 圖片標題集合
    private final String[] imageDescriptions = { "鞏俐不低俗，我就不能低俗",
            "撲樹又回來啦！再唱經典老歌引萬人大合唱", "揭祕北京電影如何升級", "樂視網TV版大派送", "熱血屌絲的反殺" };

    private ArrayList<ImageView> imageList;

    /**
     * 上一個頁面的位置
     */
    protected int lastPosition;

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

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        pointGroup = (LinearLayout) findViewById(R.id.point_group);
        iamgeDesc = (TextView) findViewById(R.id.image_desc);
        iamgeDesc.setText(imageDescriptions[0]);

        imageList = new ArrayList<ImageView>();
        for (int i = 0; i < imageIds.length; i++) {

            // 初始化圖片資源
            ImageView image = new ImageView(this);
            image.setBackgroundResource(imageIds[i]);
            imageList.add(image);

            // 新增指示點
            ImageView point = new ImageView(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);

            params.rightMargin = 20;
            point.setLayoutParams(params);

            point.setBackgroundResource(R.drawable.point_bg);
            if (i == 0) {
                point.setEnabled(true);
            } else {
                point.setEnabled(false);
            }
            pointGroup.addView(point);
        }

        viewPager.setAdapter(new MyPagerAdapter());

        // viewPager.setCurrentItem(Integer.MAX_VALUE/2 -
        // (Integer.MAX_VALUE/2%imageList.size())) ;

        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            /**
             * 頁面切換後呼叫 
             * position  新的頁面位置
             */
            public void onPageSelected(int position) {

                position = position % imageList.size();

                // 設定文字描述內容
                iamgeDesc.setText(imageDescriptions[position]);

                // 改變指示點的狀態
                // 把當前點enbale 為true
                pointGroup.getChildAt(position).setEnabled(true);
                // 把上一個點設為false
                pointGroup.getChildAt(lastPosition).setEnabled(false);
                lastPosition = position;

            }

            @Override
            /**
             * 頁面正在滑動的時候，回撥
             */
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {
            }

            @Override
            /**
             * 當頁面狀態發生變化的時候，回撥
             */
            public void onPageScrollStateChanged(int state) {

            }
        });

        /*
         * 自動迴圈： 1、定時器：Timer 2、開子執行緒 while true 迴圈 3、ColckManager 4、 用handler
         * 傳送延時資訊，實現迴圈
         */
        isRunning = true;
        // 設定圖片的自動滑動
        handler.sendEmptyMessageDelayed(0, 3000);
    }

    /**
     * 判斷是否自動滾動
     */
    private boolean isRunning = false;

    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {

            // 讓viewPager 滑動到下一頁
            viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
            if (isRunning) {
                handler.sendEmptyMessageDelayed(0, 3000);
            }
        };
    };

    protected void onDestroy() {

        isRunning = false;
    };

    private class MyPagerAdapter extends PagerAdapter {

        @Override
        /**
         * 獲得頁面的總數
         */
        public int getCount() {
            return Integer.MAX_VALUE; // 使得圖片可以迴圈
        }

        @Override
        /**
         * 獲得相應位置上的view
         * container  view的容器，其實就是viewpager自身
         * position     相應的位置
         */
        public Object instantiateItem(ViewGroup container, int position) {

            // System.out.println("instantiateItem  ::" + position);

            // 給 container 新增一個view
            container.addView(imageList.get(position % imageList.size()));
            // 返回一個和該view相對的object
            return imageList.get(position % imageList.size());
        }

        @Override
        /**
         * 判斷 view和object的對應關係 
         */
        public boolean isViewFromObject(View view, Object object) {
            if (view == object) {
                return true;
            } else {
                return false;
            }
        }

        @Override
        /**
         * 銷燬對應位置上的object
         */
        public void destroyItem(ViewGroup container, int position, Object object) {
            // System.out.println("destroyItem  ::" + position);

            container.removeView((View) object);
            object = null;
        }
    }

}

另外我們看效果圖可以看出，效果圖下邊的幾個原點是變化的，所以我們需要一個selector，如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/point_nomal" android:state_enabled="false"/>
    <item android:drawable="@drawable/point_focured" android:state_enabled="true"/>

</selector>

另外其他資源請免費下載：