使用JS实现图片轮播的实例(前后首尾相接)
程序员文章站
2022-07-06 20:49:52
最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（...
最近各种跑面试，终于还是被问到这个，一脑子浆糊，当时没想出来首尾相接怎么搞，回来之后研究了一波，终于搞出来了，不多说，直接看代码
代码参考了一位已经写好了图片轮播功能的（再次表示感谢），但是没有首尾相接的功能，本人在此基础上增加了首尾相接功能。
效果如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>图片轮播</title>
<style type="text/css">
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
a{text-decoration: none;}
#wrapper{
position: relative;
margin: 30px auto; /* 上下边距30px，水平居中 */
width: 400px;
height: 200px;
}
#banner{
position:relative;
width: 400px;
height: 200px;
overflow: hidden;
}
.imglist{
position:relative;
width:2000px;
height:200px;
z-index: 10;
overflow: hidden;
}
.imglist li{float:left;display: inline;}
#prev,
#next{
position: absolute;
top:80px;
z-index: 20;
cursor: pointer;
opacity: 0.2;
filter:alpha(opacity=20);
}
#prev{left: 10px;}
#next{right: 10px;}
#prev:hover,
#next:hover{opacity: 0.5;filter:alpha(opacity=50);}
</style>
</head>
<body>
<div id="wrapper"><!-- 最外层部分 -->
<div id="banner"><!-- 轮播部分 -->
<ul class="imglist"><!-- 图片部分 -->
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/1.jpg" width="400px" height="200px" alt="1"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/2.jpg" width="400px" height="200px" alt="2"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/3.jpg" width="400px" height="200px" alt="3"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/4.jpg" width="400px" height="200px" alt="4"></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./img/5.jpg" width="400px" height="200px" alt="5"></a></li>
</ul>
<img src="./img/prev.png" width="40px" height="40px" id="prev">
<img src="./img/next.png" width="40px" height="40px" id="next">
</div>
</div>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var curindex = 0, //当前index
imglen = $(".imglist li").length; //图片总数
$(".imglist").css("width", (imglen+1)*400+"px");
// 定时器自动变换3秒每次
var autochange = setinterval(function(){
if(curindex < imglen-1){
curindex ++;
}else{
curindex = 0;
}
//调用变换处理函数
changeto(curindex);
},3000);
//左箭头滑入滑出事件处理
$("#prev").hover(function(){
//滑入清除定时器
clearinterval(autochange);
}, function(){
//滑出则重置定时器
autochangeagain();
});
//左箭头点击处理
$("#prev").click(function(){
//根据curindex进行上一个图片处理
// curindex = (curindex > 0) ? (--curindex) : (imglen - 1);
if (curindex == 0) {
var element = document.createelement("li");
element.innerhtml = $(".imglist li")[imglen - 1].innerhtml;
// $(".imglist li")[imglen - 1].remove();
$(".imglist").prepend(element);
$(".imglist").css("left", -1*400+"px");
changeto(curindex);
curindex = -1;
} else if (curindex == -1) {
$(".imglist").css("left", -(imglen-1)*400+"px");
curindex = imglen-2;
$(".imglist li")[0].remove();
changeto(curindex);
} else {
--curindex;
changeto(curindex);
}
});
//右箭头滑入滑出事件处理
$("#next").hover(function(){
//滑入清除定时器
clearinterval(autochange);
}, function(){
//滑出则重置定时器
autochangeagain();
});
//右箭头点击处理
$("#next").click(function(){
// curindex = (curindex < imglen - 1) ? (++curindex) : 0;
console.log(imglen);
if (curindex == imglen-1) {
var element = document.createelement("li");
element.innerhtml = $(".imglist li")[0].innerhtml;
// $(".imglist li")[0].remove();
$(".imglist").append(element);
++curindex;
} else if (curindex == imglen) {
curindex = 0;
$(".imglist").css("left", "0px");
$(".imglist li")[imglen].remove();
curindex++;
} else {
++curindex;
}
changeto(curindex);
});
//清除定时器时候的重置定时器--封装
function autochangeagain(){
autochange = setinterval(function(){
if(curindex < imglen-1){
curindex ++;
}else{
curindex = 0;
}
//调用变换处理函数
changeto(curindex);
},3000);
}
function changeto(num){
var goleft = num * 400;
$(".imglist").animate({left: "-" + goleft + "px"},500);
}
</script>
</body>
</html>
以上这篇使用js实现图片轮播的实例(前后首尾相接)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。