超简单的图片左右切换滑动

最新推荐文章于 2024-08-12 03:58:25 发布

weixin_34247299

最新推荐文章于 2024-08-12 03:58:25 发布

阅读量1.3w

点赞数 10

文章标签： javascript php java ViewUI

原文链接：https://juejin.im/post/5c8f4bcaf265da60fc469775

版权

本文针对新手，介绍如何不依赖插件，仅使用jQuery库来编写最简洁的代码，实现图片左右切换的滑动效果。通过示例代码，读者可以直接应用到自己的项目中，只需替换代码中的图片路径并调整图片尺寸为300*300。

摘要由CSDN通过智能技术生成

网上看过很多图片左右切换滑动的效果，不过大都是使用插件实现。插件虽方便，但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库，用最简短的代码实现此功能

效果预览如下图：

代码部分（直接复制代码便可使用，注意对应的图片路径改成自己的图片路径，图片大小建议300*300）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>超简单的图片左右切换滑动</title> 
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var cot=0;//设置一个计数器，初始值为0；作用是用来监听点击切换的时候哪一个图片应该隐藏或者显示
function nex(){
  if(cot<=2){
    $('.imgs img'