网页前端设计

http://www.86y.org

搜索文章

图文左右移动/可自动向左移动/可控制左右移动(兼容iE FF)

用声音读出全文关注我吧
 2011/3/19 14:07:44 阅读次数:7699

我在豆丁网上看了这种效果就把它COPY下来了,希望大家可以拿去参考。

<!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>图片左右移动/可自动向左移动/可控制左右移动(兼容iE FF)</title>
<style>
body{margin:0;padding:0;font-size:12px;line-height:162%;color:#333;font-family:tahoma,Arial,\5b8b\4f53;-webkit-text-size-adjust:none;}
div,form,img,ul,ol,li,dl,dt,dd,option,td,th{margin:0;padding:0;border:0;list-style:none outside none;}
em{font-style:normal}
h1,h2,h3,h4,h5,h6,p,span,blockquote,input,select,textarea{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;border:0}
h2 {font-size:12px;color:#434343;line-height:22px;text-align:left;}
a {text-decoration:none;color:#326FA8;}
a:hover{text-decoration:underline;color:#2284E2;}
.clear{zoom:1;clear:both}
.clear:after{display:block;content:"\0020";overflow:hidden;height:0;clear:both}

.readbox{height:258px;border:1px #dfdfdf solid;background:#f5f5f5;width:704px;margin:10px auto;overflow:hidden;}
.readbox h2{padding:8px 10px 16px;font-size:14px;}
.readbox li{float:left;width:119px;height:192px;padding:9px 20px 0 18px;text-align:center;background-position:-34px -94px;margin:0 23px;display:inline;overflow:hidden;word-wrap:break-word;background-color:#fff;}
.readbox li p{margin:8px 0 0}
.readbox li a{display:block}
.readbox .hot span{background:url(http://ww1.sinaimg.cn/bmiddle/78ca5dd9gw6dfdxmmacd2j.jpg) no-repeat 0 0;}
#hot_wrapper{width:609px;height:201px;position:relative;left:47px;}
#hot_wrapper .outer_container{height:100%;width:100%;overflow:hidden;position:relative;left:0}
#hot_wrapper ul{position:absolute;left:0;top: 0px;width:20000px;height:201px;}

#hot_wrapper span{display:block;width:31px;height:52px;font-size:0;overflow:hidden;text-indent:-999px;cursor:pointer}
#hot_wrapper .left{background-position:-62px center}
#hot_wrapper .noleft{background-position:0 center}
#hot_wrapper .right{background-position:-31px center}
#hot_wrapper .noright{background-position:-93px center}
#hot_wrapper .left,#hot_wrapper .noleft{position:absolute;top:75px;left:-31px}
#hot_wrapper .right,#hot_wrapper .noright{position:absolute;top:75px;right:-31px}
/* col-reco */
.col-reco{}
.col-reco li{float:left;}
.col-reco h3{background-position:-124px -41px;position:relative;padding:3px 0 6px 22px;}
.col-reco h3 ul{float:right;position:absolute;top:3px;right:3px;font-size:12px;font-weight:400;}
.col-reco h3 li{margin:0 0 0 20px;}
.colReco-sub{border:1px #c6c6c6 solid;border-top-width:4px;padding:5px 0;width:704px;margin:0 auto;}
.colRecoBox-sub li{ float:left;width:86px;height:141px;padding:0 10px 0 11px; text-align:cente;position:relative;}
.colRecoBox-sub li dt em{ position:absolute;bottom:0;right:0;_right:-1px;padding:0 4px 0 6px;height: 18px;line-height:18px;border:1px solid #ccc;background:#f7f7f7;color:#333;cursor:pointer;white-space:nowrap;font-size:12px;}
.colRecoBox-sub li a{ position:relative;display:inline-block;}
.colRecoBox-sub li a img{ display:block;border:1px solid #ccc;padding:2px;overflow:hidden}
.colRecoBox-sub li a:hover {text-decoration:none; }
.colRecoBox-sub li a:hover img{ border:2px solid #86abd1;padding:1px}
.colRecoBox-sub li dd{padding:6px 0 0;text-align:center;}
.colRecoBox-sub li dt{width: 86px;height:96px;line-height:1;text-align:center;overflow:hidden;display:table-cell;vertical-align:bottom;*display: block;*font-size:96px;}
.colReco-move{width:642px;height: 141px;position:relative;left:32px;padding:13px 0 6px;}
.colReco-move .colReco-box{width:100%;height: 100%; overflow:hidden;position:relative;left:0;}
.colRecoBox-sub{ position:absolute;left:0;top: 0px;width:20000px;}
.colReco-move span{ display:block;width:16px;height:19px;font-size:0;overflow:hidden;text-indent:-999px;cursor:pointer;background:url(http://ww1.sinaimg.cn/bmiddle/78ca5dd9gw6dfdxm3crpkj.jpg) no-repeat 0 center;}
.colReco-move .left{ background-position:-48px center}
.colReco-move .noleft{ background-position:0 center}
.colReco-move .right{ background-position:-32px center}
.colReco-move .noright{ background-position:-16px center}
.colReco-move .left,.colReco-move .noleft{ position:absolute;top:67px;left:-16px}
.colReco-move .right,.colReco-move .noright{ position:absolute;top:67px;right:-16px}
</style>
<script type="text/javascript">
function getStyle(o,n){
	return o.currentStyle?o.currentStyle[n]:(document.defaultView.getComputedStyle(o,"").getPropertyValue(n))
}

/* 相册效果 f有值自动播放 f为空点击播放 */
function photoAlbumn(photoObj,f){
var moveNum = 1,
_void=_autoVoid=true,
 d=document,
 elem = d.getElementById(photoObj);
if (!elem) return false;
var elemObj = elem.getElementsByTagName("li"),
elemParent = elem.getElementsByTagName("ul")[0],
 autoWidth = elem.offsetWidth,
 liWidth = (-[1,])?elemObj[0].offsetWidth+parseInt(getStyle(elemObj[0],"margin-right"))+parseInt(getStyle(elemObj[0],"margin-left")):elemObj[0].offsetWidth+parseInt(getStyle(elemObj[0],"marginRight"))+parseInt(getStyle(elemObj[0],"marginLeft")),
 btns = elem.getElementsByTagName("span"),
 max=elemObj.length,
 lisAuto=autoWidth/liWidth,
 moveNum=moveNum*lisAuto;
 elemParent.style.width = max*liWidth + "px";
var moveElement =function(final_x,final_y,interval){
 var step = function () {
  if (elemParent.movement) clearTimeout(elemParent.movement);
  if (!elemParent.style.left) elemParent.style.left = "0px";
  if (!elemParent.style.top) elemParent.style.top = "0px";
  var xpos = parseInt(elemParent.style.left);
  var ypos = parseInt(elemParent.style.top);
  if (xpos == final_x && ypos == final_y) {
  _void = true;
   return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elemParent.style.left = xpos + "px";
  elemParent.style.top = ypos + "px";
  elemParent.movement = setTimeout(function(){step()},interval);
}
 elemParent.movement = setTimeout(function(){step()},interval);
} ;
var prepareSlideshow = function (){
var btnsClass = function(){
 btns[0].className=(moveNum <= max && moveNum > lisAuto)?"left":"noleft";
 btns[1].className=(moveNum >= max && moveNum >= lisAuto)?"noright":"right";
}
if(max<= lisAuto){
 btnsClass();
}
 if(f){
 var moveAuto = setInterval(function(){moveAutoShow()},3000);
 }
var stop = function(){clearInterval(moveAuto);};
var moveAutoShow = function (){
	moveNum=moveNum+lisAuto;
   if(moveNum > max){
   if((moveNum - max) >= lisAuto ){
   moveNum=max;
    clearInterval(moveAuto);
    return true;
   }else{
  moveNum=max;
  stop();
  }
  }
 btnsClass();
	moveElement(-liWidth*(moveNum-lisAuto),0,30);
};
if(f){
 elem.onmouseover = function(){
 if(!_autoVoid){
 return false;
 }
 stop();
 }
 elem.onmouseout = function(){
 if(!_autoVoid){
 return false;
 }
 moveAuto = setInterval(function(){moveAutoShow()},3000);
 }
 }
	btns[0].onmousedown = function() {
 if(!_void){
 return false;
 }
		clearInterval(moveAuto);
		moveNum=moveNum - lisAuto;
  if(moveNum < 1){
  moveNum=lisAuto;
  return true; 
  }
  btnsClass();
  if( moveNum < lisAuto && moveNum> 0){
  moveNum=lisAuto;
  moveElement(0,0,30);
  }else{
		moveElement(-liWidth*(moveNum-lisAuto),0,30);
  }
		moveAuto;
  _void = _autoVoid = false;
	}
	btns[1].onmousedown = function() {
 if(!_void) {
 return false;
 }
		clearInterval(moveAuto);
		moveNum=moveNum + lisAuto;
  if(moveNum > max){
    if((moveNum-max) < lisAuto){
    moveNum=max;
     moveElement(-liWidth*(moveNum-lisAuto),0,30);
   }else{
   moveNum=max;
    return true;
   }
  }
  btnsClass();
		moveElement(-liWidth*(moveNum-lisAuto),0,30);
		moveAuto;
  _void = _autoVoid  = false;
	}
};
prepareSlideshow();
}
</script>
</head>
<body>
<div id="allreadDiv1" class="readbox">
  <h2>自动向左滚动...</h2>
  <div class="hot" id="hot_wrapper"><span class="noleft" title="上一页">上一页</span> <span class="right" title="下一页">下一页</span>
    <div class="outer_container">
      <ul>
        <li><a href="#" title="【精品资料】英语音标学习精品课件【收藏版】"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="【精品资料】英语音标学习精品.."></a><p><a href="#" title="【精品资料】英语音标学习精品课件【收藏版】">【精品资料】英语音标学习精品..</a></p></li>
        <li><a href="#" title="流动资产管理+现金管理+账户管理"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="流动资产管理+现金管理+账户管理"></a><p><a href="#" title="流动资产管理+现金管理+账户管理">流动资产管理+现金管理+账户管理</a></p></li>
        <li><a href="#" title="精华2010年教育硕士考试教育学实战试题"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="精华2010年教育硕士考试教育学.."></a><p><a href="#" title="精华2010年教育硕士考试教育学实战试题">精华2010年教育硕士考试教育学..</a></p></li>
        <li><a href="#" title="了解市场营销学的基础知识"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="了解市场营销学的基础知识"></a><p><a href="#" title="了解市场营销学的基础知识">了解市场营销学的基础知识</a></p></li>
        <li><a href="#" title="调查实战指南_调查策划手册"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="调查实战指南_调查策划手册"></a><p><a href="#" title="调查实战指南_调查策划手册">调查实战指南_调查策划手册</a></p></li>
        <li><a href="#" title="以人为本的管理的方法与艺术"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="以人为本的管理的方法与艺术"></a><p><a href="#" title="以人为本的管理的方法与艺术">以人为本的管理的方法与艺术</a></p></li>
        <li><a href="#" title="2011年SAC证券从业资格考试包过班讲义"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="2011年SAC证券从业资格考试包过.."></a><p><a href="#" title="2011年SAC证券从业资格考试包过班讲义">2011年SAC证券从业资格考试包过..</a></p></li>
        <li><a href="#" title="牛津小学英语4B教案的讲解"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="牛津小学英语4B教案的讲解"></a><p><a href="#" title="牛津小学英语4B教案的讲解">牛津小学英语4B教案的讲解</a></p></li>
        <li><a href="#" title="《人力资源管理系统》操作管理手册"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="《人力资源管理系统》操作管理手册"></a><p><a href="#" title="《人力资源管理系统》操作管理手册">《人力资源管理系统》操作管理手册</a></p></li>
        <li><a href="#" title="论文写作技巧大全(基础篇)"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="论文写作技巧大全(基础篇)"></a><p><a href="#" title="论文写作技巧大全(基础篇)">论文写作技巧大全(基础篇)</a></p></li>
        <li><a href="#" title="看2010年展望2011年投资理财趋势:基金定投、理财规划、理财风险及相关理财案例资料大全"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="看2010年展望2011年投资理财趋.."></a><p><a href="#" title="看2010年展望2011年投资理财趋势:基金定投、理财规划、理财风险及相关理财案例资料大全">看2010年展望2011年投资理财趋..</a></p></li>
        <li><a href="#" title="美国摄影师镜头下的美丽中国"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="美国摄影师镜头下的美丽中国"></a><p><a href="#" title="美国摄影师镜头下的美丽中国">美国摄影师镜头下的美丽中国</a></p></li>
        <li><a href="#" title="MRP ERP中 的原理与实施"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="MRP ERP中 的原理与实施"></a><p><a href="#" title="MRP ERP中 的原理与实施">MRP ERP中 的原理与实施</a></p></li>
        <li><a href="#" title="制造业公司行政、财务、生产等业务流程大全"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="制造业公司行政、财务、生产等.."></a><p><a href="#" title="制造业公司行政、财务、生产等业务流程大全">制造业公司行政、财务、生产等..</a></p></li>
        <li><a href="#" title="《监理工程师贯标培训》手册"><img src="http://ww2.sinaimg.cn/large/78ca5dd9gw6dfdxoqgplrj.jpg" alt="《监理工程师贯标培训》手册"></a><p><a href="#" title="《监理工程师贯标培训》手册">《监理工程师贯标培训》手册</a></p></li>
      </ul>
    </div>
  </div>
</div>
<div class="colReco-sub clear">
  <div id="colRecomove2" class="colReco-move"> <span title="上一页" class="noleft">上一页</span><span title="下一页" class="right">下一页</span>
    <div class="colReco-box">
      <ul class="colRecoBox-sub">
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="融资租赁合同"><em class="t">15</em></a></dt><dd><a href="#" title="融资租赁合同">融资租赁合同</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="运用租赁投资机制"><em class="t">8</em></a></dt><dd><a href="#" title="运用租赁投资机制">运用租赁投资机制</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="租赁"><em class="t">96</em></a></dt><dd><a href="#" title="租赁">租赁</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="某投资广场写字楼租赁及物业管理合同"><em class="t">17</em></a></dt><dd><a href="#" title="某投资广场写字楼租赁及物业管理合同">某投资广场写字楼租..</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习股票操作知识---股票学习"><em class="t">545</em></a></dt><dd><a href="#" title="股票学习股票操作知识---股票学习">股票学习股票操作知..</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习笔记"><em class="t">19</em></a></dt><dd><a href="#" title="股票学习笔记">股票学习笔记</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习"><em class="t">10</em></a></dt><dd><a href="#" title="股票学习">股票学习</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票学习"><em class="t">12</em></a></dt><dd><a href="#" title="股票学习">股票学习</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="市场营销"><em class="t">578</em></a></dt><dd><a href="#" title="市场营销">市场营销</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="市场营销教程"><em class="t">405</em></a></dt><dd><a href="#" title="市场营销教程">市场营销教程</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="天津科技大学市场营销总复习"><em class="t">7</em></a></dt><dd><a href="#" title="天津科技大学市场营销总复习">天津科技大学市场营..</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="市场营销学"><em class="t">352</em></a></dt><dd><a href="#" title="市场营销学">市场营销学</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="城建投融资领域开展融资租赁"><em class="t">16</em></a></dt><dd><a href="#" title="城建投融资领域开展融资租赁">城建投融资领域开展..</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="MBA实业投融资·第五章·融资渠道及方式"><em class="t">67</em></a></dt><dd><a href="#" title="MBA实业投融资·第五章·融资渠道及方式">MBA实业投融资·第五..</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="融资租赁的营销策略"><em class="t">18</em></a></dt><dd><a href="#" title="融资租赁的营销策略">融资租赁的营销策略</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="投资性房地产外币折算租赁"><em class="t">20</em></a></dt><dd><a href="#" title="投资性房地产外币折算租赁">投资性房地产外币折..</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股市技术指标分析"><em class="t">56</em></a></dt><dd><a href="#" title="股市技术指标分析">股市技术指标分析</a></dd></dl></li>
        <li><dl><dt><a href="#"><img src="http://ww1.sinaimg.cn/large/78ca5dd9gw6dfdxqwoor6j.jpg" alt="股票预测相关理论"><em class="t">25</em></a></dt><dd><a href="#" title="股票预测相关理论">股票预测相关理论</a></dd></dl></li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
 		photoAlbumn("hot_wrapper",1);
		photoAlbumn("colRecomove2");
 	</script>
</body>
</html>

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=132【图文左右移动/可自动向左移动/可控制左右移动(兼容iE FF)】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭