Home >Web Front-end >JS Tutorial >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>
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+=`
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!