左右按钮控制轮播图切换,用jquery怎么写,不用框架,代码如下

发布网友发布时间：2022-04-26 15:17

共1个回答

热心网友时间：2022-05-14 17:52

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 796px;
margin: 50px auto;
position: relative;
height: 296px;
}
#img-box img {
position: absolute;
width: 796px;
height: 305px;
}
#uls {
position: absolute;
width: 100%;
text-align: center;
bottom: 0px;
list-style: none;
margin: 0;
padding: 0;
}
#uls li {
width: 30px;
height: 30px;
line-height: 30px;
background: white;
border-radius: 10px;
display: inline-block;
}
#uls li:first-child {
background: red;
}
button {
position: absolute;
top: 50%;
display: none;
}
button#prev {
left: 10px;
}
button#next {
right: 10px;
}
</style>
</head>

<body>
<div id="box">
<div id="img-box">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=d1d0602ff4dcd100cb9cfc21428b47be/4afbfbedab64034f92e70824a3c379310a551dee.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=2496193005f79052e91f433e3cf3d738/a044ad345982b2b7d49053e73dadcbef76099b81.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=7b0853e0dbca7bcb7b7bc32f8e096b3f/0df431adcbef76094230f3bc22dda3cc7cd99edd.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=b3b40b5d9e58d109c2e3adb2e159ccd0/0ff41bd5ad6eddc43f3adcd835dbb6fd52663337.jpg" alt="">
<img src="https://imgsa.baidu.com/news/q%3D100/sign=e43f072b00d79123e6e090749d355917/9825bc315c6034a87060efa2c713495409237616.jpg" alt="">
</div>
<ul id="uls">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="prev"><</button>
<button id="next">></button>
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script>
var time, len;
var index = 0
len = $('#uls li').length;
time = setInterval(slide, 1000);
$('#box').hover(function() {
clearInterval(time);
$('#prev,#next').css('display', 'block');
}, function() {
time = setInterval(slide, 1000);
$('#prev,#next').css('display', 'none');
});
$('#prev').click(function() {
clearInterval(time);
var len = $('#uls li').length - 1;
var imgshowindex = $("#img-box img:visible").index();
if (imgshowindex <= 0) {
index = len;
} else {
index = --imgshowindex;
}
showindeximg(index);
});
$('#next').click(function() {
clearInterval(time);
var imgshowindex = $("#img-box img:visible").index();
index = ++imgshowindex;
if (index == len) index = 0;
showindeximg(index);
});

function slide() {
index++;
if (index == len) index = 0;
$('#uls li').css('background', 'white').eq(index).css('background', 'red');
$('#img-box img').fadeOut();
$('#img-box img').eq(index).fadeIn();
}

function showindeximg(index) {
$("#img-box img").hide().eq(index).show();
$("#uls li").css("background", "white").eq(index).css("background", "red");
}
</script>

</body>

</html>

具体实现，你可以复制下来运行下。