实现京东首页的轮播广告效果,包含三个以上产品广告

用于高校Android studio课程课后作业实例,如无必要,请勿抄袭

目前很多APP中都有这个图片轮播的功能,项目中也时常会用到,图片轮播一般是在用户不主动进行切换的时候每隔一段时间进行自动切换,用户主动切换时停止自动切换,手指离开时重新计时开始轮播,下面我们就来实现这个功能

目录

实例代码

activity_mian.xml

view_flipper_left_out.xml

view_flipper_right_out.xml

view_flipper_page1.xml

MainActivity.java

实例代码

activity_mian.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top|fill"
    android:alignmentMode="alignMargins"
    android:background="#eeeeee"
    android:columnCount="4"
    android:rowCount="2">
    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:flipInterval="3000"
        android:inAnimation="@anim/view_flipper_right_in"
        android:outAnimation="@anim/view_flipper_left_out">
        <include layout="@layout/view_flipper_page1" />
        <include layout="@layout/view_flipper_page2" />
    </ViewFlipper>
    <Button
        android:id="@+id/button_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="开始" />
    <Button
        android:id="@+id/button_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="停止" />
    <Button
        android:id="@+id/button_previous"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="上一页" />
    <Button
        android:id="@+id/button_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1.0"
        android:text="下一页" />
</GridLayout>

view_flipper_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

view_flipper_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />
</set>

view_flipper_page1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:srcCompat="@mipmap/img_1656" />
</LinearLayout>

MainActivity.java

package com.vt.(/  *# /);

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {
private ViewFlipper mVewFlipper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View view3 = View.inflate(MainActivity.this, R.layout.view_flipper_page3, null);
        ImageView imageView4 = new ImageView(this);
        imageView4.setAdjustViewBounds(true);
        imageView4.setImageResource(R.mipmap.img_9546);
        mVewFlipper = findViewById(R.id.view_flipper);
        mVewFlipper.addView(imageView4);
        mVewFlipper.addView(view3,2);
        mVewFlipper.startFlipping();
        mVewFlipper.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "当前显示的子视图索引号为"+mVewFlipper.getDisplayedChild(), Toast.LENGTH_SHORT).show();
            }
        });
        Button startBtn = findViewById(R.id.button_start);
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.startFlipping();
            }
        });
        Button stopBtn = findViewById(R.id.button_stop);
        stopBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.stopFlipping();
            }
        });
        Button previousBtn = findViewById(R.id.button_previous);
        previousBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.showPrevious();
            }
        });
        Button nextBtn = findViewById(R.id.button_next);
        nextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mVewFlipper.showNext();
            }
        });
    }
}

最后运行代码显示如图轮播图,多添加几张图片显示效果即可

同学们,交了学费一定要好好学习啊,抄来抄去终究害己

加关注点赞,感谢!!!

注意:直接复制代码使用时 ,请添加自己的背景图片和修改文件名,其他报错请留言

如有需要定制微信小程序,海报设计,logo设计的,请添加小哥VX:Doi000101,备注来意

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,以下是一个简单的基于JavaScript实现轮播效果: HTML部分: ```html <div class="slider-container"> <div class="slider-wrapper"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> <div class="slider-controls"> <button class="prev-button">Prev</button> <button class="next-button">Next</button> </div> </div> ``` CSS部分: ```css .slider-container { position: relative; overflow: hidden; width: 100%; height: 400px; } .slider-wrapper { position: absolute; display: flex; width: 400%; height: 100%; transition: all 0.5s ease-in-out; } .slider-wrapper img { width: 25%; height: 100%; } .slider-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .slider-controls button { margin: 0 10px; } ``` JavaScript部分: ```javascript const sliderWrapper = document.querySelector('.slider-wrapper'); const prevButton = document.querySelector('.prev-button'); const nextButton = document.querySelector('.next-button'); let slideIndex = 0; function showSlide(index) { sliderWrapper.style.transform = `translateX(-${index * 25}%)`; } function nextSlide() { slideIndex++; if (slideIndex > 3) { slideIndex = 0; } showSlide(slideIndex); } function prevSlide() { slideIndex--; if (slideIndex < 0) { slideIndex = 3; } showSlide(slideIndex); } nextButton.addEventListener('click', nextSlide); prevButton.addEventListener('click', prevSlide); ``` 代码解释: 1. 首先,我们从HTML中获取到轮播图的容器和两个控制按钮。 2. 然后,定义一个变量 `slideIndex` 来表示当前显示的轮播图的下标,初始值为0。 3. 接着,我们定义两个函数 `showSlide` 和 `nextSlide`,用来切换轮播图。其中,`showSlide` 函数接受一个下标参数 `index`,根据该下标来显示相应的轮播图。`nextSlide` 函数则将 `slideIndex` 加1,如果超过了轮播图的总数,则重置为0,并调用 `showSlide` 函数来显示相应的轮播图。 4. 同理,我们定义一个 `prevSlide` 函数来实现向前切换轮播图的功能。 5. 最后,我们将 `nextSlide` 和 `prevSlide` 函数分别绑定到两个控制按钮的点击事件上。点击按钮时,会触发相应的函数来切换轮播图。 这样,一个简单的基于JavaScript实现轮播效果就完成了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值