HTML+CSS+jQuery implements carousel advertising images

This time I will bring you HTML+CSS+jQuery to implement carousel advertising images, and HTML+CSS+jQuery to implement carousel advertising images. What are the precautions?. The following is a practical case. Let’s take a look. one time.

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)); 
?>

I believe you have mastered the case after reading this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS implements positioning navigation bar

How to create paging effect with jquery

How to deal with jQuery being unable to trigger the binding event when adding elements

Regular verification formula for mobile phone number

The above is the detailed content of HTML+CSS+jQuery implements carousel advertising images. For more information, please follow other related articles on the PHP Chinese website!