轮播图+原点图标

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.handmark.pulltorefresh.library.PullToRefreshScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/psv">
        <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:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:id="@+id/my_viewpager">

                </android.support.v4.view.ViewPager>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:id="@+id/my_point"
                    android:gravity="center"

                    android:layout_gravity="bottom"></LinearLayout>
            </FrameLayout>
            <wangguifa.bwie.com.all.MyListview
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/my_listview"
                >

            </wangguifa.bwie.com.all.MyListview>
        </LinearLayout>
    </com.handmark.pulltorefresh.library.PullToRefreshScrollView>

</LinearLayout>

//fragment

public class MessageFragment extends Fragment {

    private ListView listview;
    private ViewPager viewpager;
    private LinearLayout point;
    private List<Humen.DataBean> list = new ArrayList<>();
    private List<String> lists = new ArrayList<>();
    private PullToRefreshScrollView psv;
    private int typeInt = 0;
    private int pageInt = 1;
    private int vpint = 50;
    private ListAdapter adapter;
    private List<ImageView> img_lists = new ArrayList<>();
    private String netString = "http://www.yulin520.com/a2a/impressApi/news/mergeList?pageSize=10&page="+pageInt;
    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(msg.what==1){
                vpint++;
                viewpager.setCurrentItem(vpint);
                selectPoint(vpint);
                handler.sendEmptyMessageDelayed(1,1000);
            }
        }
    };
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.message_layout, container, false);
        listview = v.findViewById(R.id.my_listview);
        viewpager = v.findViewById(R.id.my_viewpager);
        point = v.findViewById(R.id.my_point);
        psv = v.findViewById(R.id.psv);
        return v;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        initViewPager();
        initPoint();
        initPsv();
        requestData();
    }

    private void selectPoint(int s){
        for (int i = 0; i < img_lists.size(); i++) {
            if (i==s%img_lists.size()){
                img_lists.get(i).setImageResource(R.drawable.selected_point);
            }else {
                img_lists.get(i).setImageResource(R.drawable.unselected_point);
            }
        }
    }
    private void initPoint() {
        for (int i = 0; i <lists.size() ; i++) {
            ImageView imageView = new ImageView(getActivity());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(0,0,5,0);
            imageView.setLayoutParams(params);
            if(i==0){
                imageView.setImageResource(R.drawable.selected_point);
            }else {
                imageView.setImageResource(R.drawable.unselected_point);
            }
            point.addView(imageView);
            img_lists.add(imageView);
        }
    }

    private void initViewPager() {
        /*lists.add("http://m.xxxiao.com//wp-content//uploads//sites//3//2016//07//m.xxxiao.com_56a78d0a3cfd0e39b31fd11ac709ad4f-683x1024.jpg");
        lists.add("http://image.hnol.net//c//2016-10//31//15//20161031151544351-5349024.jpg");
        lists.add("http://image.hnol.net//c//2016-07//02//21//201607022155295131-2381913.jpg");
        lists.add("http://image.hnol.net//c//2016-07//03//16//201607031631335861-1559530.jpg");
        //http:\/\/m.xxxiao.com\/wp-content\/uploads\/sites\/3\/2016\/07\/m.xxxiao.com_05e810073b50fb8a8d17a8ed483e8490-683x1024.jpg
        lists.add("http://m.xxxiao.com//wp-content//uploads//sites//3//2015//12//m.xxxiao.com_558c0bb213ae3cfb4e5d783636f03388-760x500.jpg");*/
        lists.add("http://f.expoon.com//sub//news//2016//01//20//348021_230x162_0.jpg");
        lists.add("http://f.expoon.com//sub//news//2016//01//19//113912_230x162_0.jpg");
        lists.add("http://f.expoon.com//sub//news//2016//01//19//650175_230x162_0.jpg");
        lists.add("http://f.expoon.com//sub//news//2016//01//19//321787_230x162_0.jpg");
        lists.add("http://f.expoon.com//sub//news//2016//01//19//376254_230x162_0.jpg");
        viewpager.setAdapter(new MyVpAdapter(getActivity(),lists));
        viewpager.setCurrentItem(50);
        handler.sendEmptyMessageDelayed(1,1000);
    }

    private void initPsv() {
        psv.setMode(PullToRefreshBase.Mode.BOTH);
        psv.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener2<ScrollView>() {
            @Override
            public void onPullDownToRefresh(PullToRefreshBase<ScrollView> pullToRefreshBase) {
                typeInt = 0;
                pageInt = 1;
                netString = "http://www.yulin520.com/a2a/impressApi/news/mergeList?pageSize=10&page="+pageInt;
                new MyTask().execute(netString);
                psv.onRefreshComplete();
            }

            @Override
            public void onPullUpToRefresh(PullToRefreshBase<ScrollView> pullToRefreshBase) {
                typeInt = 1;
                pageInt++;
                netString = "http://www.yulin520.com/a2a/impressApi/news/mergeList?pageSize=10&page="+pageInt;
                new MyTask().execute(netString);
                psv.onRefreshComplete();
            }
        });
    }
    void requestData(){
        new MyTask().execute(netString);
    }
    class MyTask extends AsyncTask<String,Void,String>{
        @Override
        protected String doInBackground(String... strings) {
            String netData = NetUtils.getNetData(strings[0]);
            Log.i("zzz",netData);
            return netData;
        }

        @Override
        protected void onPostExecute(String s) {
            super.onPostExecute(s);
            Gson gson = new Gson();
            Humen humen = gson.fromJson(s, Humen.class);
            List<Humen.DataBean> data = humen.getData();

            if(typeInt==0){
                list.clear();
            }
            list.addAll(data);
            setAdapter();
        }
    }
    void setAdapter(){
        if(adapter==null){
            listview.setAdapter(new ListAdapter(getActivity(),list));
        }else {
            adapter.notifyDataSetChanged();
        }
    }
}
//activity
public class ShowActivity extends AppCompatActivity {


    private RadioGroup rg;
    private FrameLayout my_frame;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show);
        rg = findViewById(R.id.my_radio_group);
        my_frame = findViewById(R.id.my_frame);
        //view_pager.setAdapter();
        getSupportFragmentManager().beginTransaction().replace(R.id.my_frame,new ShowVpFragment()).commit();
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i){
                    case R.id.rg_01:
                        getSupportFragmentManager().beginTransaction().replace(R.id.my_frame,new ShowVpFragment()).commit();
                        break;
                    case R.id.rg_02:
                        getSupportFragmentManager().beginTransaction().replace(R.id.my_frame,new MessageFragment()).commit();
                }
            }
        });
    }


}

### JavaScript 实现轮播图中小圆点功能 要实现轮播图中的小圆点功能,可以通过以下方式完成: #### 1. 初始化小圆点并赋予编号 在初始化阶段,需要遍历所有的小圆点,并为其设置 `number` 属性来标记它们的顺序。这一步骤通常会在 DOM 加载完成后执行。 ```javascript for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; // 清除默认样式 ol.children[i].setAttribute('number', i + 1); // 设置从小圆点的编号,从1开始计数[^1] } ``` 上述代码片段展示了如何为每个小圆点分配唯一的编号属性 `number`,以便后续能够识别用户点击的是哪一个圆点。 --- #### 2. 绑定点击事件监听器 为了让小圆点具备交互能力,需为每一个小圆点绑定点击事件监听器。当某个小圆点被点击时,获取它的编号并将该编号作为索引来控制图片切换逻辑。 ```javascript for (var i = 0; i < ol.children.length; i++) { ol.children[i].addEventListener('click', function () { var index = this.getAttribute('number'); // 获取当前点击的小圆点对应的编号 switchImage(index - 1); // 假设有一个函数用于根据索引切换图片 }); } ``` 这里的关键在于通过 `this.getAttribute('number')` 方法动态捕获用户的操作意图,并将其转化为程序内部可理解的数据形式——即图片数组的索引位置。 --- #### 3. 图片切换的核心逻辑 假设存在一个名为 `switchImage()` 的方法负责处理实际的图片切换动作,则此方法可能如下定义: ```javascript function switchImage(targetIndex) { var currentSlide = document.querySelector('.active-slide'); if (currentSlide) { currentSlide.classList.remove('active-slide'); // 移除旧的激活状态 } var slides = document.querySelectorAll('.slide'); slides[targetIndex].classList.add('active-slide'); // 添加新的激活状态 updateDots(targetIndex); // 更新对应的小圆点高亮显示 } function updateDots(activeDotIndex) { var dots = document.querySelectorAll('.dot'); dots.forEach(function(dot) { dot.classList.remove('active-dot'); // 取消所有小圆点的选中状态 }); dots[activeDotIndex].classList.add('active-dot'); // 高亮当前活动的小圆点[^2] } ``` 这段代码描述了一个完整的图片切换流程:先找到当前正在展示的幻灯片并取消其激活标志,接着依据目标索引定位新幻灯片并应用激活标志,最后同步更新小圆点的状态以反映最新的视觉反馈。 --- #### 4. 自动轮播与手动干预机制 除了支持用户主动触发外,还可以引入定时器实现自动化播放行为。同时考虑到用户体验需求,在检测到鼠标悬停于轮播区域之上时应暂停自动播放过程;而一旦离开则恢复原有节奏继续运行下去。 ```javascript var intervalId; function startAutoPlay() { clearInterval(intervalId); intervalId = setInterval(function(){ nextSlide(); // 定义nextSlide函数推进至下一张图片 }, 3000); // 每隔三秒调用一次 } document.getElementById('carousel').addEventListener('mouseenter', stopAutoPlay); document.getElementById('carousel').addEventListener('mouseleave', startAutoPlay); function stopAutoPlay() { clearInterval(intervalId); } ``` 以上脚本提供了基本框架用来管理自动播放周期以及响应外部干扰情况下的调整策略[^4]。 --- ### 总结 综上所述,利用 JavaScript 编写具有互动性的轮播组件并不复杂,关键是合理规划各个组成部分之间的协作关系,并注重细节上的打磨优化体验效果。具体而言就是做好以下几个方面的工作: - 对象初始化(包括但不限于元素选取、变量声明等前期准备工作) - 用户输入捕捉及其解析转换成系统可用参数的过程设计 - 数据驱动视图变更的具体算法构思与编码实践 - 边界条件考虑充分与否直接影响最终产品质量的好坏程度 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值