js轮播图代码分享

前端之家收集整理的这篇文章主要介绍了js轮播图代码分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大家喜欢的js轮播图片效果分享给大家。

一、要点:

1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播;

二、实现代码

HTML代码:

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 轮播图

css代码

.swapImg {
position:absolute;

}
.btn {
position:absolute;
height:90px;
width:60px;
background:rgba(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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/47267.html

猜你在找的JavaScript相关文章