jquery實現(xiàn)左右輪播切換效果
本文實例為大家分享了jquery實現(xiàn)左右輪播切換效果展示的具體代碼,供大家參考,具體內(nèi)容如下
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/banner.css" rel="external nofollow" > </head> <body> <div id="banner"> <!-- 圖片區(qū)域 --> <ul class="banner-img" data-load="bannerImgs"> <!-- <li> <a href="${product-details.html?lid=28}" rel="external nofollow" > <img src="${img/index/banner1.png}"> </a> </li> --> <li style="left:50%;"> <img src="img/index/banner1.png"> </li> </ul> <!--左右方向按鈕--> <a href="javascript:;" class="ck-slide ck-left" data-move="left"></a> <a href="javascript:;" class="ck-slide ck-right" data-move="right"></a> <!--導(dǎo)航小圓點--> <ul class="indicators" data-load="bannerInds"> <!-- <li></li> --> </ul> </div> <script src="js/jquery.min.js"></script> <script src="js/banner.js"></script> </body> </html>
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+=`<li> <a href="${item.href}" rel="external nofollow" title="${item.title}"> <img src="${item.img}"> </a> </li>`; } html+=`<li> <a href="${data[0].href}" rel="external nofollow" title="${data[0].title}"> <img src="${data[0].img}"> </a> </li>`; console.log(html); var $ulImg=$(".banner-img"); $ulImg.html(html).css("width",LIWIDTH*(data.length+1)); var $ids=$(".indicators"); $ids.html("<li></li>".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)); ?>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery實現(xiàn)的3D版圖片輪播示例【滑動輪播】
- jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
- 酷炫jQuery全屏3D焦點圖動畫效果
- 基于Jquery和html5實現(xiàn)炫酷的3D焦點圖動畫
- 基于jquery的圖片輪播 tab切換組件
- jQuery插件實現(xiàn)帶圓點的焦點圖片輪播切換
- jQuery圖片輪播滾動切換代碼分享
- jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果
- jquery帶有索引按鈕且自動輪播切換特效代碼分享
- jQuery實現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能【附源碼下載】
相關(guān)文章
jQuery Real Person驗證碼插件防止表單自動提交
這篇文章為大家介紹了一款jQuery驗證碼插件Real Person,可以防止自動提交表單2015-11-11jquery獲取file表單選擇文件的路徑、名字、大小、類型
今天小編就為大家分享一篇關(guān)于jquery獲取file表單選擇文件的路徑、名字、大小、類型,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-01-01jQuery實現(xiàn)級聯(lián)下拉框?qū)崙?zhàn)(5)
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)級聯(lián)下拉框的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02JQuery中dataGrid設(shè)置行的高度示例代碼
dataGrid 設(shè)置行的高度在jquery中如何做到,下面有個不錯的教程,感興趣的朋友可以參考下2014-01-01基于jquery實現(xiàn)表格內(nèi)容篩選功能實例解析
對于表格來說,當(dāng)數(shù)據(jù)比較多的時候,我們無法一頁一頁的查找,這樣我們就可以進(jìn)行篩選操作,這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)表格內(nèi)容篩選功能的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
使用jQuery UI的tooltip()函數(shù),可以使懸浮提示框不再那么千篇一律,以下是完整的代碼,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-06-06jQuery lazyLoad圖片延遲加載插件的優(yōu)化改造方法分享
jQuery lazyLoad.js插件 是一款基于jquery框架,可以“實現(xiàn)”圖片延遲加載的插件2013-08-08jQuery實現(xiàn)產(chǎn)品對比功能附源碼下載
一些電商網(wǎng)站產(chǎn)品或評測網(wǎng)站會為用戶提供產(chǎn)品對比的功能,用戶只需勾選多個需要對比的產(chǎn)品,就可以進(jìn)行比對,下文給大家?guī)砹薺Query實現(xiàn)產(chǎn)品對比功能,一起看下吧2016-08-08