原生JS实现旋转轮播图+文字内容切换

最新推荐文章于 2024-05-10 08:50:53 发布

bit小兵

最新推荐文章于 2024-05-10 08:50:53 发布

阅读量1.2k

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/hejun26/p/9717764.html

版权

废话不多说，直接上图看效果：

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

原理：点击右侧左侧按钮，把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">
              <

最低0.47元/天解锁文章

bit小兵

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现旋转轮播图+文字内容切换

废话不多说，直接上图看效果：需求：点击左右按钮实现切换用户图片与信息；原理：点击右侧左侧按钮，把3号的样式给2号，2号的给1号，1号的给5号，5号的给4号，4号的样式给3号，然后根据现在是第几张图片切换成对应的文字；步骤：1.让页面加载出所有盒子的样式；2.把两侧按钮绑定事件(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)；...
复制链接

扫一扫