php如何从左往右轮播,在jquery中如何实现左右轮播切换

这篇文章主要为大家详细介绍了jquery实现左右轮播切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码，供大家参考，具体内容如下

html:

Document

data-load="bannerImgs">

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

?>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：