背景图做幻灯片

76 篇文章 0 订阅
70 篇文章 0 订阅
修改别人的作品
<!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" />
<script type="text/javascript" src="learn/jquery-1.8.3.js"></script>
<title>上下滚动</title>
<style type="text/css">
body, input, button, select, textarea, th, td,div,font {color: #333333;font-family: tahoma,arial,sans-serif;font-size: 12px;line-height: 1.5; font-family:"微软雅黑";}
img{ border:none}
ul{ list-style-type:none}
a{ color:#da2a28; text-decoration:none}
a:hover{ text-decoration:underline}
.Banner{ width:100%; height:401px;margin:0px auto; position:relative; text-align:center; padding-top:1px; background-color:#FFFFFF; position:relative; overflow:hidden; }

/*焦点图*/
#fcimg{ margin:0 auto; width: 100%; height: 400px;}
#fcimg li{ height:400px;}
#fcnum { margin:0 auto; top: -33px; height: 23px; margin-bottom: -23px; position:relative; text-align:center; }
#fcnum { text-align:center; position:absolute; top:360px; left:42%;}
#fcnum li{ float:left; background:#FFF; margin-left:10px; height:10px; width:30px; cursor: pointer; margin-top:8px;}
#fcnum li.crn { background-color:#B10000; }



/*透明框*/
.Hnews{ margin:0 auto;width:322px; height:330px; border:1px solid #ffffff;position:absolute;left:50%; margin-left:160px; margin-top:28px;background-color:#FFFFFF; filter:alpha(opacity=90);-moz-opacity:0.9; opacity:0.9; z-index:200;}
.line{ margin:0 auto;width:322px; height:2px;position:absolute;left:50%; margin-left:160px; margin-top:78px;z-index:300; background-image:url(/themes/ddwang/images/bg_3.gif);overflow:hidden;}

</style>
</head>

<body>
<div class="Banner">
    <div class="line"></div>
    <div class="Hnews">
	  <div class="Htop">
	  <ul class="ul_2"><li><a href="#">更多></a>贷贷网公告</li></ul>
	  </div>
	  <ul class="ul_1">
	  	  <li><span>·</span><a href="144.html" title="双11全场投标奖励千分之五!仅此一天" target="_blank">双11全场投标奖励千分之五!仅此一天</a></li>
	  	  <li><span>·</span><a href="143.html" title="逢1必奖!奖励名单持续更新中" target="_blank">逢1必奖!奖励名单持续更新中</a></li>
	  	  <li><span>·</span><a href="142.html" title="关于12月1日起普通会员充值收费的公告" target="_blank">关于12月1日起普通会员充值收费的公告</a></li>
	  	  <li><span>·</span><a href="140.html" title="邀请好友拿返现,快拉你的小伙伴一起来吧!" target="_blank">邀请好友拿返现,快拉你的小伙伴一起来吧!</a></li>
	  	  <li><span>·</span><a href="139.html" title="10月每日投标奖励一等奖名单(第二期)" target="_blank">10月每日投标奖励一等奖名单(第二期)</a></li>
	  	  <li><span>·</span><a href="138.html" title="快来领取10元投资体验金!" target="_blank">快来领取10元投资体验金!</a></li>
	  	  <li><span>·</span><a href="134.html" title="10月每日投标奖励一等奖名单(第一期)" target="_blank">10月每日投标奖励一等奖名单(第一期)</a></li>
	  	  </ul>
	</div>
	<ul id="fcimg">   
	   
	<a href="#" target="_blank"><li style="background-image: url(http://www.daidaicn.com/themes/ddwang/images/ban_img2.jpg); display: none; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"></li></a>
	<a href="#" target="_blank"><li style="background-image: url(http://www.daidaicn.com/themes/ddwang/images/ban_img3.jpg); display: list-item; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"></li></a>
	<a href="#" target="_blank"><li style="background-image: url(http://www.daidaicn.com/themes/ddwang/images/ban_img4.jpg); display: none; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"></li></a>
	<a href="#" target="_blank"><li style="background-image: url(http://www.daidaicn.com/themes/ddwang/images/ban_img5.jpg); display: none; background-position: 50% 0px; background-repeat: no-repeat no-repeat;"></li></a>
	</ul>
	<script language="javascript">
		var indx = 1;
		var looper = 3500;
		var myTimer;
	$(document).ready(function(){
	
	  if($("#fcimg li").length >1){
		$("#fcimg").after( $('<div></div><ul id="fcnum"></ul>')); 
		for(i=1;i<=$("#fcimg li").length;i++){
			if(i==1) $("#fcnum").append($("<li class=\"crn\"> </li>")); 
			else $("#fcnum").append($("<li> </li>")); 
		}
		myTimer = setInterval('showFImg("#fcimg li","#fcnum li","crn")', looper);
		$("#fcnum li").click(function(){
			indx  =  $("#fcnum li").index(this);
			showFImg("#fcimg li","#fcnum li","crn");
			try{
				clearInterval(myTimer);
				myTimer = setInterval('showFImg("#fcimg li","#fcnum li","crn")', looper);
			}catch(e){}
			return false;
		});	
		$("#fcimg").hover(function(){
			if(myTimer){ clearInterval(myTimer); }
		 },function(){
				myTimer = setInterval('showFImg("#fcimg li","#fcnum li","crn")', looper);
		 });
	  }
	});
	
	function showFImg(il,nl,cs){
	  if($(il).length >1){
		crobj = $(il).eq(indx);
		$(il).not(crobj).hide();
		$(nl).removeClass(cs)
		$(nl).eq(indx).addClass(cs);
		crobj.stop(true,true).fadeIn('slow');
		indx = (++indx) % ($(il).length);
	  }
	}
	//一流素材网www.16sucai.com
    </script>
</div>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值