400-800-9385
网站建设资讯详细

网页前端制作之Jquery简单轮播图效果

发表日期:2021-06-01 09:11:50   作者来源:严成   浏览:1863   标签:网页前端制作    
轮播图效果在网站所处可见,今天来做个简单的轮播图效果,有轮播指示点,有切换按钮箭头,效果如下图所示:

前端制作效果展示

css样式如图:

CSS代码

CSS代码2

html结构如图:

HTML代码

js如图:

JS代码

    html结构和css样式没什么好说的,重点是js。如图中所示,获取需要轮播的个数(slide),用赋值给size_,获取初始默认显示(slide)的下标,用赋值给i,当点击左按钮时,重新获取默认显示(slide)的下标,因为随着按钮的点击,默认显示(slide)的下标会增加或减小,每点击一下都要重新获取,因为是左按钮,且做了循环轮播,当轮播到第一个时,再次点击需要轮播到最后一个,所以这里要加一个if判断,当i等于0时,i等于轮播个数减一(size_ - 1),其余i递减(i--),右按钮一样的道理,当轮播到最后一个,需要轮播到第一个,if判断,当i等于轮播个数减一(size_ - 1),i等于0,其余i递增(i++)。
同时点击按钮时,对应的指示点根据i的下标值,同时添加删除类名active。
指示点点击时,获取当前轮播的默认下标,赋值给i,为下标为i的slide添加类名active,使其显示,其余的slide删除类名active隐藏,跟当前指示点添加默认类名active,其余的指示点删除类名active。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6054.html