废话不多说,直接上图看效果:
需求: 点击左右按钮实现切换用户图片与信息;
原理: 点击右侧左侧按钮,把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