<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<script src="./dist/js/jquery.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>
<link href="./dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
*{
margin: 0;padding: 0;}
ul, li{
list-style: none;}
.js-mask{
width: 198px;height: 132px;border: 1px solid black;position: relative;overflow: hidden;margin:100px;}
.js-mask ul{
position: absolute; left:0; top:0;}
.js-mask ul li{
float:left; width:198px; height: 132px;}
.js-mask ul li img{
width: 198px; height: 132px;}
</style>
<body>
<div class="js-mask">
<ul>
<li><img src="img/1.jpg"/> </li>
<li><img src="img/2.jpg"/> </li>
<li><img src="img/3.jpg"/> </li>
<li><img src="img/4.jpg"/> </li>
</ul>
</div>
<script>
(function(){
var oUl = document.querySelectorAll('.js-mask ul')[0];
//console.log(oUl.innerHTML + oUl.innerHTML);
// 获取ul里的li进行拼接，然后重新赋给ul
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML // oUl.innerHTML += oUl.innerHTML
// 由于ul初始时是4张图片的宽度，现在把宽度变成是8张的宽度
// 获取li，根据li的宽度重新设置ul的宽度
var oLies = document.querySelectorAll('.js-mask li'); // 获取li
oUl.style.width = oLies[0].offsetWidth * oLies.length + 'px'; // 设置宽度，li的宽度*li的个数
var speed = -1;
setInterval(function(){
if (oUl.offsetLeft <= -oUl.offsetWidth*.5){
oUl.style.left = '0px';
}
oUl.style.left = oUl.offsetLeft + speed + 'px';
}, 300/30);
})();
</script>
</body>
</html>jqueryは、画像がゆっくりと左に回転することを認識します
おすすめ
転載: blog.csdn.net/qq_36129701/article/details/82686734
おすすめ
ランキング