index_06_01 中间

最新推荐文章于 2024-10-07 20:18:35 发布

amnotsuperior

最新推荐文章于 2024-10-07 20:18:35 发布

阅读量394

点赞数

分类专栏：特效

特效专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个用于展示乳腺健康资讯的轮播插件实现方法。该插件使用HTML、CSS和JavaScript技术，能够自动切换展示不同文章的缩略图及链接，同时提供了手动选择功能。


<!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 content="text/html; charset=utf-8" http-equiv=Content-Type>
<META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>
<LINK rel=stylesheet type=text/css href="css/rxwc.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style >

.w510{ float:left; width:500px; background:#ffeee5; padding:5px 5px;}
.w510 a{text-decoration:none;color:#cf2d39;}
.w510 a:hover{ color:#5e5f5f;text-decoration:underline;} 

.bar { width:500px; height:280px;}
.bar dl{height:25px;background:url(../images/dtb1.jpg) repeat-y;display:block;line-height:30px;overflow:hidden; margin:0px;}
.bar dt,.bar dd{float:left;margin-right:5px;display:inline;}
.bar dt a:link,.bar dt a:visited{width:334px;color:#fff;font-size:14px;padding-left:15px;display:block;}
a.da1:link,a.da1:visited{width:21px;height:25px;display:block;font-size:13px;font-weight:700;color:#8d5d22;background:url(../images/dtb3.gif) no-repeat;line-height:25px;text-align:center;float:left;margin-left:2px;}
a.da2:link,a.da2:visited{float:left;display:block;width:21px;height:25px;margin-left:2px;font-size:13px;font-weight:700;color:#fff;background:url(../images/dtb2.gif) no-repeat;line-height:25px;text-align:center;}
a.da2:hover,a.da2:active{background:url(../images/dtb3.gif) no-repeat;text-decoration:none;color:#8d5d22;}

</style>

</HEAD>
<BODY>


<DIV class=w510>
<DIV class=bar>
<SCRIPT type=text/javascript src="js/imagesscrollnew.js"></SCRIPT>
<SCRIPT type=text/javascript>
imgLink[1]="http://ruxian.woman91.com/baojian/2011100549431.shtml";
imgAlt[1]="乳房上长了鹅卵石，怎么办？";
imgtext[1]="<a href='http://ruxian.woman91.com/baojian/2011100549431.shtml'>乳房上长了鹅卵石，怎么办？</a>";
imgUrl[1]="http://images.woman91.com/zt/ruxianweichuang/201110517636640.jpg";
imgLink[2]="http://ruxian.woman91.com/zhongliu/2011102650546.shtml";
imgAlt[2]="乳腺微创手术，切除肿瘤不留痕";
imgtext[2]="<a href='http://ruxian.woman91.com/zhongliu/2011102650546.shtml'>乳腺微创手术，切除肿瘤不留痕</a>";
imgUrl[2]="http://images.woman91.com/zt/ruxianweichuang/2011102614180765.jpg";
imgLink[3]="http://ruxian.woman91.com/xianweiliu/2011100649140.shtml";
imgAlt[3]="什么是乳腺纤维瘤？";
imgtext[3]="<a href='http://ruxian.woman91.com/xianweiliu/2011100649140.shtml'>什么是乳腺纤维瘤？</a>";
imgUrl[3]="http://images.woman91.com/zt/ruxianweichuang/20111061720678.jpg";
imgLink[4]="http://ruxian.woman91.com/baojian/2011100547670.shtml";
imgAlt[4]="你不说，没人知道你做过乳腺手术";
imgtext[4]="<a href='http://ruxian.woman91.com/baojian/2011100547670.shtml'>你不说，没人知道你做过乳腺手术</a>";
imgUrl[4]="http://images.woman91.com/zt/ruxianweichuang/2011106172652812.jpg";
var count=4;
</SCRIPT>
<A href="javascript:goUrl()" target=_self><IMG 
style="FILTER: revealTrans(duration=1,transition=5)" class=imgClass border=0 
name=imgInit src="picture/blank.gif" width=500 
height=250></A>
<DL>
  <DT id=focustext></DT>
  <DD><A id=link1 class=da2 href="javascript:changeimg(1)" target=_self>1</A> <A 
  id=link2 class=da2 href="javascript:changeimg(2)" target=_self>2</A> <A 
  id=link3 class=da2 href="javascript:changeimg(3)" target=_self>3</A> <A 
  id=link4 class=da2 href="javascript:changeimg(4)" target=_self>4</A> 
</DD></DL></DIV></DIV>
<SCRIPT type=text/javascript>
nextAd();
</SCRIPT>
</BODY>
</HTML>

/js  文件/
var imgWidth=500;              //图片宽
var imgHeight=250;             //图片高
var textFromHeight=25;         //焦点字框高度 (单位为px)
var buttonLineOn="#f60";           //button下划线on的颜色
var buttonLineOff="#000";          //button下划线off的颜色
var TimeOut=4000;              //每张图切换时间 (单位毫秒);
var imgUrl=new Array(); 
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
var overon=0; //鼠标是否移到上面

function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();		
}

function changeimg(n)
{
adNum=n;
//window.clearInterval(theTimer);
clearTimeout(theTimer);
adNum=adNum-1;
nextAd();
}

function goUrl(){
window.open(imgLink[adNum],'_blank');
}

/*
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];
}
*/

function nextAd(){
document.images.imgInit.onmouseover=function(){
	overon=1;
}
document.images.imgInit.onmouseout=function(){
	overon=0;
}
if (overon==1){
	theTimer=setTimeout("nextAd()", TimeOut);
	return;
}
if(adNum<count) adNum++ ;
else adNum=1;

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).className="da1";
for (var i=1;i<=count;i++)
{
if (i!=adNum){document.getElementById('link'+i).className="da2";}
}
document.getElementById("focustext").innerHTML=imgtext[adNum];
theTimer=setTimeout("nextAd()", TimeOut);
}