jQuery轮播图和选项卡
使用jQuery的页面需加
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/index.js"></script>
index.js
$(function(){
var current=0; //当前的
var count=$(".pics-list>li").length;图片的个数
function move(){
$(".points-list>li").eq(current).addClass("active").siblings().removeClass("active");当前的元素显示 同级元素移除
$(".pics-list").css("left",-1200*current+"px"); 左边边距 是当前的-1200px 才能显示下一张图片
}
自动轮播
function next(){
if(current < count-1){ 当前图片不能超过图片个数减一
current++; 当前图片的跳转
}else{
current=0; 当前为零
}
move();
}
计时器
var timer=setInterval(() => {
next();
}, 3000);秒数
//鼠标移入移出定时器
移入暂停
移出开始
$(".banner-box").hover(function(){
clearInterval(timer);暂停
},function(){
timer=setInterval(() => {
next();
}, 3000);开始
})
点击点也切换图片
$(".points-list>li").click(function(){
current=$(this).index();当前对象的下标
move();
})
$(".buts>.next").click(function(){
next();
})
$(".buts>.prev").click(function(){
自动轮播向左
if(current>0){
current--;
}else{
current=count-1;
}
move();
})
})
选项卡 table切换
$(function(){
$(".top-list .title").click(function(){
$(this).addClass("active").siblings().removeClass("active");显示当前对象 同级其他元素除移
$(".top-list-main ul").eq($(this).index()).show().siblings().hide(); 当前下标显示同级其他隐藏
})
})
