jquery点击按钮轮播换图
程序员文章站
2022-07-03 16:42:28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 图片的本地文件的位置-->
<script src="./js/jquery-3.5.1.js"></script>
<style>
img {
width: 120px;
height: 90px;
}
* {
margin: 0;
padding: 0;
}
#view {
width: 120px;
height: 90px;
overflow: hidden;
}
#context {
width: 240px;
}
</style>
<body>
<div id="view">
<div id="context">
<!-- 轮播的图片-->
<img src="./img/xdangao.png"><img src="./img/tx5a.jpg">
</div>
</div>
<button>换图</button>
<script>
var timer;
var offsetX = 0;
//初始化
$(function () {
$("#context")
.width(function () {
return $(this).width()* 2;
})
.append($("div img").clone());
});
//定义动画
function fun() {
offsetX = $('#view')[0].scrollLeft;
offsetX += 1;
$('#view')[0].scrollLeft = offsetX;
if (offsetX % 120 == 0)
clearInterval(timer);
// if(offsetX ==240)
// $('#view')[0].scrollLeft=0;
}
//触发事件
$("button").on('click', function () {
if (timer)
clearInterval(timer);
timer = setInterval(fun, 17);
});
</script>
</body>
</html>
本文地址：https://blog.csdn.net/sofewave_hand_LI/article/details/109263759