点击显示隐藏中的div中图片上下滚动
点击显示隐藏中的div中图片左右滚动
点击显示隐藏中的div中图片左右滚动，当显示时一行只出现一张图片，剩下的图片并列显示在下边了？请问这个该怎么解决？
下面是我写的代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js制作产品图片展示选项卡tab内嵌图片左右滚动代码 -B5教程网</title>
<style>
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}
</style>
</head>
<body>
<div onclick="ShowDiv()">ddddd</div>
<div id="g1_father" class='TTSliderPic' style="display:none;">
<div href='javascript:;' id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div>
<div href='javascript:;' id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div>
<div class='TTSliderPicList'>
<ul class='show'>
<li class='on'><div><img src='images/1.jpg'/></div></li>
<li><img src='images/2.jpg'/></li>
<li><img src='images/3.jpg'/></li>
<li><img src='images/4.jpg'/></li>
<li><img src='images/5.jpg'/></li>
<li><img src='images/11.jpg'/></li>
<li><img src='images/22.jpg'/></li>
<li><img src='images/33.jpg'/></li>
<li><img src='images/44.jpg'/></li>
<li><img src='images/55.jpg'/></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js";;></script>
<script type="text/javascript">
function ShowDiv(){
var content=document.getElementById("g1_father");
content.style.display="block";
}
</script>
<script type="text/javascript">
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;
}
}
</script>
</body>
</html>
------解决思路----------------------
第79行赋值宽度有问题 改成 aItem[i].style.width='inherit'
点击显示隐藏中的div中图片左右滚动，当显示时一行只出现一张图片，剩下的图片并列显示在下边了？请问这个该怎么解决？
下面是我写的代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js制作产品图片展示选项卡tab内嵌图片左右滚动代码 -B5教程网</title>
<style>
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}
</style>
</head>
<body>
<div onclick="ShowDiv()">ddddd</div>
<div id="g1_father" class='TTSliderPic' style="display:none;">
<div href='javascript:;' id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div>
<div href='javascript:;' id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div>
<div class='TTSliderPicList'>
<ul class='show'>
<li class='on'><div><img src='images/1.jpg'/></div></li>
<li><img src='images/2.jpg'/></li>
<li><img src='images/3.jpg'/></li>
<li><img src='images/4.jpg'/></li>
<li><img src='images/5.jpg'/></li>
<li><img src='images/11.jpg'/></li>
<li><img src='images/22.jpg'/></li>
<li><img src='images/33.jpg'/></li>
<li><img src='images/44.jpg'/></li>
<li><img src='images/55.jpg'/></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js";;></script>
<script type="text/javascript">
function ShowDiv(){
var content=document.getElementById("g1_father");
content.style.display="block";
}
</script>
<script type="text/javascript">
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;
}
}
</script>
</body>
</html>
------解决思路----------------------
第79行赋值宽度有问题 改成 aItem[i].style.width='inherit'