基于Java脚本语言实现轮播图代码

一、要点：

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

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

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

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

二、实现代码：

超文本标记语言代码：

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title轮播图/title link href=' CSS/lunbig。CSS ' rel='样式表'/脚本src=' http : js/jquery-1。10 .2 .量滴js /脚本脚本src=' http : js/lunbimg。js /脚本/head wadiv id=' all SwaPimg ' div class=' SwaPimg ' img src=' http : image/1。jpg '/div div class=' Swapig '代码：

* { padd :0 pxmargin :0 px }。swapImg { position:absolute}。btn { position:absolute绝对值高度：90 px宽度：60 pxbackground:rgba(0，0，0，0.5)；/*设置背景颜色为黑色，透明度为50% */color : # ffffff；文本对齐：居中；线高：90 pxfont-size :40 pxtop:155px/*图片高度400/2-45 */光标：指针；/*显示：无；*/}.BTN右{ left:840px/*图片宽度900-导航宽度60 */} #个制表符{ position : absolutetop :370 px左边距left:350px}。选项卡{ height:20px宽度：20 px背景技术： # 05e 9 e 2；线高：20 px文本对齐：居中；font-size :10 pxfloat : leftcolor : # ffffff右边距：10 px边界半径：100%;光标：指针指针；}.bg { background: # 00ff21}js代码：

///引用路径=' _引用。js '/var I=0；//全局变量//定义一个变量用来获取轮播的过程变化时间；$(function (){//1 .页面加载后，找到班级等于swapImg的第一个对象，让它显示，它的兄弟元素隐藏$('.swapImg ').等式(0).显示()。兄弟姐妹()。hide()；显示时间()；//当鼠标放到下标上显示该图片，鼠标移走继续轮播$('.制表符')。悬停（函数(){//获取到当前鼠标所在的下标的索引i=$(这个)。index()；show()；//鼠标放上去之后，怎么停止呢？获取到变量的过程，清除轮播，把变量传进去clearInterval(时间);}，function(){ show time()；});//要求四，当我点击左右切换$('.').单击(函数(){//1 .点击之前要停止轮播clearInterval(时间);//点了之后，-1if(I==0){ I=6；}我-；show()；显示时间()；});$('.' btnRight ' .单击(函数(){//1 .点击之前要停止轮播clearInterval(时间);//点了之后，-1if(I==5){ I=-1；}我；show()；显示时间()；});});函数show(){//$(' # AllSwapig ').悬停(函数()//{/$(').BTN ' .show()；//}，function ()//{//$(' .BTN ' .hide()；//});//fadeIn(300)淡入淡出(300)淡出，过滤时间0.3美元(' .swapImg ').方程式(I ).法丁(300)。兄弟姐妹()。淡出()；$('.制表符')。方程式(I ).addClass('bg ').兄弟姐妹()。移除CLaSS(' BG ')；}函数showTime(){time=setInterval(函数(){一；if (i==6) {//只有6张图片，所以我不能超过6,如果我等于6时，我们就让它等于第一张I=0；} show()；}, 3000);}以上所述是小编给大家介绍的基于Java脚本语言实现轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！