草庐IT

教你用JavaScript完成轮播图

小院里的霍大侠 2023-03-28 原文


案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个轮播图。图片每3秒自动轮换，也可以点击左右按键轮播图片，当图片到达最左端或最右端时，再点击左右键图片弹回最初始的图片或最末尾的图片。通过实战我们将学会clearTimeout方法、object.style.transform方法。

案例演示

图片每隔3秒会自动轮播，用户也可以点击左右键轮播图片。

案例设计

JavaScript实战案例-轮播图
我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<div class="slider-container">
  <div class="image-container">
    <img src="https://picsum.photos/id/237/500/300" alt="image" />
    <img src="https://picsum.photos/id/1/500/300" alt="image" />
    <img src="https://picsum.photos/id/10/500/300" alt="image" />
    <img src="https://picsum.photos/id/20/500/300" alt="image" />
    <img src="https://picsum.photos/id/200/500/300" alt="image" />
  </div>
  <i class="fas fa-angle-double-left btn prev"></i>
  <i class="fas fa-angle-double-right btn next"></i>
</div>

然后我们来编写核心的JavaScript代码，通过querySelector获取HTML元素的信息；设置初始图片位置；添加下一个按键的点击事件，点击后图片向后更换，并暂停自动轮播；添加前一个按键的点击事件，点击后图片向前更换，并暂停自动轮播；编写自动轮播函数，如果图片到底，就返回初始图片，图片在最开始，仍向前查看则返回最末尾图片，设置图片轮播动画。

//有个小院-兴趣编程
const nextEl=document.querySelector(".next");
const prevEl=document.querySelector(".prev");
const imgsEl=document.querySelectorAll("img");
const imageConatinerEl=document.querySelector(".image-container");
let currentImg=1;
let timeout;
nextEl.addEventListener("click",()=>{
  currentImg++;
  clearTimeout(timeout);
  updateImg();
});
prevEl.addEventListener("click",()=>{
  currentImg--;
  clearTimeout(timeout);
  updateImg();
});
updateImg();
function updateImg() {
  if(currentImg>imgsEl.length){
    currentImg=1;
  }else if(currentImg<1){
    currentImg=imgsEl.length;
  }
  imageConatinerEl.style.transform=`translateX(-${(currentImg-1)*500}px)`;
  timeout=setTimeout(()=>{
    currentImg++;
    updateImg();
  },3000);
}

总结思考

学习点
1、clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout，以阻止setTimeout()方法执行函数。
2、object.style.transform设置transform 属性应用2D或3D转换。

问答
1、clearTimeout() 可以阻止setTimeout()方法执行函数吗？
2、object.style.transform是设置transform 属性的吗？

关注我，跟着我每天学习一点点，让你不再枯燥，不再孤单..

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）

JavaScript你用ampstrongcurrentImg

有关教你用JavaScript完成轮播图的更多相关文章

  1. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby:行 "m = Hash.new {|h,k| h[k] = []}"完成了什么而 "Hash.new"没有完成？ - 2

    一边学习thisRailscast我从Rack中看到了以下源代码:defself.middleware@middleware||=beginm=Hash.new{|h,k|h[k]=[]}m["deployment"].concat[[Rack::ContentLength],[Rack::Chunked],logging_middleware]m["development"].concatm["deployment"]+[[Rack::ShowExceptions],[Rack::Lint]]mendend我的问题是关于第三行。什么是传递block{|h,k|h[k]=[]}到Has

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. ruby-on-rails - 自动完成搜索的 Rails 实现 - 2

    我不确定如何为我的搜索功能添加自动完成表单。"get"do%>nil%>我有一个具有自定义操作的Controllerdefquery@users=Search.user(params[:query])@article=Search.article(params[:query])end模型如下:defself.user(search)ifsearchUser.find(:all,:conditions=>['first_nameLIKE?',"%#{search}%"])elseUser.find(:all)endenddefself.article(search)ifsearchArt

  6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  7. ruby-on-rails - 使用 Rails 5 完成类(class)和模块分配给用户 - 2

    编辑#2这是类(class)ControllerclassCoursesController编辑#1因此，根据下面Jagdeep的回答，我现在完成了以下操作:类(class).rbclassCoursecourse_modules_user.rbclassCourseModulesUsercourses_user.rbclassCoursesUser用户.rbclassUser迁移classCreateCoursesUsers但是，我遇到这样的错误原始问题所以这是previousquestion的延续,然而，这会偏离那个主题，所以这里是一个新的主题。在此之后，我大致得到了我想要开始工作

  8. ruby - 在 Ruby 中禁用 OptionParser 标志的自动完成 - 2

    #!/usr/bin/envrubyrequire'optparse'options={}OptionParser.newdo|opts|opts.on("--languageLANGUAGE",["Ruby","JavaScript"])do|language|options[:language]=languageendend.parse!puts"Language:#{options[:language]}"如果我用./bin/example--languageRu运行它，它将输出:Language:Ruby我想禁用此自动完成/最接近的匹配行为，并在未提供确切名称时引发Option

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby - 是否可以在 Unicorn master 完成重启时发送通知？ - 2

    我在nginx+unicorn后面运行一系列Rails/Sinatra应用程序，零停机部署。我喜欢这个设置，但Unicorn需要一段时间才能完成重新启动，所以我想在完成时发送某种通知。我能在Unicorn文档中找到的唯一回调与workerfork相关，但我认为这些回调对此不起作用。这是我从赏金中寻找的东西:老unicorn主人启动新主人，然后新主人开始它的worker，然后旧主人停止它的worker并让新主人接管。我想在交接完成后执行一些ruby​​代码。理想情况下，我不想为此实现任何复杂的流程监控。如果这是唯一的方法，那就这样吧。但在走那条路之前，我正在寻找更简单的选择。

随机推荐