图片自动变换

public class ShouyeFragment extends Fragment {
    // 声明定时器Handle
    private int flag = 0; // 标示viewpage 滑动到第几个item
    private static final int ANIMATION_TIMES = 2500;// 定时的时间间隔
    private Handler myHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 0:
                    souyouviewPager
                            .setCurrentItem(flag = ((flag + 1) % fragments.length));
                    myHandler.sendEmptyMessageDelayed(0, ANIMATION_TIMES);
                    break;
                default:
                    break;
            }
        }
    };
    // 声明ViewPager和LinearLayout
    private ViewPager souyouviewPager;
    private LinearLayout souyoulinearLayout;
    // 声明Fragment数组
    private Fragment[] fragments;
    // 声明IMG数组
    private ImageView[] imgs;
public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        // 关联ViewPager的空间方法
        initViewpager();
        // ViewPager适配器
        souyouviewPager.setAdapter(new MyViewpagerAdpater(
                getChildFragmentManager()));
        // ViewPager滑动监听
        souyouviewPager
                .setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

                    @Override
                    public void onPageSelected(int arg0) {
                        selectorDian(arg0);
                        // 当监听到滑动时,从当前Item继续定时
                        flag = arg0;
                        myHandler.removeMessages(0);
                        myHandler.sendEmptyMessageDelayed(0, ANIMATION_TIMES);
                    }

                    @Override
                    public void onPageScrolled(int arg0, float arg1, int arg2) {

                    }

                    @Override
                    public void onPageScrollStateChanged(int arg0) {
                    }
                });
        myHandler.sendEmptyMessageDelayed(0, ANIMATION_TIMES);
    }

    // 关联控件
    private void initViewpager() {
        //关联子项
        souyouviewPager = (ViewPager) getActivity()
                .findViewById(R.id.SYviewpager);
        souyoulinearLayout = (LinearLayout) getActivity().findViewById(
                R.id.souye_Viewpager_dian);
        int count = souyoulinearLayout.getChildCount();
        imgs = new ImageView[count];
        for (int i = 0; i < imgs.length; i++) {
            imgs[i] = (ImageView) souyoulinearLayout.getChildAt(i);
        }
        //声明Fragment数组
        fragments = new Fragment[4];
        fragments[0] = new SY_Fragment1();
        fragments[1] = new SY_Fragment2();
        fragments[2] = new SY_Fragment3();
        fragments[3] = new SY_Fragment4();
        for (int i = 0; i < imgs.length; i++) {
            //子项监听
            imgs[i].setEnabled(true);
            imgs[i].setTag(i);
            imgs[i].setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View arg0) {
                    int item = (Integer) arg0.getTag();
                    souyouviewPager.setCurrentItem(item);
                    selectorDian(item);
                    flag = item;
                    myHandler.removeMessages(0);
                    myHandler.sendEmptyMessageDelayed(0, ANIMATION_TIMES);
                }
            });
        }
        imgs[0].performClick();
    }

    private void selectorDian(int index) {
        for (int i = 0; i < imgs.length; i++) {
            imgs[i].setBackgroundResource(R.drawable.dot1);
            imgs[i].setEnabled(true);  //设为可选中
        }
        imgs[index].setBackgroundResource(R.drawable.dot2);
        imgs[index].setEnabled(false); //设为不可选中
    }

    //ViewPager适配器设置
    class MyViewpagerAdpater extends FragmentPagerAdapter {

        public MyViewpagerAdpater(FragmentManager ftm) {
            super(ftm);
        }

        @Override
        public Fragment getItem(int arg0) {
            return fragments[arg0];
        }

        @Override
        public int getCount() {
            return imgs.length;
        }
    }
}
在对应的布局文件中
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
   <android.support.v4.view.ViewPager
        android:id="@+id/SYviewpager"
        android:layout_width="match_parent"
        android:layout_height="150dp"/>
    <LinearLayout
        android:id="@+id/souye_Viewpager_dian"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginLeft="150dp"
        android:layout_marginTop="130dp"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
</FrameLayout>
效果图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery图片自动切换</title> <script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script> <style type="text/css"> *{ margin:0; padding:0; border:0; list-style:none} img{ display:block; border:0} body{ padding:50px;} .switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;} .switch .pic_box{width:320px; height:255px; position:relative;} .switch .pic_box li{ width:320px; height:255px; float:left; position:absolute} .switch .pic_box li .pic{ width:320px; height:255px;} .switch .pic_box li .pic img{ width:320px; height:230px;} .switch .pic_box li .txt{ display:block; width:320px; height:25px; font-size:13px; overflow:hidden; line-height:25px; text-align:center; overflow:hidden; color:#666666} .switch .btn_box{ width:320px; height:25px; float:right; background:#2B2B2B} .switch .btn_box li{ border:1px solid #333333; width:23px; height:23px; float:left; background:#CCCCCC; cursor:pointer; line-height:25px; overflow:hidden; text-align:center; font-weight:700} </style> </head> <body> <div class="switch"> <ul class="pic_box"> <li id="pic1"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/1.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">京津渝等28城市获批用公积金建保障房</a></li> <li id="pic2" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/2.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">俄大火逼近绝密核设施 毒雾笼罩莫斯科</a></li> <li id="pic3" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/3.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">银监会清查银行3000项收费 叫停点钞费</a></li> <li id="pic4" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/4.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">鸭绿江干流现超警戒洪水 东北强降雨减弱 </a></li> <li id="pic5" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/5.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">美国防部确定华盛顿号航母将参加黄海军演</a></li> </ul> <ul class="btn_box"> <li style="background:#FF0000">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(".btn_box li").css('backgroundColor','#eeeeee'); $(".btn_box li").eq(0).css('backgroundColor','#FF0000'); //获取图片总数 var len = $(".btn_box li").size(); //设置默认显示图片 var index = 1; $(".btn_box li").click(function(){ index = $(".btn_box li").index(this); showimg(index); }); // $(".btn_box").hover(function(){ if (myTime){ clearInterval(myTime); } },function(){ myTime = setInterval(function(){ index++; if(index>=len){ index=0; } showimg(index); },4000); }); //自动开始切换 var myTime = setInterval(function(){ showimg(index); index++; if (index>=len){ index=0; } },4000); }); //显示图片 function showimg(i){ $(".btn_box li").css('backgroundColor','#eeeeee'); $(".btn_box li").eq(i).css('backgroundColor','#FF0000'); $(".pic_box li").fadeOut(800); $("#pic"+$(".btn_box li").eq(i).text()).fadeIn(800); } </script> 来源www.vihchina.net
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值