基于Java脚本语言实现带缩略图的轮播效果

先瞄一眼射流研究…轮播效果图

代码：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd :0；保证金：0} #内容{宽度：400像素高度：500 pxmargin:10px汽车；位置：相对；border:1px固体# 000;color : redfont-size :20 px；} #标题，#底部{位置：绝对值宽度宽度：400像素高度：30 px线高：30 px文本对齐：居中；font-size :20 px背景# f1f1f1} #底部{底部：0光标：指针指针；} #底部跨度{ display : inline-block；宽度：15 px高度：15 pxborder-半径：15 px背景技术： # 000;文本对齐：居中；线高：15 px位置：相对；} #底部跨度。活动{后台： # FFFF33} #底部跨度div { position:absolute绝对值宽度宽度：110像素宽度：110像素宽度：-125像素；左侧：-46px；display:none} #底部跨度div:after在{内容： }之后；位置：绝对；left :49 pxbottom :-12px；边框-top:7px实心# fffborder-right:5px实心透明；边框-底部：5px实心透明；边框-左侧：5px实心透明；} #底部跨度img { width:100px高度：100 pxborder:5px实心# fff} #左，#右{ position:absolute绝对值宽度：60 px高度：60 px边框-半径：60 px线高：60 pxfont-size :60 px背景# FFFF66font-weight :粗体；文本对齐：居中；前：50%；边距-top :-25px；color: # fffcursor:pointer指针指针；过滤器(opa city 336070)；opa city 33600.7 } # left : hover，# right : hover { filter(opa city 3360100)；opacity:1 } #左{ left:0px} #右{ right :0 px } # img { width :400 px高度：500 px}/stylescriptwindow。onload=function(){ var bottom=$(' bottom ')、title=$('title ')、img=$('img ')、left=$('left ')、right=$(' right ')；var aSpan=底部。getelementsbytagname(' span ')；var ADiv=底部。GetElementsBytagname(' div ')；var arr=['图片一','图片二','图片三', '图片四'];var num=0；//初始化picTab()；//点击下一张没错。onclick=function(){ if(num===ADiv。length-1)num=-1；数量；picTab()；} //点击上一张向左。onclick=function(){ if(num===0)num=ADiv。长度；num-；picTab()；}函数PictAb(){ title。innerHTMl=arr[num]；img.src='img/' (num 1)' .png '；for(var I=0；i aSpan.lengthi ) { aSpan[i].aSpan[num].className=' active} //鼠标移入移出显示缩略图for(var I=0；i aSpan.lengthi ) { aSpan[i].索引=我；阿斯潘[我].onmouseover=function(){ ADiv[this。索引]。风格。display=' block} aSpan[i].onmouseout=function(){ ADiv[this。索引]。风格。显示='无'；} aSpan[i].onclick=function(){ num=this。指数；picTab()；} } function $(id){返回文档。getelementbyid(id)；} }/script/head dydiv id=' content ' div id=' title '带缩略图的轮播/div div id=' left '/div div id=' right '/div div id=' bottom ' span div mg src=' http : img/1。png '/div/span span div mg src=' http : png/2。png '/div/span span div mg src=' http : img/3。png '/div/span span div mg src=' http 3360 img/4。png '/div/span/span/div以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。