JS でカルーセル画像を簡単に実装-jsチュートリアル-php.cn

JS でカルーセル画像を簡単に実装

php中世界最好的语言

リリース： 2018-04-18 17:10:21

オリジナル

2482 人が閲覧しました

今回はJSでカルーセル画像を簡単に実装する方法についてお届けします。JSでカルーセル画像を簡単に実装するための注意点を紹介します。

感想:

1. まず、画像を保持するコンテナが必要です。これを 1 つの画像の幅と高さに設定し、一度に 1 つの画像のみを表示できるようにします。配置用のコンテナ内の画像は float 形式になります。同時に、画像を回転すると、リストの Left 値を変更すると、表示される画像が変わります。
3. 画像カルーセルはタイマーを使用して、画像がループで表示されるようにリストの左の値を変更します。
4. マウスを画像上に移動すると、画像の回転が停止します。 . マウスを移動すると続行します
5. 現在表示されている画像に対応する小さな点のグループが表示されます。同時に、それをクリックすると、対応する画像が表示されます。画像をクリックすると左右にスライドすると表示されます

コード:

<!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 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

js の通常の高速メモリ方法

JS を使用して Vue0.1 コードを Vue2.0 に追加してチェス盤の範囲を実現する方法

以上がJS でカルーセル画像を簡単に実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。