废话不多说,直接上图看效果:
需求:点击左右按钮实现切换用户图片与信息;
原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字;
步骤:
1.让页面加载出所有盒子的样式;
2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转);
3.书写函数:操作函数:左按钮:删除第一个,添加到最后一个;右按钮:删除最后一个,添加到第一个;
4.定义变量,根据对应变量切换对应的文字内容;
代码事例如下:
HTML代码:
写法思路:
1.定义好5张图片,进行图片信息切换;
2.书写好你需要切换的文字内容,定义一个ID;
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学员信息轮播图</title> <link rel="stylesheet" href="css/css.css"/> <script src="js/jquery1.0.0.1.js"></script> <script src="js/js.js"></script> </head> <body> <div class="feedbackwrap" id="feedbackwrap"> <div class="feedbackslide" id="feedbackslide"> <ul> <!--五张图片--> <li><a href="#"><img src="images/1.png" alt=""/></a></li> <li><a href="#"><img src="images/2.png" alt=""/></a></li> <li><a href="#"><img src="images/3.png" alt=""/></a></li> <li><a href="#"><img src="images/4.png" alt=""/></a></li> <li><a href="#"><img src="images/5.png" alt=""/></a></li> </ul> <!--左右切换按钮--> <div class="feedbackarrow" id="feedbackarrow"> <a href="javascript:;" class="feedbackprev"></a> <a href="javascript:;" class="feedbacknext"></a> </div> </div> <div class="feedbackname"> <p