html图片随圆点下标轮播,基于JavaScript实现轮播图代码

一、要点：

1.页面加载时，图片重合，叠在一起[绝对定位];

2.第一张显示，其它隐藏;

3.设置下标,给下标设置颜色让它随图片移动;

4.鼠标移动到图片上去，显示左右移动图标，鼠标移走，继续轮播;

二、实现代码：

html代码:

轮播图

<

>

1

2

3

4

5

6

css代码：

* {

padding:0px;

margin:0px;

}

.swapImg {

position:absolute;

}

.btn {

position:absolute;

height:90px;

width:60px;

background:rgba(0,0,0,0.5);/*设置背景颜色为黑色，透明度为50%*/

color:#ffffff;

text-align:center;

line-height:90px;

font-size:40px;

top:155px;/*图片高度400/2-45*/

cursor:pointer;

/*display:none;*/

}

.btnRight {

left:840px;/*图片宽度900-导航宽度60*/

}

#tabs {

position:absolute;

top:370px;

margin-left:350px;

}

.tab {

height:20px;

width:20px;

background:#05e9e2;

line-height:20px;

text-align:center;

font-size:10px;

float:left;

color:#ffffff;

margin-right:10px;

border-radius:100%;

cursor:pointer;

}

.bg {

background:#00ff21;

}

js代码：

///

var i = 0;//全局变量

//定义一个变量用来获取轮播的过程

var time;

$(function ()

{

//1.页面加载后,找到Class等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏

$(".swapImg").eq(0).show().siblings().hide();

showTime();

//当鼠标放到下标上显示该图片，鼠标移走继续轮播

$(".tab").hover(

function ()

{

//获取到当前鼠标所在的下标的索引

i = $(this).index();

show();

//鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去

clearInterval(time);

}, function ()

{

showTime();

});

//要求四，当我点击左右切换

$(".btnLeft").click(function ()

{

//1.点击之前要停止轮播

clearInterval(time);

//点了之后，-1

if (i == 0)

{

i =6;

}

i--;

show();

showTime();

});

$(".btnRight").click(function () {

//1.点击之前要停止轮播

clearInterval(time);

//点了之后，-1

if (i == 5) {

i = -1;

}

i++;

show();

showTime();

});

});

function show() {

//$("#allswapImg").hover(function ()

//{

// $(".btn").show();

//}, function ()

//{

// $(".btn").hide();

//});

//fadeIn(300)淡入，fadeout(300)淡出，过滤时间0.3s

$(".swapImg").eq(i).fadeIn(300).siblings().fadeOut();

$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");

}

function showTime()

{

time = setInterval(function () {

i++;

if (i == 6) {

//只有6张图片，所以i不能超过6，如果i等于6时，我们就让它等于第一张

i = 0;

}

show();

}, 3000);

}

以上所述是小编给大家介绍的基于JavaScript实现轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！