Question

我正在尝试将图像列表逐个切换为数组中的剩余图像。我有一个包含15个图像的数组，我显示了6个图像，我需要逐个切换剩下的图像。

＆＃13;

package com.xengar.android.handleimage.ui;

import android.content.ClipData;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.DragShadowBuilder;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.widget.LinearLayout;

import com.xengar.android.handleimage.R;

/**
 * DragAndDropActivity
 */
public class DragAndDropActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drag_and_drop);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /*
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });*/

        findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());
        findViewById(R.id.myimage2).setOnTouchListener(new MyTouchListener());
        findViewById(R.id.myimage3).setOnTouchListener(new MyTouchListener());
        findViewById(R.id.myimage4).setOnTouchListener(new MyTouchListener());
        findViewById(R.id.topleft).setOnDragListener(new MyDragListener());
        findViewById(R.id.topright).setOnDragListener(new MyDragListener());
        findViewById(R.id.bottomleft).setOnDragListener(new MyDragListener());
        findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());

    }

    private final class MyTouchListener implements OnTouchListener {
        public boolean onTouch(View view, MotionEvent motionEvent) {
            if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                ClipData data = ClipData.newPlainText("", "");
                DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(
                        view);
                view.startDrag(data, shadowBuilder, view, 0);
                view.setVisibility(View.INVISIBLE);
                return true;
            } else {
                return false;
            }
        }
    }

    class MyDragListener implements OnDragListener {
        Drawable enterShape = getResources().getDrawable(
                R.drawable.shape_droptarget);
        Drawable normalShape = getResources().getDrawable(R.drawable.shape);

        @Override
        public boolean onDrag(View v, DragEvent event) {
            View view;
            int action = event.getAction();
            switch (event.getAction()) {
                case DragEvent.ACTION_DRAG_STARTED:
                    // do nothing
                    break;
                case DragEvent.ACTION_DRAG_ENTERED:
                    v.setBackgroundDrawable(enterShape);
                    break;
                case DragEvent.ACTION_DRAG_EXITED:
                    v.setBackgroundDrawable(normalShape);
                    break;
                case DragEvent.ACTION_DROP:
                    // Dropped, reassign View to ViewGroup
                    view = (View) event.getLocalState();
                    ViewGroup owner = (ViewGroup) view.getParent();
                    owner.removeView(view);
                    LinearLayout container = (LinearLayout) v;
                    container.addView(view);
                    //view.setVisibility(View.VISIBLE);
                    break;
                case DragEvent.ACTION_DRAG_ENDED:
                    v.setBackgroundDrawable(normalShape);
                    // Regardless of valid or invalid drop show it again.
                    // See https://developer.android.com/reference/android/view/DragEvent.html#ACTION_DRAG_ENDED
                    view = (View) event.getLocalState();
                    view.setVisibility(View.VISIBLE);
                default:
                    break;
            }
            return true;
        }
    }

}

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xengar.android.handleimage.ui.DragAndDropActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <!--<include layout="@layout/content_drag_and_drop" /> -->

    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.xengar.android.handleimage.ui.DragAndDropActivity"
        tools:showIn="@layout/activity_drag_and_drop">

        <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:columnCount="2"
            android:columnWidth="320dp"
            android:orientation="vertical"
            android:rowCount="2"
            android:stretchMode="columnWidth" >

            <LinearLayout
                android:id="@+id/topleft"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:layout_row="0"
                android:background="@drawable/shape" >

                <ImageView
                    android:id="@+id/myimage1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/gallery_lion" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/topright"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:background="@drawable/shape" >

                <ImageView
                    android:id="@+id/myimage2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/gallery_lion" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/bottomleft"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:background="@drawable/shape" >

                <ImageView
                    android:id="@+id/myimage3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/gallery_lion" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/bottomright"
                android:layout_width="160dp"
                android:layout_height="160dp"
                android:background="@drawable/shape" >

                <ImageView
                    android:id="@+id/myimage4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/gallery_lion" />
            </LinearLayout>

        </GridLayout>


    </android.support.constraint.ConstraintLayout>

    <!--
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" /> -->

</android.support.design.widget.CoordinatorLayout>

＆＃13;

Answer 1

这并不是您想要的效果，但这样做可以达到您想要达到的效果。您可以对其进行更改。

＆＃13;

$(document).ready(function(){
var images = [
'<img class="wp-image-2443" src="http://2-story.com/wp-content/uploads/2012/07/ab-data.png" alt="ab Data" />',
'<img class="wp-image-2444" src="http://2-story.com/wp-content/uploads/2012/07/american-transmission-company.png" alt="American Transmission Company" />',
'<img class="wp-image-2445" src="http://2-story.com/wp-content/uploads/2012/07/arts-at-large.png" alt="Arts @ Large" />',
'<img class="wp-image-2446" src="http://2-story.com/wp-content/uploads/2012/07/baseball-tomorrow.png" alt="Baseball Tomorrow" />',
'<img class="wp-image-2447" src="http://2-story.com/wp-content/uploads/2012/07/brewers-community-foundation.png" alt="Brewers Community Foundation" />',
'<img class="wp-image-2448" src="http://2-story.com/wp-content/uploads/2012/07/city-of-milwaukee.png" alt="City of Milwaukee" />',
'<img class="wp-image-2449" src="http://2-story.com/wp-content/uploads/2012/07/columbia-stmarys-foundation.png" alt="Columbia St. Mary Foundation" />',
 '<img class="wp-image-2450" src="http://2-story.com/wp-content/uploads/2012/07/digestive-health-insurance.png" alt="Digestive Health Alliance" />',
'<img class="wp-image-2451" src="http://2-story.com/wp-content/uploads/2012/07/dorner.png" alt="Dorner" />',
'<img class="wp-image-2486" src="http://2-story.com/wp-content/uploads/2012/07/echelon-innovation-campus.png" alt="Echelon Innovation Campus" />',
'<img class="wp-image-2452" src="http://2-story.com/wp-content/uploads/2012/07/great-lakes-distillery.png" alt="Great Lakes Distillery" />',
'<img class="wp-image-2453" src="http://2-story.com/wp-content/uploads/2012/07/habitati-for-humanity.png" alt="Habitat for Humanity" />',
];
var startingIndex = 0;
var endIndex = 5;
displayImages(images.slice(startingIndex, endIndex));	
setInterval(function(){
	if(endIndex >= images.length) endIndex = images.length/2;
	updateImages(images[endIndex]);
	endIndex++;
}, 3000);

function displayImages(imageArray){
  $.each(imageArray, function(index, image) {    
      $('.logo-container').append(image);
  });	
}
function updateImages(image){
	$('.logo-container img').first().fadeOut("slow", function(){
		$(this).replaceWith(image);
		$(this).fadeIn("slow");
	});
}	

});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="logo-container">

</div>	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

＆＃13;

fadein / out数组的图像

1 个答案: