横幅图片滚动的问题。设置了js，但是图片没有滚动式为什么

HTML这样写的：<divclass="focusBox"><ulclass="pic"><li><ahref="#"target="_blank"><imgsrc="i... HTML这样写的：
<div class="focusBox">
<ul class="pic">
<li><a href="#" target="_blank"><img src="images/banner.jpg" width="950" height="195"/></a></li>
<li><a href="#" target="_blank"><img src="images/b.png" width="950" height="195"/></a></li>
<li><a href="#" target="_blank"><img src="images/banner.jpg" width="950" height="195"/></a></li>
<li><a href="#" target="_blank"><img src="images/b.png" width="950" height="195"/></a></li>
</ul>
<div class="hd"><ul></ul></div>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
jQuery(".focusBox").slide({ titCell:".hd ul", mainCell:".pic ul", effect:"leftLoop", vis:"auto", autoPlay:true, autoPage:true, trigger:"click" });
</script>

CSS的写法：
.focusBox { position: relative; width:950px; height:200px; overflow: hidden; margin:0 auto; }
.focusBox .pic { position:relative; z-index:0;}
.focusBox .pic img { width:950px; height:200px; display: block;}
.focusBox .hd { overflow:hidden; zoom:1; position:absolute; bottom:5px; right:10px; z-index:1}
.focusBox .hd li{float:left; line-height:15px; text-align:center; font-size:12px; width:25px; height:10px;
cursor:pointer;
overflow:hidden;
background:#919191;
margin-left:4px;
filter:alpha(opacity=80);
opacity:.8;
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;-o-transition:All .5s ease
}
.focusBox .hd .on{ background:#fff; filter:alpha(opacity=100);opacity:1; }
.focusBox .prev,.focusBox .next{ z-index:1; display:block; width:55px; height:55px; position:relative; margin:-27% 0 0 3%; float:left; background:url(images/arrow.png) 0 0 no-repeat; filter:alpha(opacity=40);opacity:0.4 }
.focusBox .next{ background-position:right 0; float:right; margin-right:3% }
.focusBox .prev:hover,.focusBox .next:hover{ filter:alpha(opacity=80);opacity:0.8 } 展开

 我来答

1个回答

#热议# 普通体检能查出癌症吗？

wd冰凝城夏
推荐于2016-02-04

知道答主

回答量：1

采纳率：0%

帮助的人：2万

我也去答题访问个人页

关注

展开全部

你好楼主，并不是JS有问题，是你在做表格时出现了问题。

你设置colee_left,colee_left1,colee_left2的位置有问题。我改了下布局，用DIV来实现。你看下是不是你要的。

直接上代码了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#colee_left {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#colee_left img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#colee_left1 {
float: left;
}
#colee_left2 {
float: left;
}
-->
</style>
</head>
<body>
<div id="colee_left">
<div id="indemo">
<div id="colee_left1">
<a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a>
</div>
<div id="colee_left2"></div>
</div>
</div>

<script>
//使用div时，请保证colee_left2与colee_left1是在同一行上.
var speed=10 //速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0) //offsetWidth 是对象的可见宽度
colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>
</body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

深圳市容大彩晶科技有限公司
2024-11-15 广告

广告机代理优选容大彩晶，深圳市容大彩晶科技有限公司自2007年成立伊始，一直专注于液晶商用显示产品的技术研发及产品服务。公司依托具有自主研发能力、创新高效的技术团队，打造出行业优质商用液晶显示设备。容大彩晶产品涵盖商用液晶显示、多媒体广告机... 点击进入详情页

本回答由深圳市容大彩晶科技有限公司提供

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

横幅 图片滚动的问题。设置了js，但是图片没有滚动式为什么

为你推荐：

横幅图片滚动的问题。设置了js，但是图片没有滚动式为什么