<div id="navscrollpic" >
<div class="btnleft" id="btnLeft">左</div>
<div class="btnright" id="btnRight">右</div>
<div class="scrolldiv" >
<ul >
<li><a href='#' target='_blank'><img width='170' border='0' height='60' src='aa.jpg' /></a></li>
<li><a href='#' target='_blank'><img width='170' border='0' height='60' src='bb.jpg' /></a></li>
</ul>
</div>
</div>
如何实现自动滚动<li> 里的图片,或者点击左右滚动图片
<div class="btnleft" id="btnLeft">左</div>
<div class="btnright" id="btnRight">右</div>
<div class="scrolldiv" >
<ul >
<li><a href='#' target='_blank'><img width='170' border='0' height='60' src='aa.jpg' /></a></li>
<li><a href='#' target='_blank'><img width='170' border='0' height='60' src='bb.jpg' /></a></li>
</ul>
</div>
</div>
如何实现自动滚动<li> 里的图片,或者点击左右滚动图片
解决方案 »
- Ext Viewport 问题
- 菜鸟求教
- 急求几个正则表达式!在线等!!
- [求助]50求一个JS循环的问题
- 有人用过ESTjs中的grid吗?想请教个问题!
- 请教一个关于检索的问题 谢谢了
- 怎么把一个值附给下拉列表框啊?
- xiaoshi(java入门中....)(半知不解):请进来拿分 | 原因:http://expert.csdn.net/Expert/topic/1814/1814513.xml?temp=.5701105
- php上传文件已经做好了,可以上传。现在要做进度条。怎么样做?
- 我看到这样的<li is="menuindex" sizcache="8" sizset="0" jQuery1406871806858="1">
- 不懂这个滚动图片代码的原理,表面意思知道,解释一下,谢谢。。。
- 分享:javascript中实现字符串转日期(string.toDate("yyyyMMdd"))
<div class="scrolldiv">这个div固定不动,
它里面的ul相对该div移动,所谓移动就是改变它的坐标。设置它style的position为relative, 然后通过改变style的left和top属性就可以了。
给你一个例子,以前写的产品中的一个代码片断。可以参考以下。<html>
<head>
<title>scroll ad</title>
<style>
#productShow{
height: 140px;
border: solid #3366cc 1px;
margin-bottom:8px;
overflow: hidden;
width: 1000px;
}
#productShow .content{
height: 140px;
width: 998px;
padding-top: 10px;
color:#666666;
overflow:hidden;
position:relative;
}
#productShow .content table{
border: solid red 0px;
position:relative;
top: 0px;
}
#productShow .content table tr td a img{
border: solid #000000 1px;
}
</style>
</head>
<body>
<div id="productShow">
<div class="content">
<table id="prod" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="#"><img src="images/prod01.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod02.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod04.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod03.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod05.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod06.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
</tr>
<tr>
<td align="center"><a href="#"><img src="images/prod07.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod08.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod09.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod10.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod01.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod02.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
</tr>
<tr>
<td align="center"><a href="#"><img src="images/prod03.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod04.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod05.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod06.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod07.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
<td align="center"><a href="#"><img src="images/prod08.jpg" width="140" height="100" /><br /></a>xxxxxxxxx有限公司</td>
</tr>
</table>
</div>
</div>
<script language="javascript">
var _top = 0;
var _param = 0;
var _t;
function _moveSomePixel(){
//+'px' is very important in firefox.
document.getElementById("prod").style.top = _top-1 + 'px';
_param ++;
_top = _top -1;
if(_param == 130){
_param = 0;
clearInterval(_t);
}
if(_top == -260){
_top = 0;
clearInterval(_t);
}
}
function _moveUp(){
_t = setInterval(_moveSomePixel,2);
}
function _picShow(){
//更改4000的值可以调滚动速度, 但是不能太小,建议不要小于4000
setInterval(_moveUp, 4000);
}
_picShow();
</script>
</body>
</html>