HTML+CSS+jQuery는 캐러셀 광고 이미지를 구현합니다.

이번에는 캐러셀 광고 이미지 구현을 위한 HTML+CSS+jQuery를 가져오겠습니다. 캐러셀 광고 이미지 구현을 위해 HTML+CSS+jQuery를 사용하여 구현할 때의 주의사항은 무엇입니까? 다음은 실제 사례입니다.

html:

nbsp;html> 
 
 
 <meta> 
 <title>Document</title> 
 <link> 
 
 
 <p> 
  <!-- 图片区域 --> 
  </p>

          
•           
    

                    

        

      <script></script>   <script></script>   

css:

/*banner部分*/ 
#banner{ 
 width:960px; 
 height:384px; 
 overflow:hidden; 
 position:relative; 
} 
#banner ul.banner-img{ 
 position:absolute; left:0; 
} 
#banner ul.banner-img>li{float:left;width:960px;} 
#banner ul.banner-img img{ 
 width:960px; 
 height:384px; 
} 
#banner a.ck-slide{ 
 position:absolute; 
 top:150px; 
 width:35px; 
 height:70px; 
 border-radius:3px; 
 background:#000; 
 opacity:0.15; 
 transition:all .3s linear; 
} 
#banner a.ck-left{ 
 left:40px; 
 background: #000 url(../img/index/arrow-left.png) no-repeat center center; 
} 
#banner a.ck-right{ 
 right:0px; 
 background:#000 url(../img/index/arrow-right.png) no-repeat center center; 
} 
#banner a.ck-slide:hover{ 
 opacity:0.3; 
} 
#banner ul.indicators{ 
 position:absolute; 
 bottom:10px; 
 left:50%; 
 margin-left:-34px; 
 list-style: none; 
} 
#banner ul.indicators li{ 
 width:12px; 
 height:12px; 
 background:#fff; 
 border-radius:50%; 
 float:left; 
 margin-right:5px; 
 transition:all .2s linear; 
} 
#banner ul.indicators li:hover,#banner ul.indicators li.hover{ 
 cursor:pointer; 
 background-color:#0AA1ED; 
}

js:

$(()=>{ 
 $.ajax({ 
  type:"get", 
  url:"php/xz.php", 
  dataType:"json" 
 }).then(data=>{ 
  console.log(data); 
  var html=""; 
  const LIWIDTH=960; 
  for(var item of data){ 
   html+=`

                       

`;    }    html+=`

                       

`;    console.log(html);    var $ulImg=$(".banner-img");    $ulImg.html(html).css("width",LIWIDTH*(data.length+1));     var $ids=$(".indicators");       $ids.html("

".repeat(data.length)).children().first().addClass("hover");       const WAIT=2000,DURA=1000;    var moved=0,timer=null;    function move(dir=1){     moved+=dir;     console.log("moved="+moved);      $ulImg.animate({      left:-LIWIDTH*moved     },DURA,()=>{      if(moved%data.length==0){       moved=0;       $ulImg.css("left",0);      }      $ids.children(`li:eq(${moved})`).addClass("hover").siblings().removeClass("hover");     })    }     var timer=setInterval(move,WAIT);     $('#banner').hover(     ()=>{ //这个是什么？      clearInterval(timer),      timer=null;     },     ()=>{      timer=setInterval(move,WAIT);     }    );     $("[data-move=right]").click(()=>{     //防止动画叠加     /*clearInterval(timer);     timer=null;     move();     timer=setInterval(move,WAIT);*/     if(!$ulImg.is(":animated"))      move();    });     $("[data-move=left]").click(()=>{     if(!$ulImg.is(":animated")){      if(moved==0){       $ulImg.css("left",-LIWIDTH*data.length);       moved=data.length;      }      move(-1);     }    });    $ids.on("mouseover","li",function(){     var $li=$(this);     var i=$li.index();     moved=i;     $ulImg.stop(true).animate({      left:-LIWIDTH*moved     },DURA,()=>{      $ids.children(":eq("+i+")")       .addClass("hover")       .siblings().removeClass("hover");     })    });   })  })

php:

<?php  
 header("Content-type:application/json"); 
 require_once("init.php"); 
 $sql="SELECT img,title,href FROM xz_index_carousel"; 
 $result=mysqli_query($conn,$sql); 
 echo json_encode(mysqli_fetch_all($result,1)); 
?>

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

추천 자료:

JS는 위치 지정 탐색 표시줄을 구현합니다

jQuery로 페이징 효과를 만드는 방법

요소를 추가할 때 바인딩 이벤트를 트리거할 수 없는 jQuery를 처리하는 방법

Mobile 전화번호 정기인증식

위 내용은 HTML+CSS+jQuery는 캐러셀 광고 이미지를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!