집 >웹 프론트엔드 >JS 튜토리얼 >JS는 캐러셀 이미지를 쉽게 구현합니다.

JS는 캐러셀 이미지를 쉽게 구현합니다.

php中世界最好的语言원래의: 2018-04-18 17:10:212527검색

이번에는 JS로 캐러셀 이미지를 쉽게 구현하는 방법을 알려드리겠습니다. JS로 캐러셀 이미지를 쉽게 구현하기 위한 주의사항은 무엇인가요? 아래에서 실제 사례를 살펴보겠습니다.

생각:

1. 먼저 이미지를 담는 컨테이너가 있어야 하며, 단일 이미지의 너비와 높이로 설정하고, 이렇게 하면 한 번에 하나의 이미지만 표시할 수 있습니다. 이미지를 배치하기 위해 컨테이너의 이미지는 부동 형식입니다. 동시에 사진이 회전할 때 목록의 왼쪽 값을 변경하면 표시되는 사진이 변경됩니다.
3. 사진 회전식은 타이머를 통해 목록의 왼쪽 값을 변경하여 사진이 반복적으로 표시되도록 합니다.
4. 타이머를 지우면 사진 회전이 중지됩니다. . 마우스가 밖으로 나가면 계속됩니다. 현재 표시된 사진에 해당하는 작은 점 그룹이 있습니다. 동시에 해당 사진을 클릭하면 볼 수 있습니다. 사진을 클릭하면 좌우로 슬라이드하여 볼 수 있습니다

코드:

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>轮播图</title>
 <styletype="text/css">
  .container{
   margin:0 auto;
   width:600px;
   height:400px;
   position: relative;
   overflow: hidden;
   border:4px solid gray;
   box-shadow: 3px 3px 5px gray;
   border-radius:10px;
  }
  .list{
   width:4200px;
   height:400px;
   position: absolute;
   top:0px;
  }
  img{
   float:left;
   width:600px;
   height:400px;
  }
  .dots{
   position: absolute;
   left:40%;
   bottom:30px;
   list-style: none;
  }
  .dots li{
   float:left;
   width:8px;
   height:8px;
   border-radius: 50%;
   background: gray;
   margin-left:5px
  }
  .dots .active{
   background: white;
  }
  .pre,.next{
   position: absolute;
   top:40%;
   font-size:40px;
   color:white;
   text-align:center;
   background: rgba(128,128,128,0.5);
   /* display:none;*/
  }
  .pre{
   left:30px;
  }
  .next{
   right:30px;
  }
 </style>
</head>
<body>
 <pclass="container">
  <pclass="list"style=" left:-600px;">
   <imgsrc="img/5.jpg">
   <imgsrc="img/1.jpg">
   <imgsrc="img/2.jpg">
   <imgsrc="img/3.jpg">
   <imgsrc="img/4.jpg">
   <imgsrc="img/5.jpg">
   <imgsrc="img/1.jpg">
  </p>
  <ulclass="dots">
   <liindex=1class="active dot"></li>
   <liindex=2class="dot"></li>
   <liindex=3class="dot"></li>
   <liindex=4class="dot"></li>
   <liindex=5class="dot"></li>
  </ul>
  <pclass="pre"><</p>
  <pclass="next">></p>
 </p>
<scripttype="text/javascript">
 var index=1,timer;
 function init(){
  eventBind();
  autoPlay();
 }
 init();
 function autoPlay(){
   timer =setInterval(function () {
   animation(-600);
   dotIndex(true);
  },1000)
 }
 function stopAutoPlay() {
  clearInterval(timer);
 }
 function dotIndex(add){
  if(add){
   index++;
  }
  else{
   index--;
  }
  if(index>5){
   index = 1;
  }
  if(index<1){
   index=5;
  }
  dotActive();
 }
 function dotActive() {
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len ;i++){
   dots[i].className="dot";
  }
 
  for(vari=0;i<len;i++){
   /*此处可以不用parseInt，当不用全等时*/
   if(index === parseInt(dots[i].getAttribute("index"))){
    dots[i].className="dot active";
   }
  }
 }
 function eventBind(){
  /*点的点击事件*/
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len;i++){
   (function(j){
    dots[j].onclick=function(e){
     varind=parseInt(dots[j].getAttribute("index"));
     animation((index - ind)*(-600));/*显示点击的图片*/
     index= ind;
     dotActive();
    }
   })(i)
  }
  /*容器的hover事件*/
  varcon=document.getElementsByClassName("container")[0];
  /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
  con.onmouseover=function(e) {
   stopAutoPlay();
  }
  con.onmouseout=function(e){
   autoPlay();
  }
  /*箭头事件的绑定*/
   varpre=document.getElementsByClassName("pre")[0];
   varnext=document.getElementsByClassName("next")[0];
   pre.onclick=function(e) {
    dotIndex(false);
    animation(600);
   }
  next.onclick=function(e) {
   dotIndex(true);
   animation(-600);
  }
 }
 function animation(offset){
  varlists=document.getElementsByClassName("list")[0];
  varleft=parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
  if(left<-3000){
   lists.style.left="-600px";
  }
  else if(left>-600){
   lists.style.left = "-3000px";
  }
  else{
   lists.style.left = left+"px";
  }
 }
</script>
</body>
</html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!