java实现选项卡定时轮播_jQuery实现选项联动轮播效果【附实例】

下面小编就为大家带来一篇jQuery实现选项联动轮播效果【附实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考

JQ轮播三级连锁

创意空间

永恒的爱

浪漫真情

珍贵独特

CSS

*{

border:none;

margin: 0;

padding: 0;

list-style: none;

outline: none;

}

html,body{

width: 100%;

height: 100%;

}

/*方法二*/

body{

display: flex;

align-items: center;/****水平居中****/

justify-content: center;/*垂直居中*/

}

.parent{

width: 750px;

height: 400px;

/*方法一*/

/*margin: 0 auto;*/

/*position: relative;*/

/*top: 50%;*/

/*margin-top: -200px;*/

}

/*轮播*/

.top p{

width: 90%;

margin: 0 auto;

}

.top p a{

display: inline-block;

line-height: 30px;

width: 23%;

padding: 10px 0;

text-align: center;

text-decoration: none;

border: 2px solid transparent;

color: slategray;

}

.top p a.selected{

border: 2px solid #e4393c;

color: #e4393c;

}

/*图片*/

.fours{

width: 650px;

margin: 0 auto;

height: 300px;

position: relative;

margin-top: 30px;

}

.fours a{

position: absolute;

}

JS

定义变量和定时器，变量等价于eq(index)中index,自动轮播是可以的，关键在于，鼠标进入选项卡区域时候，怎么对应想要的轮播画面，

方法：停止定时器，获取当前选项卡下标，匹配对应的轮播画面显示出来。

var a=0;

var t=null;

$(function(){

$('.fours>a:not(:first-child)').hide();

t=setInterval("autoMove()",2000);

//鼠标进入轮播停止

$('.parent').hover(function(){clearInterval(t)},function(){t=setInterval("autoMove()",2000);});

// 当鼠标进去对应选项时候图片对应变化

$(".top p>a").hover(function(){

clearInterval(t);

var num=$(this).index();

showThis(num);

//console.log(num);

})

});

function autoMove(){

a++;

if(a>=4){

a=0;

}

play(a);

}

function play(a){

$('.fours>a').filter(":visible").fadeOut(500).parent().children().eq(a).fadeIn(1000);

$('.top p a').eq(a).addClass("selected").siblings().removeClass("selected");

}

//鼠标进入的情况

function showThis(sum){

$(".fours>a").eq(sum).fadeIn(1000).siblings().fadeOut(500);

$(".top p a").eq(sum).addClass("selected").siblings().removeClass("selected");

}

以上这篇jQuery实现选项联动轮播效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。