本文实例为大家分享了jquery实现左右轮播切换效果展示的具体代码,供大家参考,具体内容如下
html:
Document
@H_403_25@
css:
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
},()=>{
$ids.children(":eq("+i+")")
.addClass("hover")
.siblings().removeClass("hover");
})
});
})
})
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));
?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
总结
以上是编程之家为你收集整理的jquery实现左右轮播切换效果全部内容,希望文章能够帮你解决jquery实现左右轮播切换效果所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。