中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › js实现图片轮播切换效果

[前端] js实现图片轮播切换效果

1920 0
Honkers 2022-10-21 15:57:13 | 显示全部楼层 |阅读模式
最近在b站上学习的时候，学到了一个用原生js实现图片轮播切换效果的实战，码下来收藏


上图是这个小实战的效果图，整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点切换相应图片、点击主菜单显示相应子菜单内容。
html页面布局
  1. <body>
  2.         <!--主区域，存放所有需要元素-->
  3.         <div id="main" class="main">
  4.                 <!-- 导航菜单 -->
  5.                 <div class="menu-box"></div>
  6.                 <!-- 子菜单 -->
  7.                 <div class="sub-menu hidden" id="sub-menu"></div>
  8.                 <!-- 主菜单 -->
  9.                 <div id="menu-content" class="menu-content">
  10.                         <div class="menu-item">
  11.                                 <a href="#">
  12.                                         <span>item</span>
  13.                                         <i></i>
  14.                                 </a>
  15.                         </div>
  16.                         <div class="menu-item">
  17.                                 <a href="#">
  18.                                         <span>item</span>
  19.                                         <i></i>
  20.                                 </a>
  21.                         </div>
  22.                         <div class="menu-item">
  23.                                 <a href="#">
  24.                                         <span>item</span>
  25.                                         <i></i>
  26.                                 </a>
  27.                         </div>
  28.                         <div class="menu-item">
  29.                                 <a href="#">
  30.                                         <span>item</span>
  31.                                         <i></i>
  32.                                 </a>
  33.                         </div>
  34.                 </div>
  35.                 <!-- 图片轮播 -->
  36.                 <div id="banner" class="banner">
  37.                         <a href="#">
  38.                                 <!-- slide-active表示当前需要显示图片的状态 -->
  39.                                 <div class="banner-slide slide1 slide-active"></div>
  40.                         </a>
  41.                         <a href="#">
  42.                                 <div class="banner-slide slide2 "></div>
  43.                         </a>
  44.                         <a href="#">
  45.                                 <div class="banner-slide slide3"></div>
  46.                         </a>
  47.                 </div>
  48.                 <!-- 上一张、下一张按钮 -->
  49.                 <!-- javascript:void(0)表示这个a标签不做任何链接跳转 -->
  50.                 <a href="javascript:void(0)" class="button prev" id="prev">
  51.                         <img src="images/r-btn.png" alt="上一张" class="img-prev">
  52.                 </a>
  53.                 <a href="javascript:void(0)" class="button next" id="next">
  54.                        
  55.                 </a>
  56.                 <!-- 圆点导航 -->
  57.                 <div id="dots" class="dots">
  58.                         <span class="active"></span>
  59.                         <span></span>
  60.                         <span></span>
  61.                 </div>
  62.         </div>
  63.         </div>
  64. </body>
复制代码
js绑定事件
  1. //封装一个代替getElementById()的方法
  2. function byId(id){
  3. //对id的类型做判断
  4. return typeof(id)==="string"?document.getElementById(id):id;
  5. }
  6. //封装切换图片的函数（图片和圆点是配套的，图片有多少张圆点就有多少个，图片切换到第几张，圆点就到第几个）
  7. function changeImg(){
  8. //遍历banner下所有的div，将其隐藏
  9. for(var i = 0;i<len;i++){
  10.   pics[i].style.display = "none";
  11.   dots[i].className=""; //将span上的“active”类隐藏，点击圆点以后将其显示
  12. }
  13. pics[index].style.display = "block"; //根据index找到当前图片，将其显示出来
  14. dots[index].className = "active";  //根据index找到当前span，将其显示出来
  15. }
  16. function slideImg(){
  17. var main = byId("main");
  18. //鼠标滑到图片上清除定时器，鼠标离开图片继续
  19. main.onmouseover = function(){
  20.   //滑到图片上清除定时器,图片停止轮播
  21.   if(timer){
  22.    clearInterval(timer);
  23.   }
  24. }
  25. //调用onmouseout事件
  26. main.onmouseout = function(){
  27.   //鼠标离开定时器继续,每隔三秒切换一次图片
  28.   timer = setInterval(function(){
  29.    index++; //len=3 所以index的值只能是0,1,2
  30.    if(index>=len){
  31.     index=0;
  32.    }
  33.    //切换图片
  34.    changeImg();
  35.   },2000);
  36. }
  37. //自动在main上触发鼠标离开的事件，让图片自动切换，即在鼠标还没有滑过图片时，图片就睡自动切换
  38. main.onmouseout(); //调用onmouseout方法
  40. }
复制代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

荣誉红客

关注
  • 4009
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天