新闻图片切换代码（纯js，no flash)

最新推荐文章于 2022-08-20 12:34:25 发布
最新推荐文章于 2022-08-20 12:34:25 发布
阅读量8.1k 收藏 3
点赞数
文章标签： flash class javascript function filter transition
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjq118/article/details/4520112
版权
本文介绍了一段JavaScript实现的图片轮播代码，该代码能够有效解决大图片加载问题，适用于图片容量超过300K的情况。通过动态切换图片及文字描述，并利用HTML和CSS进行布局，实现了良好的用户体验。
摘要由CSDN通过智能技术生成

<STYLE type=text/css>
#imgTitle {
FILTER: ALPHA(opacity=70); LEFT: 0px; OVERFLOW: hidden; POSITION: relative; TEXT-ALIGN: left
}
#imgTitle_up {
LEFT: 0px; HEIGHT: 1px; TEXT-ALIGN: left
}
#imgTitle_down {
LEFT: 0px; TEXT-ALIGN:left
}
.imgClass {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-BOTTOM: #fff 1px solid
}
#txtFrom {
 VERTICAL-ALIGN: middle;
 PADDING-TOP: 2px;
 TEXT-ALIGN: center;
 font: 12pix;
 text-decoration: none; 
 
}
.button {
PADDING-RIGHT: 7px; PADDING-LEFT: 7px; BACKGROUND: #7b7b63; PADDING-BOTTOM: 2px; MARGIN: 0px; FONT: bold 9px sans-serif; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 2px; TEXT-DECORATION: none
}
A.button {
COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:link {
COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:visited {
COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:hover {
BACKGROUND: #fff; COLOR: #fff; FONT-FAMILY: sans-serif; TEXT-DECORATION: none
}
.buttonDiv {
BACKGROUND: #000000; FLOAT: left; VERTICAL-ALIGN: middle; WIDTH: 21px; HEIGHT: 1px; TEXT-ALIGN: center
}
.trans {
FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40); WIDTH: 90px; BACKGROUND-COLOR: #000
}
</STYLE>
<script language=javascript type=text/javascript>
var imgWidth=248;              //图片宽
var imgHeight=160;             //图片高
var textFromHeight=20;         //焦点字框高度 (单位为px)
var textStyle="whiter";           //焦点字class style (不是连接class)
var textLinkStyle="whiter"; //焦点字连接class style
var buttonLineOn="#f60";           //button下划线on的颜色
var buttonLineOff="#000";          //button下划线off的颜色
var TimeOut=3000;              //每张图切换时间 (单位毫秒);
var imgUrl=new Array(<%=imgname%>);
var imgLink=new Array(<%=imglink%>);
var imgtext=new Array(<%=imgtext%>);
var imgAlt=new Array(<%=imgtext%>);
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">');
//焦点字框高度样式表 结束
imgUrl[1]='http://www.hnust.cn/news/images/upfiles/200962683344831.jpg';
//imgtext[1]='<a href="http://blog.sina.com.cn/s/blog_54b3acdc0100dtid.html" target="_blank" class=linkblack>中国海洋文化节组图1</a>';
//imgLink[1]='http://blog.sina.com.cn/s/blog_54b3acdc0100dtid.html';
//imgAlt[1]='中国海洋文化节组图1';
//
imgUrl[2]='http://www.hnust.cn/news/images/upfiles/200982985610455.jpg';
//imgtext[2]='<a href="http://blog.sina.com.cn/dszyz" target="_blank" class=linkblack>周叶舟的新浪博客</a>';imgLink[2]='http://blog.sina.com.cn/dszyz';
//imgAlt[2]='周叶舟的新浪博客';
//
imgUrl[3]='http://www.hnust.cn/news/images/upfiles/200962683344831.jpg';
//imgtext[3]='<a href="http://blog.sina.com.cn/s/blog_54b3acdc0100ckld.html" target="_blank" class=linkblack>如何减轻中小学生学业负担的八点建议</a>';
//imgLink[3]='http://blog.sina.com.cn/s/blog_54b3acdc0100ckld.html';
//imgAlt[3]='如何减轻中小学生学业负担的八点建议';
//
imgUrl[4]='http://www.hnust.cn/news/images/upfiles/200982985610455.jpg';
//imgtext[4]='<a href="http://q.blog.sina.com.cn/zjds" target="_blank" class=linkblack>浙江岱山人文</a>';
//imgLink[4]='http://q.blog.sina.com.cn/zjds';
//imgAlt[4]='浙江岱山人文';
//
imgUrl[5]='http://www.hnust.cn/news/images/upfiles/200962683344831.jpg';
//imgtext[5]='<a href="http://q.blog.sina.com.cn/zjds/bbs/topic/tid=14616323" target="_blank" class=linkblack>2009年中国海洋文化节谢洋大典活动方案</a>';
//imgLink[5]='http://q.blog.sina.com.cn/zjds/bbs/topic/tid=14616323';
//imgAlt[5]='2009年中国海洋文化节谢洋大典活动方案';

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>

 

说明：

1.网上曾经流行的flash切换的新闻图片代码，在加载图片容量大于300k的时候， 图片不能够显示；

2.本段代码可以显示大于300K的图片，其中红色字体部分

var imgUrl=new Array(<%=imgname%>);
var imgLink=new Array(<%=imglink%>);
var imgtext=new Array(<%=imgtext%>);
var imgAlt=new Array(<%=imgtext%>);

是在js中引用asp脚本中的实际加载字符串变量，即图片名称，图片链接地址和新闻标题3部分。

zjq118
关注
html+js 仿flash动画实例
qq_36627117的博客
07-13 421
用html+javascript实现了一个仿flash动画实例，其实做起来也有些难度，主要是动画的移动和图的切换。 先给出实现后的效果图： 先贴出html代码部分 <div id="playimages" class="play"> <ul class="big_pic"> <div class="prev"></div> <!--左按钮 --> <div class="next"&
js做的新闻图片切换效果
03-17
NULL 博文链接：https://yuxuguang.iteye.com/blog/565725
JS多种新闻图片切换效果
12-13
JS多种新闻图片切换效果源码，已经封装好JS，只需简单调用即可。
163图片新闻切换（html+js）
09-05
163图片新闻切换（html+js）163图片新闻切换（html+js）
js新闻焦点图切换代码
10-27
js新闻焦点图切换代码 js新闻焦点图切换代码 js新闻焦点图切换代码
大一学生期末大作业 html+css+javascript网页设计实例【电影购票项目】html网页制作成品代码
weixin__BJ050106的博客
08-20 4337
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
JavaScript 基础代码练习
MYgirlHHH的博客
12-09 506
JavaScript
html网页制作代码大全——大学生影视主题网页制作——图图影视影院5页HTML+CSS+JavaScript
VX_WJ88950106的博客
08-11 2350
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto......
JS新闻图片切换
03-17
腾讯手机版JS新闻图片切换效果，左右滚动切换代码
新闻图片（多张）动态切换代码
12-02
新闻图片（多张）动态切换代码，数据来自sql
flash新闻图片切换源码
07-14
flash新闻图片切换源码，可以直接在html里面配置图片地址，标题，链接，背景颜色，显示时间等。 自动缩放图片到合适位置。 Flash9 ActionScript 3.0开发
jquery新闻门户网站图片相册切换特效js代码
06-04
jquery新闻门户网站图片相册切换特效js代码
tab选项卡新闻列表切换效果代码
10-22
很好用的源码，只需要简单修改就能使用。并且完美兼容各种浏览器。tab选项卡新闻列表切换效果代码
如新闻频道滑动切换的代码
u010438187的专栏
07-24 701
效果： collectionView的数据源方法 - (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {     newsCell *cell = [collectionVi
JavaScript 图片切换展示效果
rfb0204421的专栏
03-31 1553
JavaScript 图片滑动切换效果var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;}; var Extend = function(destination, source) { for (var property in
JS实现图片切换
407指导员
10-21 320
图片切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> * { margin: 0; p(index+1)ing: 0; } #outer { w
图片新闻的动态切换
dawn0718的专栏
12-11 829
很多新闻网页里面都有图片切换的效果，今天写了一个简单的。 &lt;html&gt; &lt;head&gt; &lt;title&gt;图片新闻切换&lt;/title&gt; &lt;style type=text/css&gt; #Container{width:400px;height:300px;background:red;margin:0 auto;z-index:1}...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值