Exemple d'implémentation JS d'un carrousel d'images-js tutoriel-php.cn

Exemple d'implémentation JS d'un carrousel d'images

小云云

Libérer： 2018-02-12 09:04:09

original

1460 Les gens l'ont consulté

Cet article vous apporte principalement un exemple d'utilisation de JS pour implémenter un carrousel d'images (le recto et le verso sont connectés bout à bout). Le code fait référence à quelqu'un qui a déjà écrit la fonction carrousel d'images (merci encore), mais il existe). pas de connexion de bout en bout. Sur cette base, j'ai ajouté la fonction de connexion de bout en bout.

L'effet est le suivant :

<!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,p,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>
 <p id="wrapper"><!-- 最外层部分 -->
 <p 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">
</p>
</p>
<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>

Copier après la connexion

Recommandations associées ：

Vue encapsule Swiper pour implémenter le partage de code de l'effet carrousel d'images

JQuery implémente le partage d'exemples de carrousel d'images par points

Comment implémenter l'effet carrousel d'images Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!