本文实例为大家分享了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。