问题：
javascript - 求一个最简单或者说，代码最少的jquery slide代码？
唐弘和
功能有向前一个，向后一个，图片切换效果常规就行，带小点导航,
在网上找的代码，如下，目前无法自动开启，自动 开启当鼠标进入图区不暂停，退出不继续，求指教，小白
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {box-sizing: border-box}body {font-family: Verdana, sans-serif; margin:0}.mySlides {display: none}img {vertical-align: middle;}/* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto;}/* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}/* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px;}/* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);}/* Caption text */.text { position: absolute; bottom: -43px; width: 100%; height: 43px; line-height: 43px; white-space: nowrap; text-align: center; background-color: #555}.text a{ display: block; color: #fff; font-size: 18px;}/* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}/* The dots/bullets/indicators */.dot_old { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 3px; box-sizing: border-box; background-color: #fff; transition: width .3s;}.active, .dot:hover { width: 10px; opacity: 1; background-color: #206cfe;}/* Fading animation */.fade { animation-name: fade; animation-duration: 1.5s;}@keyframes fade { from {opacity: .4} to {opacity: 1}}/* On smaller screens, decrease text size */@media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}}.slide_dot{ position: absolute; left: 0; bottom: 10px; right: 0; z-index: 3; font-size: 0; text-align: center; margin-top: 6px;}</style></head><body><div class="slideshow-container" id="ss"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img/img_nature_wide.jpeg" style="width:100%"> <div class="text"><a href="#">那到底值不值 点评奔驰GLB 180</a></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img/img_snow_wide.jpeg" style="width:100%"> <div class="text"><a href="#">那到底值不值 点评奔驰GLB 180</a></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img/img_mountains_wide.jpeg" style="width:100%"> <div class="text"><a href="#">那到底值不值 点评奔驰GLB 180</a></div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="slide_dot" style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div></div><script src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><script>let slideIndex = 0;showSlides();function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}let slide_s=MysetTimeout(showSlides, 2000);function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; slide_s; // Change image every 2 seconds}function MysetTimeout(callback, delay) { var setTimeoutId, start, remaining = delay; this.pause = function () { window.clearTimeout(setTimeoutId); remaining -= new Date() - start; }; this.play= function () { start = new Date(); window.clearTimeout(setTimeoutId); setTimeoutId= window.setTimeout(callback, remaining); }; this.play();}$("#s").mouseenter(function(){ console.log("pause")});$("#s").mouseleave(function(){ console.log("play")});</script></body></html> 共有4个答案
夹谷浩博
推荐使用轮播图组件swiper https://www.swiper.com.cn/demo/index.html
通京
就是轮播图吧，给题主几个参考：
swiper
Owl Carousel
slick （这个移动端兼容做的不错）
如果想看案例可以去这里搜对应的参考页面：
bootstrapmb模板
田修为
没明白你这内容描述跟标题里面的 jQuery Slide 有啥关联？
要不看看
Animate.css 这里的动画效果？
看了你的补充，不如直接使用 Swiper 来做？
龚苏燕
给你改了一下
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><style>* {box-sizing: border-box}body {font-family: Verdana, sans-serif; margin:0}.mySlides {display: none}img {vertical-align: middle;}/* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto;}/* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}/* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px;}/* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);}/* Caption text */.text { position: absolute; bottom: -43px; width: 100%; height: 43px; line-height: 43px; white-space: nowrap; text-align: center; background-color: #555}.text a{ display: block; color: #fff; font-size: 18px;}/* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}/* The dots/bullets/indicators */.dot_old { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}.dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 3px; box-sizing: border-box; background-color: #fff; transition: width .3s;}.active, .dot:hover { width: 10px; opacity: 1; background-color: #206cfe;}/* Fading animation */.fade { animation-name: fade; animation-duration: 1.5s;}@keyframes fade { from {opacity: .4} to {opacity: 1}}/* On smaller screens, decrease text size */@media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}}.slide_dot{ position: absolute; left: 0; bottom: 10px; right: 0; z-index: 3; font-size: 0; text-align: center; margin-top: 6px;}</style></head><body><div class="slideshow-container" id="ss"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img/img_mountains_wide.jpeg" style="width:100%"> <div class="text"><a href="#">那到底值不值 点评奔驰GLB 180</a></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img/img_nature_wide.jpeg" style="width:100%"> <div class="text"><a href="#">那到底值不值 点评奔驰GLB 180</a></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img/img_snow_wide.jpeg" style="width:100%"> <div class="text"><a href="#">那到底值不值 点评奔驰GLB 180</a></div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="slide_dot" style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div></div><script src="https://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><script>let slideIndex = 0;function plusSlides(n) { showSlides(slideIndex += n - 1);}function currentSlide(n) { showSlides(slideIndex = n);}let slide_s, setTimeoutIdfunction showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} if(slideIndex < 1){slideIndex = slides.length} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; slide_s = MysetTimeout(showSlides, 2000); // Change image every 2 seconds}function MysetTimeout(callback, delay) { var obj = {} obj.pause = function () { window.clearTimeout(setTimeoutId); }; obj.play= function () { window.clearTimeout(setTimeoutId); setTimeoutId= window.setTimeout(callback, delay); }; obj.play(); return obj}$("#ss").mouseenter(function(){ console.log("pause") slide_s.pause()}).mouseleave(function(){ console.log("play") slide_s.play()});showSlides();</script></body></html>
类似资料：
-
问题内容： 在javascript中实现数组交集的最简单，无库代码是什么？我想写 并得到 问题答案： 使用的组合和： 或者，如vrugtehagel在注释中建议的那样，您可以使用更新的代码甚至更简单的代码： 对于较旧的浏览器：
-
利用 UITableView 实现九宫格布局。具体特点如下： 1、通过KVC的方法方便实现了九宫格，简便了实现的代码； 2、九宫格显示图片的代码，缩小截取固定大小的小图片节省内存； 3、充分利用了分类来实现九宫格； 4. 每个格子都支持点击动作。 [Code4App.com]
-
本文向大家介绍PHP分页初探 一个最简单的PHP分页代码的简单实现，包括了PHP分页初探 一个最简单的PHP分页代码的简单实现的使用技巧和注意事项，需要的朋友参考一下 PHP分页代码在各种程序开发中都是必须要用到的，在网站开发中更是必选的一项。 要想写出分页代码，首先你要理解SQL查询语句：select * from goods limit 2,7。PHP分页代码核心就是围绕这条语句展开的，SQL
-
问题内容： 我整天用谷歌搜索，没有运气。我按确定按钮后调用方法。所以代码是： 我的testResultSet()方法工作正常。现在，如何改变我的代码，以便它工作，或者什么是最简单的代码，以使DefaultTableModel从ResultSet？提前致谢。 编辑：我正在接收java.lang.IllegalStateException: SQLite JDBC: inconsistent inte
-
我一直在纠结这件事。 最大子数组简单给定一个整数数组数，找到总和最大的相邻子数组（至少包含一个数字）并返回其总和。 子数组是数组的连续部分。 示例1： 输入:nums = [-2，1，-3，4，-1，2，1，-5，4]输出:6解释:[4，-1，2，1]的和最大= 6。示例2: 输入：nums=[1]输出：1示例3： 输入： 数字 = [5，4，-1，7，8] 输出： 23 我不明白迭代逻辑，视频中
-
本文向大家介绍jquery实现最简单的滑动菜单效果代码，包括了jquery实现最简单的滑动菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下： 这是一款最简单的jQuery下拉滑出菜单，jQuery代码实现，这里没有过多的去修饰菜单，仅是一些基本的实现，特别是对学习jQuery是个不错的参考实例，这里使用了一