原生射流研究…编写焦点图效果

自己用原生射流研究…写的简单焦点图，算是对原生射流研究…初步运用。

超文本标记语言部分

div class=' FocusPicture ' section class=' mphonto ' id=' mphonto ' img src=' http : images/20161021/b _ 5809 b 93 b 66d 18。jpg '/节！-主要的大图-section class=' oPhoto ' div class=' imgWrap ' section class=' on ' img src=' http : images/20161021/b _ 5809 b 93 b 66d 18。jpg '/section img src=' http : images/20161021/b _ 5809 b 96 C4 da 53。jpg '/section img src=' http 3360 images/20161-其他的小图-section=' prev next ' div class=' prev ' I/I/div！-上一张- div class='next' i/i /div！-下一张-/节！-上下翻页- /div！-焦点图区射流研究…部分

window.onload=function(){ /*焦点图特效*/var mph top=文档。getelementbyid(' mphonto ')；var imgWrap=文档。getelementsbyclasname(' IMgwrap ')[0]；var包装大小=4；/*图片容器最大显示图片数*/if(IMgwrap。GetElementsBytagname('节').长度包装尺寸){ imgwrap。innerhtml=imgwrap。innerhtml imgwrap。innerhtml} var oImages=imgwrap。getelementsbytagname(' section ')；for(var I=0；ioImages.lengthi ) { oImages[i].onmouseover=function(){ for(var j=0；joimages . length j){ remove class(oImages[j]，' on ')；} var img src=this。GetElementsBytagname(' img ')[0].srcaddClass(此为“on”)；mphonto。getelementsbytagname(' img ')[0].src=imgSrc} } /*上下翻页容器*/var oPrevNext=文档。getelementsbyclassname(' prev next ')[0]；var Oprev=Oprevnext。GetElementsByclassName(' prev ')[0]；var oNext=OprevNext。GetElementsByclassName(' next ')[0]；var oimagehead=oImages[0].getElementsByTagName('img')[0].高度| | 0;var opositintopp=imgwrap。偏移；var imgIndex=0；if(oi images。lenwrappise * 2){ Oprev。风格。display=' block下一个。风格。display=' block} /*上一页*/oprev。onclick=function(){ imgIndex-=1；if(IMgindex=0){ IMgindex=6；} var OtoP=IMgindex *(OimageHeight 8)；imgwrap。风格。top=-OToP ' px '；/*获取当前图片的索引*/for(var I=0；ioimages . lengthi){ var oBol=has class(oImages[I]，' on ')| | false；if(oBol){ var index=oIndex(oImages[I]，oImages)；索引=index-1；if(imgIndex==6){ index=6；} for(var j=0；joImages.lengthj ) {/*清除其他的图片在样式*/removeClass(oImages[j]，' on ')；} addClass(oImages[index]，' on ')；var imgSrc=oImages[index].getElementsByTagName('img')[0].srcmphonto。getelementsbytagname(' img ')[0].src=imgSrc返回false} } } /*下一页*/onext。onclick=function(){ imgIndex=1；if(IMgindex=6){ IMgindex=0；} var OtoP=IMgindex *(OimageHeight 8)；imgwrap。风格。top=-OToP ' px '；/*获取当前图片的索引*/for(var I=0；ioimages . lengthi){ var oBol=has class(oImages[I]，' on ')| | false；if(oBol){ var index=oIndex(oImages[I]，oImages)；索引=索引1;if(IMgindex==0){ index=1；} for(var j=0；joImages.lengthj ) {/*清除其他的图片在样式*/removeClass(oImages[j]，' on ')；} addClass(oImages[index]，' on ')；var imgSrc=oImages[index].getElementsByTagName('img')[0].srcmphonto。getelementsbytagname(' img ')[0].src=imgSrc返回false} } } }函数hasClass(元素，cName){//检查班级是否存在回来！element.className.match(新regexp('(\\s|^)' cname '(\ \ s | $))；}函数addClass(元素，cName){//添加一个类if(！hasClass(元素，cName)){元素。类名=' cName} }函数removeClass(元素，cName){//移除一个class if(hasClass(element，cname)){ element。类名=元素。类名。替换(新regexp('(\\s|^)' cname '(\ \ s | $)，' ')；} }函数oIndex(当前，obj){/*获取索引*/for (var i=0，length=obj . lengtilengti){ if(obj[I]==current){ return I；} } }css部分。产品信息.焦点图片{宽度： 698px向左浮动：相对位置：右边框： 1px实心# d9cdb4}。产品信息.聚焦照片.mphonoto { width : 542 px x8 : 360 px }。产品信息.聚焦照片.mphonto img {宽度： 100%；高度： 100%;}.产品信息.聚焦照片.ophonto { width : 128 pxh three : 352 px绝对位置：right: 14pxtop: 4px飞越：隐藏；}.产品信息.oPhoto div { width: 128px绝对位置：left :0 top :0-WebKit-transit : top。2s轻松版；-蚊子-交通：顶层。2s缓解版；transition: top .2s缓解；}.产品信息.oPhoto截面{ height : 78pxmargin : 8px 0；相对位置：光标：指针；}.产品信息.{内容： }之前的oPhoto部分：beforedisplay:块；宽度： 100%;高度： 100%;背景-color: rgba(255，255，255，42);绝对位置：左： 0；top : 0；}.产品信息.在{ display:无}。产品信息.聚焦照片.oPhoto img { width : 100%；高度： 100%;}.产品信息.聚焦照片.prev next { width : 32px h8 : 32px绝对位置：top :-4px；右： 62px}。产品信息.prevNext div.prev .产品信息.上一个下一个分区。下一个{ width : 32pxheight: 32px-web套件-边框-半径： 50%；-蚊子-边界-半径： 50%；边界半径： 50%;背景-color : # fff；绝对位置：左： 0；-WebKit-transit :全部。25s-moz-transit :全部。25stransit : all . 25 sddisplay :无；光标：指针；}.产品信息.上一个下一个分区。prev { top : 0；box-shadow: 0 -2px 4px rgba(0，0，0，24);}.产品信息.上一个下一个分区。下一个{ top : 336 pxbox-shadow: 0 2px 4px rgba(0，0，0，24);}.产品信息.上一个下一个分区。prev :悬停{ box-shadow : 2px-2px 3px rgba(0，0，0，24);}.产品信息.上一个下一个分区。下一个：悬停{ box-shadow :-2px 2px 3px rgba(0，0，0，24);}.产品信息.上一个分区.产品信息.上一个下一个分区。下一个I {宽度： 16px高度： 16px绝对位置：top : 0；右： 0；底部： 0；左： 0；margin:自动转换器：指针；}.产品信息.上一个下一个分区。prev I {后台： URL(./images/arrows-icon.png) 0 -16px不重复；背景尺寸size : 48px 32px bottom : 2px }。产品信息.上一个下一个分区。接下来我{后台： URL(./images/arrows-icon.png) 0 0不重复；背景尺寸size: 48px 32pxtop: 2px}。产品信息.prevNext div.prev:hover i，产品信息.上一个下一个分区。下一个：悬停我{-WebKit-transform :比例尺(1.1);-moz-transform:秤(1.1);变压器：标度(1.1);}.产品信息.上一个下一个分区。prev :悬停I {后台： URL(./图像/箭头-图标。png)-16px-16px不重复；背景尺寸size: 48px 32px}。产品信息.上一个下一个分区。下一个：悬停I {背景： URL(./图像/箭头-图标。png)-16px 0px无重复；背景尺寸size: 48px 32px}。产品信息.上一个下一个分区。prev :活动I {后台： URL(./图像/箭头-图标。png)-32px-16px无重复；背景尺寸size: 48px 32px}。产品信息.上一个下一个分区。下一个：活动I {后台： URL(./图像/箭头-图标。png)-32px 0px无重复；背景尺寸size: 48px 32px}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。