JS轮播图

轮播图主要为一个全局变量索引,所有可以进行操作的元素都可以根据这个索引进行图片的切换,style的设置,上一张、下一张

首先需要获到需要操作的元素,获得轮播图片的length

ById为封装的获取id的方法

鼠标滑过的时候停止轮播,鼠标离开的时候继续轮播

main.onmouseout()刚开始需要 自动在main上触发鼠标离开的事件


图片切换函数:图片,焦点图的样式 先把所有样式清空,只让需要显示的,显示出来,

jpg

点击焦点图的切换


jpg

点击上一张、下一张


jpg

main.onmouseout() 自动在main上触发鼠标离开的事件

原点添加自定义属性,或者标准属性, 使全局变量index=对应值

注意要显示当前图片,先设置其他图片不显示

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这个轮播图的JS动态代码: var currentNum = 0; var changeBgOfObj = doc...
    w蜗牛w阅读 570评论 2 0
  • 原生js轮播图 1.静态页面,布局结构 2.css样式 可以根据自己的喜好进行改动,本样式只供参考 3.原生js区...
    king猿阅读 831评论 1 2
  • 先给大家介绍几种JS属性: 1.onclick:当点击的时刻 2.ondbclick:当双击的时刻 3.onmou...
    李娅彬lyb阅读 369评论 0 0
  • js: ////思路: 1 获取相关元素 2 左右箭头点击事件 3 圆点样式 //// 4 圆点点击事件 5...
    raining_804f阅读 475评论 1 4
  • 秋的模样,该怎样形容。 那温柔的风,带来的丝丝凉意,总让我在脑海中,浮现出,不知在何时留下的那片灰蒙的天。 爷爷家...
    槿墨汐阅读 191评论 0 1