js多图片向上循环

最新推荐文章于 2024-11-11 23:26:32 发布

q869711327

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量378

点赞数

文章标签： jquery border xhtml 360 class url

本文链接：https://blog.csdn.net/q869711327/article/details/6895682

版权

<!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=gb2312" />
<title>价格比较网 - 中国最大的比较购物搜索引擎网站</title>

</head>
<body>
<style>
/*幻灯片*/
.TL960{width:960px;margin:auto;clear:both;}
#JiageIndex_Center1_b{width:469px;height:283px;float:left;background:url("../images/index_new/index.png") no-repeat -253px 0px;position:relative;}

#JiageIndex_Center1_b1{position:absolute;width:455px;height:236px;left:7px;top:11px;border:solid 1px #CCCCCC;}
#JiageIndex_Center1_b1 img{width:455px; height:236px;}
.indexselected{ color:#FFFFFF; background-color:#CD3F60; font-weight:bold;}

</style>

<div class="TL960">

<div id="JiageIndex_Center1_b">
  <div id="JiageIndex_Center1_b1">

   <div id="test1" count="6">
    <div><a href="http://www.360mart.com/" target='_blank'><img src="http://www.baidu.com/img/baidu_sylogo1.gif" /></a></div><div><a href="http://jpyg520.taobao.com/" target='_blank'><img src="http://img.qihoo.com/images/2011/360/360logo20110210.gif" /></a></div>
                <div><a href="http://www.shipinxiu.net/product_index.asp" target='_blank'><img src="http://img.qihoo.com/images/2011/360/360dongtai20110310.jpg"/></a></div>
                <div><a href="http://www.olomo.com/?u=582772" target='_blank'><img src="http://msn.finance.sina.com.cn/cjyw/20110311/070316869.html" /></a></div>
                <div><a href="action/tiaozhuan.asp-id=9478&url=http---www.tiantian.com.htm" target='_blank'><img src="http://i3.sinaimg.cn/cj/2011/0223/201122314255.jpg" /></a></div>
                <div><a href="action/tiaozhuan.asp-id=9478&url=http---www.tiantian.com.htm" target='_blank'><img src="http://d1.sina.com.cn/201103/09/288627_64090-MSN.jpg"/></a></div>
   </div>
   <span id='btn1' class='indexselected'>1</span><span id='btn2'>2</span><span id='btn3'>3</span><span id='btn4'>4</span><span id='btn5'>5</span><span id='btn6'>6</span>
  </div>

</div>

</div>
</body>
</html>
<script>
var box="#JiageIndex_Center1_b1";//外框ID
var editDiv="#test1";//内框ID
var qItem="#btn";//内框跳转ID
var changeTime=1000;//切换等待时间
var width=400;//宽度
var height=236;//高度
var itemWidth=20;//内框跳转ID 高度
var itemHeight=20;//内框跳转ID 高度
var selectClass="indexselected";//内框跳转ID 选中样式
var changeColor="#ffffff";
var selectColor="#CD3F60";
var selectIndex=1;
var itemTop=height-itemHeight-10;
var itemDb=itemWidth+5;
var maxEnd=jQuery(editDiv).attr("count");
var firsItemLeft=width-3-itemDb*maxEnd;
jQuery(document).ready(function (){
jQuery(box).width(width);
jQuery(box).height(height);
jQuery(editDiv).width(width);
jQuery(editDiv).height(height);
jQuery(box).css({position:"relative", overflow:"hidden"});
jQuery(editDiv).css({position:"absolute"});
for(var i=1;i<=maxEnd;i++){
  if(i!=selectIndex){
  jQuery(qItem+i).css({top: itemTop, left: firsItemLeft+itemDb*(i-1), position: "absolute", width: itemWidth, height: itemHeight, border:"solid 1px #AC0000", "text-align":"center", cursor:"pointer", "line-height":itemHeight+"px", "background-color":changeColor});
  }else{
  jQuery(qItem+i).css({top: itemTop, left: firsItemLeft+itemDb*(i-1), position: "absolute", width: itemWidth, height: itemHeight, border:"solid 1px #AC0000", "text-align":"center", cursor:"pointer", "line-height":itemHeight+"px"});
  }
  band(i);
}
setTimeout("downRun('"+editDiv+"','"+qItem+"')",changeTime);
});