<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<span id="up"> <</span>
<div id="img">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
</div>
<span id="down">></span>
</body>
<script type="text/javascript">
$(function() {
switchTab("#img","span","#up","#down",6,1000,10000)
// switchTab(父节点,一级子节点,上一页,下一页,每组切换图片数量,自动切换间隔,点击按钮后停止多少秒自动播放)
function switchTab(pDom,sDom,up,down,num,min,pause) {
var stop = false
var timer
goTimer(stop)
function goTimer(bl) {
if (bl == false) {
goclock()
} else {
setTimeout(function() {
bl = true
goclock()
}, pause)
}
}
function goclock() {
timer = setInterval(clock, min);
function clock() {
$(`${pDom} ${sDom}:nth-child(1)`).before($(`${pDom} ${sDom}`).eq(`${-num}`).nextAll())
}
}
$(`${up}`).on('click', function() {
stop = true
goTimer(stop)
clearInterval(timer)
//关键代码
$(`${pDom} ${sDom}:nth-child(1)`).before($(`${pDom} ${sDom}`).eq(`${-num}`).nextAll())
})
$(`${down}`).on('click', function() {
stop = true
goTimer(stop)
clearInterval(timer)
//关键代码
$(`${pDom} ${sDom}:last-child`).after($(`${pDom} ${sDom}:nth-child(${num})`).prevAll().get().reverse())
})
}
})
</script>
</html>
JQuery极简代码2行代码完成轮播图，手动+自动切换
猜你喜欢
转载自blog.csdn.net/rexfow/article/details/124356469
今日推荐
周排行