JS实现普通轮播图特效-创新互联

本文实例为大家分享了JS实现轮播图特效的具体代码，供大家参考，具体内容如下

站在用户的角度思考问题，与客户深入沟通，找到麻章网站设计与麻章网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖麻章地区。

知识点

轮播图思想：

① 建立一个全局变量索引，始终标记当前显示图片。
② 根据当前图片的数量，动态创建下方的●图片指示器。
③ 轮播图的初始状态为第一张图片在中间，剩余所有图片均放在即将显示图片位置。
④ 当点击>的时候，当前图片调用动画移动函数进行左移，与此同时新的一张图片调用动画函数移入到div中，而会将下一张展示的图片移动到div右侧。
⑤ 需要进行边界判断，如果当前的图片大于图片数量或者小于等于0，重新给索引赋值。
⑥ 当点击图片指示器的时候，首先判定点击的与索引的位置关系，然后进行动画移动。
⑦ 给div添加定时器，自动移动图片。当鼠标进入div，删除定时器，当鼠标移出div，设置定时器。

运行效果

1.自动轮播
2.点击左右切换图片
3.点击下方图片指示器切换图片

代码

引入MyTools.js库

1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="1.css" rel="external nofollow" >
</head>
<body>
<div id="box">
 <div id="box_content">
 <div class="box_img"><img src="casual01.jpg" alt=""></div>
 <div class="box_img"><img src="casual02.jpg" alt=""></div>
 <div class="box_img"><img src="casual03.jpg" alt=""></div>
 <div class="box_img"><img src="casual04.jpg" alt=""></div>
 <div class="box_img"><img src="casual05.jpg" alt=""></div>
 </div>
 <div id="box_control">
 <a href="javascript:;" class="box_control_left"><i><</i></a>
 <a href="javascript:;" class="box_control_right"><i>></i></a>
 <ul>
 </ul>
 </div>
</div>
<script src="../JavaScript学习/00MyTools/MyTools.js"></script>
<script src="1.js"></script>
</body>
</html>

上一篇：kubernetes中如何实现Istio流量管理-创新互联

下一篇：Java中无法加载主类如何解决-创新互联