基于JavaScript实现轮播图代码

2019-11-20 09:28:56

字体：大中小

来源：转载

供稿：网友

一、要点：

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

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

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

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

二、实现代码：

html代码:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>轮播图</title><link href="css/LunBimg.css" rel="stylesheet" /><script src="js/jquery-1.10.2.min.js"></script><script src="js/LunBimg.js"></script></head><body><div id="allswapImg"><div class="swapImg"><img src="image/1.jpg" /></div><div class="swapImg"><img src="image/2.jpg" /></div><div class="swapImg"><img src="image/3.jpg" /></div><div class="swapImg"><img src="image/4.jpg" /></div><div class="swapImg"><img src="image/5.jpg" /></div><div class="swapImg"><img src="image/6.jpg" /></div></div><div class="btn btnLeft"><</div><div class="btn btnRight">></div><div id="tabs"><div class="tab bg">1</div><div class="tab">2</div><div class="tab">3</div><div class="tab">4</div><div class="tab">5</div><div class="tab">6</div></div></body></html>

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代码：

/// <reference path="_references.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);//点了之后，-1if (i == 0){i =6;}i--;show();showTime();});$(".btnRight").click(function () {//1.点击之前要停止轮播clearInterval(time);//点了之后，-1if (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实现轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：js实现楼层效果的简单实例

下一篇：js轮播图代码分享