JavaScript滚动轮播图制作原理详解 JavaScript滚动轮播图制作原理详

本文实例为大家分享了JavaScript滚动轮播图制作原理，供大家参考，具体内容如下
滚动轮播图滚动轮播图布局关键：是所有图片并排在一起，所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略：先拉动，再瞬移
左按钮拉动策略：先瞬移，再拉动
与呼吸轮播图一样，需要做防流氓策略
复制代码：将我代码中的图片更换为你的图片，注意图片路径，还需要引入js库，我引入的是jquery-1.12.3.min.js的版本，需要js这个库的同学可以去我上传的资料中下载，引入的时候注意路径
举例：

Document* {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; }

文章图片

文章图片

文章图片

文章图片

文章图片

< >