html实现文字轮转效果,原生JS实现旋转轮播图+文字内容切换效果【附源码】

  • Post author:
  • Post category:其他


废话不多说,直接上图看效果:

5ccecb13866c5e56b3f557ddba91568a.png

需求: 点击左右按钮实现切换用户图片与信息;

原理: 点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字;

步骤:

1.让页面加载出所有盒子的样式;

2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转);

3.书写函数: 操作函数:左按钮:删除第一个,添加到最后一个; 右按钮:删除最后一个,添加到第一个;

4.定义变量,根据对应变量切换对应的文字内容;

代码事例如下:

HTML代码:

写法思路:

1.定义好5张图片,进行图片信息切换;

2.书写好你需要切换的文字内容,定义一个ID;

学员信息轮播图

学员

欧阳常斌3

css代码:

写法思路:

1.定义好左右切换按钮的背景图片;

2.清除默认样式;

3.写好绝对定位,相对定位;

@charset “UTF-8”;

/*初始化 reset*/

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

body,button,input,select,textarea{font:12px/1.5 “Microsoft YaHei”, “微软雅黑”, SimSun, “宋体”, sans-serif;color: #666;}

ol,ul{list-style:none}

a{text-decoration:none}

fieldset,img{border:0;vertical