Question

您好我正在制作游戏粉丝指南页面，但现在我不再继续寻求帮助了。

我需要一种方法来获取下一个或/和之前的img点击上一个箭头和下一个箭头。

所有这些对我来说都是新的，我测试了很多，但没有任何工作，我希望任何人都可以帮助我。

现在我已经看到我的HTML已经制作了issus但我已经修复了，现在我可以发布我的HTML。

我有CSS风格和HTML用于更好的视图分割，但在我的html中，它是一个视频和视口的元素。

编辑：sry，但我犯了思考错误。改变图片是不够的，我必须更改wohle div内容。

解释下单击下一步必须更改div id =＆＃34; card1＆＃34;类=＆＃34; card_content＆＃34; to div id =＆＃34; card2＆＃34;类=＆＃34; card_content＆＃34;

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="realup.ir.teacher.Activity.Main"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/realupbackground_co">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/header">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/normal_margin"
            android:id="@+id/app_bar_head">

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#edeaed"
                android:titleTextColor="#89798a"
                android:id="@+id/toolbar"
                app:layout_scrollFlags="scroll|enterAlways"/>

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:id="@+id/collapse_toolbar"
                app:titleEnabled="true">


                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="centerCrop"
                    android:src="@drawable/course_page_cover"
                    android:id="@+id/header_image" />


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

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

    </android.support.design.widget.CoordinatorLayout>
    <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/header"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.v4.widget.NestedScrollView>

</RelativeLayout>

＆＃13;

a img {
  border:none;
}

.card_overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
}

.card_content {
  display: none;
  position: absolute;
  height:600px;
  width:305px;
  top: 50%;
  left: 50%;
  margin-top: -258px;
  margin-left: -156px;
  padding: 6px;
  background-color: black;
  z-index: 1002;
  overflow: auto;
}

#card_icons {
  width:299px;
  border:0;
}

.card_case {
  background-image: url(http://file2.npage.de/014720/85/bilder/case.png);
  background-repeat: no-repeat;
  height:435px;
  width:299px;
  border:0;
}

.switch_card {
position:relative;
z-index:1003;
margin-top:-235px;
margin-left:-5px;
}

#back_to {
position:relative;
z-index:1003;
margin-top:203px;
margin-left:0px;
}

＆＃13;

Answer 1

以下代码可能会对您有所帮助。

// index.html
<img src="01.png" id="pic">

// script.js
document.getElementById("pic").setAttribute("src", "02.png")

Answer 2

完成

＆＃13;

<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='non‌e';document.getEleme‌ntById('fade').style‌.display='none';docu‌ment.getElementById(‌'card2').style.displ‌ay='block';document.‌getElementById('fade‌').style.display='bl‌ock'" unselectable="off">

＆＃13;

但是如何使用script.js

制作javascript：void

如何使用上一个和下一个按钮切换src和onclick？

2 个答案: