梦影潇湘 2015-02-27 01:16 采纳率: 0%
浏览 2891

点击显示隐藏中的div中图片左右滚动

点击显示隐藏中的div中图片左右滚动,当显示时一行只出现一张图片,剩下的图片并列显示在下边了?请问这个该怎么解决?
下面是我写的代码
<!DOCTYPE HTML>



js制作产品图片展示选项卡tab内嵌图片左右滚动代码 -B5教程网 li{list-style-type:none;float: left;} .TTSliderPic{width: 910px;padding: 13px 33px;border: 2px solid #C3C5C7;position: relative;height: 180px;z-index: 1} .TTSliderPicList{position: relative;width:890px;overflow: hidden;height:180px;} .TTSliderPic ul{position: absolute;display: none;top:3px;left: 0} .TTSliderPic ul.show{display: block;} .TTSliderPic li img{width:150px } .TTSliderPic li{width: 150px;padding: 0 14px;height: 180px;} .TTSliderPic li a{display: block;height: 150px;overflow: hidden;} .TTSliderPic li p{height: 30px;line-height: 30px;text-align: center;color: #ED0A0A} .TTSliderPrevBtn,.TTSliderNextBtn{height: 100%;width: 45px;position: absolute;z-index: 999;top: 0;text-align: center;} .TTSliderPrevBtn{left:0} .TTSliderNextBtn{right: 0;} .TTSliderPrevBtn a,.TTSliderNextBtn a{height: 30px;width: 20px;display: inline-block;background: url(./images/btn.png) no-repeat;margin-top: 75px} .TTSliderNextBtn a{background: url(./images/btn.png) no-repeat -30px 0}


ddddd
















</div>

function ShowDiv(){ var content=document.getElementById("g1_father"); content.style.display="block"; } window.onload=function() { var oTTSliderNextBtn=document.getElementById('TTSliderNextBtn'); var oTTSliderPicList=getByClass('TTSliderPicList',null,'div')[0]; var aItem=oTTSliderPicList.getElementsByTagName('ul'); var len=aItem.length; var showIndex=aItemImgWidth=iNow=0; var aEle=[]; for(var i=0;i<len;i++) { var aItemImgs=aItem[i].getElementsByTagName('li'); if(!aItemImgWidth) { aItemImgWidth=aItemImgs[0].offsetWidth; } aEle.push(aItemImgs); //存入数组,考虑到有多个轮播,且每个轮播里面的图片个数可能一致. } for(var i=0;i<len;i++) { var num=aEle[i].length; if(aItem[i].className=='show') { showIndex=i; } aItem[i].style.width=num*(aItemImgWidth)+'px' } oTTSliderNextBtn.onclick=function() { var maxNum=aEle[showIndex].length-1; aItem[showIndex].insertBefore(aEle[showIndex][maxNum],aEle[showIndex][0]); aItem[showIndex].style.left=-aItemImgWidth+'px'; doMove(aItem[showIndex],0); } function doMove(o,t,fn) { clearInterval(o.timer); o.timer=setInterval(function(){ var is= (t-getStyle(o,'left'))/8; is= is>0?Math.ceil(is):Math.floor(is); if(t==o.offsetLeft) { clearInterval(o.timer); (typeof fn==='function') && fn(); } else { o.style.left=o.offsetLeft+is+'px'; } },30) } function getStyle(o,a) { return o.currentStyle ? parseFloat(o.currentStyle[a]) : parseFloat(getComputedStyle(o,false)[a]); } function getByClass(s,p,e) { var reg=new RegExp('(\\b)'+s+'(\\b)'); var aElement=(p||document).getElementsByTagName(e||'*'); var aResult=[]; for(var i=0;i<aElement.length;i++) { reg.test(aElement[i].className) && aResult.push(aElement[i]); } return aResult; } }


  • 写回答

1条回答 默认 最新

  • 「已注销」 2015-02-27 01:22
    关注

    1、健康是最高的利益;
    2、满足是最好的财产;
    3、信赖是最佳的缘分;
    4、心安是最大的幸福;参考内容

    评论

报告相同问题?

悬赏问题

  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序