js原生点击链接切换图片代码

好的，这个问题和前面的问题类似，只是没有了导航栏，直接在页面中添加链接。以下是一个示例代码：

HTML：

<a href="#" onclick="changeImage('image1.jpg')">Image 1</a>
<a href="#" onclick="changeImage('image2.jpg')">Image 2</a>
<a href="#" onclick="changeImage('image3.jpg')">Image 3</a>

<img src="image1.jpg" id="myImage">

JavaScript：

function changeImage(imageName) {
  var image = document.getElementById("myImage");
  image.src = imageName;
}

这段代码和前面的代码类似，只是将导航栏中的链接换成了页面中的链接。每个链接都有一个 `onclick` 事件，当点击链接时，会调用 `changeImage` 函数，并传递对应的图片名称作为参数。`changeImage` 函数会获取 `id` 为 `myImage` 的图片元素，然后将其 `src` 属性设置为传递的图片名称。这样就可以通过页面中的链接来切换图片了。

需要注意的是，在实际开发中，最好将 JavaScript 代码放在单独的文件中，而不是直接写在 HTML 中。这样可以提高代码的可维护性和可读性。

相关问题

js 原生点击上传图片

可以通过 input 标签来实现原生点击上传图片。例如：

<input type="file" accept="image/*" onchange="previewImage(this)">

其中 accept 属性表示只允许选择图片类型。onchange 属性可以通过 JavaScript 来实现上传图片后的预览操作。

原生js实现淘宝图片切换

好的，以下是一个简单的原生JS实现淘宝图片切换的示例代码：

HTML代码：

<div class="slider">
  <ul>
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
  </ul>
  <div class="prev"></div>
  <div class="next"></div>
</div>

CSS代码：

.slider {
  position: relative;
}
.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.slider li {
  float: left;
}
.slider img {
  display: block;
  width: 100%;
  height: auto;
}
.slider .prev,
.slider .next {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  background-color: #000;
  opacity: 0.5;
  cursor: pointer;
}
.slider .prev {
  left: 0;
}
.slider .next {
  right: 0;
}
.slider .prev:hover,
.slider .next:hover {
  opacity: 1;
}

JS代码：

var slider = document.querySelector('.slider');
var sliderUl = slider.querySelector('ul');
var sliderLi = slider.querySelectorAll('li');
var sliderPrev = slider.querySelector('.prev');
var sliderNext = slider.querySelector('.next');

var currentIndex = 0;
var imageCount = sliderLi.length;
var sliderWidth = slider.clientWidth;

sliderUl.style.width = (sliderWidth * imageCount) + 'px';

function slideTo(index) {
  if (index < 0) {
    index = imageCount - 1;
  } else if (index >= imageCount) {
    index = 0;
  }

  sliderUl.style.transform = 'translateX(-' + (sliderWidth * index) + 'px)';
  currentIndex = index;
}

sliderPrev.addEventListener('click', function() {
  slideTo(currentIndex - 1);
});

sliderNext.addEventListener('click', function() {
  slideTo(currentIndex + 1);
});

slideTo(0);

这段代码实现了一个简单的图片轮播效果，当点击“上一张”或“下一张”按钮时，会切换到相应的图片。可以根据自己的需要进行修改和优化。