js 实现横向轮播效果
Posted linjiangxian
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 实现横向轮播效果相关的知识,希望对你有一定的参考价值。
参考:https://www.cnblogs.com/LIUYANZUO/p/5679753.html
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>js横向轮播</title> <style type="text/css"> body margin: 0; #container position: relative; width: 100%; height: 300px; overflow: hidden; z-index: -1; #list position: absolute; width: 4200px; height: 300px; #list .img float: left; /* width: 375px; */ height: 300px; </style> </head> <body> <div id="container"> <div id="list"></div> </div> </body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> window.onload = function() var container = document.getElementById(‘container‘), list = document.getElementById(‘list‘), index = 1; $(‘#list‘).css(‘left‘, -screen.width + ‘px‘); var timer; var imgList = [ src: ‘img/1.jpg‘ , src: ‘img/2.jpg‘ , src: ‘img/3.jpg‘ , src: ‘img/4.jpg‘ , src: ‘img/5.jpg‘ ], l = imgList.length - 1, len = imgList.length, w = screen.width, string = ‘‘; string = makeStr(imgList, l); $(‘#list‘).append(string); var j = 0; while (j < imgList.length) string = makeStr(imgList, j); $(‘#list‘).append(string); j++; string = makeStr(imgList, 0); $(‘#list‘).append(string); $(‘#list .img‘).css(‘width‘, screen.width + ‘px‘); function makeStr(arr, i) string = "<div class=‘img‘ style=‘background:url(" + arr[i].src + ") no-repeat;background-size:100%‘/></div>"; return string; function animate(offset) var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + ‘px‘; if (newLeft > -w) list.style.left = w * len + ‘px‘; if (newLeft < -w * len) list.style.left = -w + ‘px‘; function play() timer = setInterval(function() start(); , 2000) function start() index += 1; if (index > len) index = 1 animate(-w); ; function stop() clearInterval(timer); if (imgList.length > 1) play(); </script> </html>
以上是关于js 实现横向轮播效果的主要内容,如果未能解决你的问题,请参考以下文章