本文实例为大家分享了JavaScript滚动轮播图制作原理，供大家参考，具体内容如下
滚动轮播图
滚动轮播图布局关键：是所有图片并排在一起，所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略：先拉动，再瞬移
左按钮拉动策略：先瞬移，再拉动
与呼吸轮播图一样，需要做防流氓策略
复制代码：将我代码中的图片更换为你的图片，注意图片路径，还需要引入js库，我引入的是jquery-1.12.3.min.js的版本，需要js这个库的同学可以去我上传的资料中下载，引入的时候注意路径
举例：
<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Document</title>
?? ?<style type="text/css">
?? ??? ?* {
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ?}
?? ??? ?ul, ol {
?? ??? ??? ?list-style: none;
?? ??? ?}
?? ??? ?a {
?? ??? ??? ?text-decoration: none;
?? ??? ?}
?? ??? ?.carousel {
?? ??? ??? ?width: 560px;
?? ??? ??? ?height: 300px;
?? ??? ??? ?margin: 50px auto;
?? ??? ??? ?border: 5px solid red;
?? ??? ??? ?position: relative;
?? ??? ??? ?overflow: hidden;
?? ??? ?}
?? ??? ?/* 滚动轮播图布局关键，是所有图片并排在一起
?? ??? ??? ?unit的宽要足够宽
?? ??? ? */
?? ??? ? .carousel .unit {
?? ??? ? ?? ?position: absolute;
?? ??? ? ?? ?width: 9999px;
?? ??? ? ?? ?left: 0;
?? ??? ? ?? ?top: 0;
?? ??? ? }
?? ??? ? .carousel .unit li {
?? ??? ? ?? ?float: left;
?? ??? ? ?? ?width: 560px;
?? ??? ? ?? ?height: 300px;
?? ??? ? }
?? ??? ? .btns a {
?? ??? ? ?? ?position: absolute;
?? ??? ? ?? ?width: 30px;
?? ??? ? ?? ?height: 60px;
?? ??? ? ?? ?top: 50%;
?? ??? ? ?? ?margin-top: -30px;
?? ??? ? ?? ?background-color: rgba(0, 0, 0, .5);
?? ??? ? ?? ?color: #fff;
?? ??? ? ?? ?font-size: 20px;
?? ??? ? ?? ?line-height: 60px;
?? ??? ? ?? ?text-align: center;
?? ??? ? }
?? ??? ? .btns a:first-child {
?? ??? ? ?? ?left: 10px;
?? ??? ? }
?? ??? ? .btns a:last-child {
?? ??? ? ?? ?right: 10px;
?? ??? ? }
?? ??? ? .circles {
?? ??? ? ?? ?position: absolute;
?? ??? ? ?? ?width: 140px;
?? ??? ? ?? ?height: 20px;
?? ??? ? ?? ?left: 50%;
?? ??? ? ?? ?margin-left: -70px;
?? ??? ? ?? ?bottom: 30px;
?? ??? ? }
?? ??? ? .circles ol {
?? ??? ? ?? ?width: 150px;
?? ??? ? }
?? ??? ? .circles ol li {
?? ??? ? ?? ?float: left;
?? ??? ? ?? ?width: 20px;
?? ??? ? ?? ?height: 20px;
?? ??? ? ?? ?margin-right: 10px;
?? ??? ? ?? ?background-color: orange;
?? ??? ? ?? ?border-radius: 50%;
?? ??? ? }
?? ??? ? .circles ol li.cur {
?? ??? ? ?? ?background-color: yellow;
?? ??? ? }
?? ?</style>
</head>
<body>
?? ?<div class="carousel" id="carousel">
?? ??? ?<ul class="unit" id="unit">
?? ??? ??? ?<li><img src="images/0.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/1.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/2.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/3.jpg" alt=""></li>
?? ??? ??? ?<li><img src="images/4.jpg" alt=""></li>
?? ??? ?</ul>
?? ??? ?<div class="btns">
?? ??? ??? ?<a href="javascript:void(0)" id="leftBtn"><</a>
?? ??? ??? ?<a href="javascript:void(0)" id="rightBtn">></a>
?? ??? ?</div>
?? ??? ?<div class="circles" id="circles">
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li class="cur"></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ??? ?<li></li>
?? ??? ??? ?</ol>
?? ??? ?</div>
?? ?</div>
?? ?<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
?? ?<script type="text/javascript">
?? ?// 获取元素
?? ?var $unit = $("#unit");
?? ?var $leftBtn = $("#leftBtn");
?? ?var $rightBtn = $("#rightBtn");
?? ?var $circles = $("#circles ol li");
?? ?var length = $circles.length;
?? ?// console.log(length);
?? ?// 定义信号量 有效范围: 0, 1, 2, 3, 4
?? ?var idx = 0;
?? ?// 克隆第一张图片追加到最后一张
?? ?$unit.children("li:first").clone().appendTo($unit);
?? ?// 右按钮的点击事件
?? ?$rightBtn.click(function() {
?? ??? ?// 防流氓
?? ??? ?if ($unit.is(":animated")) {
?? ??? ??? ?return;
?? ??? ?}
?? ??? ?// 拉动策略: 先拉动， 再瞬移
?? ??? ?idx++;
?? ??? ?console.log(idx);
?? ??? ?// 信号量 有效值是: 0, 1, 2, 3, 4, 5(5是猫腻图)
?? ??? ?$unit.animate({"left": -560 * idx}, 1000, function() {
?? ??? ??? ?// 当猫腻图完全显示之后验证信号量
?? ??? ??? ?if (idx > length - 1) {
?? ??? ??? ??? ?// idx 归零
?? ??? ??? ??? ?idx = 0;
?? ??? ??? ??? ?// 瞬间移动到真图
?? ??? ??? ??? ?$unit.css("left", 0);
?? ??? ??? ?}
?? ??? ?})
?? ??? ?// 小圆点在1000ms之内，对应的是idx = 5 是猫腻图
?? ??? ?// 0 - 4 是有效值， 5对应的是猫腻图
?? ??? ?// 定义一个变量用于中转信号量
?? ??? ?var i = idx <= 4 ? idx : 0;
?? ??? ?$circles.eq(i).addClass("cur").siblings().removeClass("cur");
?? ?})
?? ?// 左按钮点击事件
?? ?$leftBtn.click(function() {
?? ??? ?// 防流氓
?? ??? ?if ($unit.is(":animated")) {
?? ??? ??? ?return;
?? ??? ?}
?? ??? ?// 左按钮的拉动策略: 先瞬移， 再拉动
?? ??? ?idx--;
?? ??? ?// 边界判断
?? ??? ?if (idx < 0) {
?? ??? ??? ?idx = length - 1;
?? ??? ??? ?// 瞬间移动到猫腻图
?? ??? ??? ?$unit.css("left", -560 * length);
?? ??? ?}
?? ??? ?console.log(idx);
?? ??? ?// 拉动
?? ??? ?$unit.animate({"left": -560 * idx}, 1000);
?? ??? ?// 当前小圆点加cur
?? ??? ?$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
?? ?})
?? ?// 小圆点事件
?? ?$circles.mouseenter(function() {
?? ??? ?// 改变信号量
?? ??? ?idx = $(this).index();
?? ??? ?console.log(idx);
?? ??? ?// 拉动
?? ??? ?$unit.stop(true).animate({"left": -560 * idx}, 600);
?? ??? ?// 小圆点加cur
?? ??? ?$(this).addClass("cur").siblings().removeClass("cur");
?? ?})
?? ?</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。
经验首页