利用javascript从数据库取数据来实现CSDN首页图片的切换效果
来源:互联网 发布:很黄很污的漫画软件 编辑:程序博客网 时间:2024/05/09 15:36
我在网上下载了一个网站的部分源代码 ,看到里面有实现CSDN首页图片的切换效果。虽然以前看网上有许多转载的,但是里面的代码都是在js中定义一个数组来存放图片的信息,但是今天这个方法更加灵活啊!只需要以下几步即可。 1.创建sql数据库: CREATE TABLE [dbo].[images] ( [imageid] [int] IDENTITY (1, 1) NOT NULL , [imgUrl] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL , [imgText] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL , [imgLink] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NULL , [imgAlt] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ) ON [PRIMARY] 2.引用外部css代码 <link href="styles/StyleSheet2.css" rel="stylesheet" type="text/css" /> 3.写js代码:(不知道为什么放在一个单独的js文件不行) <script language="javascript" type="text/javascript" > var imgWidth=248; //图片宽 var imgHeight=200; //图片高 var textFromHeight=21; //焦点字框高度 (单位为px) var textStyle="whiter"; //焦点字class style (不是连接class) var textLinkStyle="whiter"; //焦点字连接class style var buttonLineOn="#f60"; //button下划线on的颜色 var buttonLineOff="#000"; //button下划线off的颜色 var TimeOut=5000; //每张图切换时间 (单位毫秒); var imgUrl=new Array(); var imgLink=new Array(); var imgtext=new Array(); var imgAlt=new Array(); var adNum=0; //焦点字框高度样式表 开始 document.write('<style type="text/css">'); document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}'); document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}'); document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}'); document.write('</style>'); document.write('<div id="focuseFrom">'); //焦点字框高度样式表 结束 imgUrls="<%=imgUrl%>";//获取后台cs代码的属性 imgtexts="<%=imgtext%>"; imgLinks="<%=imgLink%>"; imgAlts="<%=imgAlt%>"; imgUrl=imgUrls.split(","); imgtext=imgUrls.split(","); imgLink=imgUrls.split(","); imgAlt=imgUrls.split(","); function changeimg(n) { adNum=n; window.clearInterval(theTimer); adNum=adNum-1; nextAd(); } function goUrl(){ window.open(imgLink[adNum],'_blank'); } //NetScape开始 if (navigator.appName == "Netscape") { document.write('<style type="text/css">'); document.write('.buttonDiv{height:4px;width:21px;}'); document.write('</style>'); function nextAd(){ if(adNum<(imgUrl.length-1))adNum++; else adNum=1; theTimer=setTimeout("nextAd()", TimeOut); document.images.imgInit.src=imgUrl[adNum]; document.images.imgInit.alt=imgAlt[adNum]; //document.getElementById('focustext').innerHTML=imgtext[adNum];//在图片下面显示图片的路径 document.getElementById('imgLink').href=imgLink[adNum]; } document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>'); document.write('<div id="imgTitle">'); document.write('<div id="imgTitle_down">'); //数字按钮代码开始 for(var i=1;i<imgUrl.length;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');} //数字按钮代码结束 document.write('</div>'); document.write('</div>'); document.write('</div>'); nextAd(); } //NetScape结束 //IE开始 else { var count=0; for (i=1;i<imgUrl.length;i++) { if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) { count++; } else { break; } } function playTran(){ if (document.all) imgInit.filters.revealTrans.play(); } var key=0; function nextAd(){ if(adNum<count)adNum++ ; else adNum=1; if( key==0 ){ key=1; } else if (document.all){ imgInit.filters.revealTrans.Transition=23; imgInit.filters.revealTrans.apply(); playTran(); } document.images.imgInit.src=imgUrl[adNum]; document.images.imgInit.alt=imgAlt[adNum]; document.getElementById('link'+adNum).style.background=buttonLineOn; for (var i=1;i<=count;i++) { if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;} } //focustext.innerHTML=imgtext[adNum];//在图片下面显示路径 theTimer=setTimeout("nextAd()", TimeOut); } document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a><br>'); document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>'); document.write('<div id="imgTitle">'); document.write(' <div id="imgTitle_down"> <a class="trans"></a>'); //数字按钮代码开始 for(var i=1;i<imgUrl.length;i++) { document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand; " title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>'); } //数字按钮代码结束 document.write('</div>'); document.write('</div>'); document.write('</div>'); document.write('</div>'); } //IE结束 </script> 里面重要的地方都有注释了,直接复制到你的aspx代码中即可。 注意:在<body></body>中不要<form></form>标签,直接在<div align=left> </div>中输入上面的js代码即可。不知道为什么有form总是报imgInit错误。 4.在cs进行数据库调用:直接代码了,呵呵呵不会看不懂吧 protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { bind(); } } public string imgUrl = "", imgLink = "", imgtext = "", imgAlt = ""; void bind() { using (SqlConnection connection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123")) { SqlDataAdapter sda = new SqlDataAdapter("select top 5 * from images order by imageid desc", connection); DataSet ds = new DataSet(); DataTable dt = new DataTable(); sda.Fill(ds); dt = ds.Tables[0]; for (int i = 0; i < dt.Rows.Count; i++) { imgUrl += dt.Rows[i]["imgUrl"].ToString() + ","; imgtext += dt.Rows[i]["imgText"].ToString() + ","; imgLink += dt.Rows[i]["imgLink"].ToString() + ","; imgAlt += dt.Rows[i]["imgAlt"].ToString() + ","; } } } 测试环境:vs2005
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果(新增下载地址)
- 利用JavaScript,实现卡片切换的效果
- 使用JavaScript来实现图片的切换
- Javascript实现经典的图片切换效果
- JavaScript实现图片的滑动切换效果
- Javascript实现经典的图片切换效果
- [javascript]首页图片自动切换的一种实现方式
- [javascript]首页图片自动切换的一种实现方式
- 利用CSS和javascript实现Google首页的动画效果
- 图片切换效果-Javascript实现
- 从两侧向中间拼合的JavaScript图片切换效果
- 从两侧向中间拼合的JavaScript图片切换效果
- javascript的图片切换效果
- 利用FrameLayout中图片的切换来实现换灯片
- 利用.net替换Word的内容(从数据库中取数据来替换word里面的书签)
- 海量的jQuery插件帖,很经典
- window编程学习总结
- AfxBeginThread函数初探
- struts配置文件
- 在Struts中如何应用Validator验证框架
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- web.config加密解密
- Groovy,Grails,Netbeans安装配置手册
- HashMap遍历的两种方式
- "More Joel on software" 读后感
- Ubuntu VI 命令
- [转]党政机关选购协同OA系统时九大策略
- 亿万富翁教程
- 判断线段相交程序