JS 如何实现动态无缝轮播效果? 本篇文章为大家详细介绍一下 JS 实现动态无缝轮播, 文中示例代码介绍的非常详细. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
首先, 我们来看一下效果图:
效果图是这样的, 我们需要定义一个 div, 并放入三张图片, 还需要左右两个按钮, 以及底下三个按钮三个 div.
下面来看看代码:
html 代码:
- <div class="banner" id="banner">
- <ul class="clear">
- <li style="left:0"><img src="k1.jpg"></li>
- <li style="left:100%"><img src="k-2.jpg"></li>
- <li style="left:100%"><img src="k-3.jpg"></li>
- </ul>
- <div class="pageNav"></div>
- <div class="leftBtn"></div>
- <div class="rightBtn"></div>
- </div>
CSS 代码:
- .clear:after{
- display:block;
- content:"";
- clear:both;
- }
- .banner{
- width: 100%;
- position:relative;
- height: 390px;
- }
- .banner ul{
- width: 100%;
- height: 390px;
- list-style-type:none;
- overflow: hidden;
- }
- .banner ul li{
- width: 100%;
- position: absolute;
- }
- .pageNav{
- position: absolute;
- left:50%;
- bottom:20px;
- transform: translateX(-50%);
- }
- .pageNav a{
- display:inline-block;
- margin:0 5px;
- width: 20px;
- height: 20px;
- background-color:#fff;
- border-radius:50%;
- border:2px solid #000;
- cursor:pointer;
- }
- .pageNav a.cur{
- background-color:red;
- }
- .leftBtn, .rightBtn{
- position:absolute;
- top: 50%;
- transform:translateY(-50%);
- width: 40px;
- height: 50px;
- background-color:rgba(0, 0, 0, 0.5);
- cursor:pointer;
- }
- .leftBtn{
- left:0;
- }
- .rightBtn{
- right:0;
- }
- .leftBtn:hover,.rightBtn:hover{
- background-color:rgba(0, 0, 0, 0.8);
- }
JS 代码:
- var banner = document.getElementById("banner");
- var ul = banner.getElementsByTagName("ul")[0];
- var li = ul.getElementsByTagName("li");
- var pageNav = banner.getElementsByClassName("pageNav")[0],
- leftBtn = document.getElementsByClassName("leftBtn")[0],
- rightBtn = document.getElementsByClassName("rightBtn")[0],
- n = 0,
- index = 0,
- timerElem = null,
- state = false;
- for (var i = 0; i <li.length; i++) { // 给图片底下添加按钮
- pageA = document.createElement("a");
- if (i == 0) {
- pageA.className = "cur";
- }
- pageNav.appendChild(pageA);
- }
- pageNav.addEventListener('click', pageNavClick, false);
- function pageNavClick(e) {
- if (state) {
- return;
- }
- e = e || Windows.event; // 兼容性考虑
- for (var i = 0; i < li.length; i++) {
- if (pageNav.children[i] == e.target) {
- index = n;
- var offset = i - n;
- n = i;
- showBtn(n);
- if (offset> 0) {
- showImg( - 100);
- } else {
- showImg(100);
- }
- }
- }
- }
- function showBtn(index) {
- for (var z = 0; z <li.length; z++) {
- pageNav.children[z].className = "";
- }
- pageNav.children[index].className = "cur";
- }
- function showImg(offset) {
- clearInterval(timerElem);
- var speed = offset / 20;
- timerElem = setInterval(function() {
- state = true;
- if (parseInt(li[n].style.left) == 0) {
- state = false;
- clearInterval(timerElem);
- li[n].style.left = "0";
- for (var l = 0; l < n; l++) {
- li[l].style.left = "-100%"
- }
- for (var r = n + 1; r < li.length; r++) {
- li[r].style.left = "100%";
- }
- } else {
- li[n].style.left = parseInt(li[n].style.left) + speed + "%";
- li[index].style.left = parseInt(li[index].style.left) + speed + "%";
- }
- },
- 100)
- }
- leftBtn.onclick = function() {
- if (state) {
- return;
- }
- index = n;
- n--;
- if (n < 0) {
- n = li.length - 1;
- li[n].style.left = "-100%";
- }
- showBtn(n);
- showImg(100);
- }
- rightBtn.onclick = function() {
- if (state) {
- return;
- }
- index = n;
- n++;
- if (n> li.length - 1) {
- n = 0;
- li[n].style.left = "100%";
- }
- showBtn(n);
- showImg( - 100);
- }
- var timer;
- timer = setInterval(autoLunbo, 3000);
- function autoLunbo() {
- rightBtn.onclick();
- }
- banner.onmouseover = function() {
- clearInterval(timer);
- }
- banner.onmouseout = function() {
- timer = setInterval(autoLunbo, 3000);
- }
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17511.html