新闻图片切换播放和自动切换播放以及链接功能【js+css设计】
2008-05-23 22:53
826 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=zh-CN xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>图片新闻效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="index, follow" name=robots>
<META content="index, follow" name=googlebot>
<STYLE type=text/css>...BODY {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE {...}{
FONT-SIZE: 12px
}
TD {...}{
FONT-SIZE: 12px
}
P {...}{
FONT-SIZE: 12px
}
SELECT {...}{
FONT-SIZE: 12px
}
INPUT {...}{
FONT-SIZE: 12px
}
DIV {...}{
FONT-SIZE: 12px
}
UL {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
FORM {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
A IMG {...}{
BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
FORM {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
INPUT {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
SELECT {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H6 {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
A:link {...}{
COLOR: #000; TEXT-DECORATION: none
}
A:visited {...}{
COLOR: #000; TEXT-DECORATION: none
}
A:active {...}{
COLOR: #000; TEXT-DECORATION: none
}
A:hover {...}{
COLOR: #ff0000; TEXT-DECORATION: none
}
.center {...}{
FLOAT: none; MARGIN: 0px auto; WIDTH: 1000px
}
.bgwhite {...}{
FLOAT: left; WIDTH: 1000px; BACKGROUND-COLOR: #ffffff
}
.width990 {...}{
FLOAT: none; MARGIN: 0px auto; WIDTH: 990px; HEIGHT: auto
}
.margin_t_5 {...}{
MARGIN-TOP: 5px
}
.margin_t_30 {...}{
MARGIN-TOP: 30px
}
.margin_l_5 {...}{
MARGIN-LEFT: 4px
}
.margin_l_7 {...}{
MARGIN-LEFT: 7px
}
.padding_l_30 {...}{
PADDING-LEFT: 30px
}
.padding_l_26 {...}{
PADDING-LEFT: 26px
}
.padding_l_560 {...}{
PADDING-LEFT: 530px
}
.ls2 {...}{
LETTER-SPACING: 2px
}
.lh22 {...}{
LINE-HEIGHT: 22px
}
.lh24 {...}{
LINE-HEIGHT: 24px
}
.lh30 {...}{
LINE-HEIGHT: 30px
}
.f12b {...}{
FONT-WEIGHT: bold; FONT-SIZE: 12px
}
.f14 {...}{
FONT-SIZE: 14px
}
.f14b {...}{
FONT-WEIGHT: bold; FONT-SIZE: 14px
}
.white {...}{
COLOR: #fff
}
.white A:link {...}{
COLOR: #fff
}
.white A:visited {...}{
COLOR: #fff
}
.white A:active {...}{
COLOR: #fff
}
.orange {...}{
COLOR: #ff6600
}
.orange A:link {...}{
COLOR: #ff6600
}
.orange A:visited {...}{
COLOR: #ff6600
}
.orange A:active {...}{
COLOR: #ff6600
}
.orange A:hover {...}{
COLOR: #ff6600
}
.head_menu {...}{
FILTER: dropshadow(color=#000000,offx=1,offy=1); COLOR: #ffffff
}
.pic_border {...}{
BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; BORDER-BOTTOM: #999 1px solid
}
.pic_border_black {...}{
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid
}
.red_link {...}{
COLOR: #ff0000
}
.red_link A:link {...}{
COLOR: #ff0000
}
.red_link A:visited {...}{
COLOR: #ff0000
}
.red_link A:active {...}{
COLOR: #ff0000
}
.red_link A:hover {...}{
COLOR: #ff6600
}
.blue_link {...}{
COLOR: #10326b
}
.blue_link A:link {...}{
COLOR: #10326b
}
.blue_link A:visited {...}{
COLOR: #10326b
}
.blue_link A:active {...}{
COLOR: #10326b
}
.blue_link A:hover {...}{
COLOR: #ff6600
}
.blue1_link {...}{
COLOR: #999999
}
.blue1_link A:link {...}{
COLOR: #3366cc
}
.blue1_link A:visited {...}{
COLOR: #3366cc
}
.blue1_link A:active {...}{
COLOR: #3366cc
}
.blue1_link A:hover {...}{
COLOR: #ff6600
}
.red_link1 {...}{
COLOR: #d90000
}
.red_link1 A:link {...}{
COLOR: #d90000
}
.red_link1 A:visited {...}{
COLOR: #d90000
}
.red_link1 A:active {...}{
COLOR: #d90000
}
.red_link1 A:hover {...}{
COLOR: #ff0000
}
.headborder {...}{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px
}
.logo {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_01.gif); FLOAT: left; WIDTH: 226px; HEIGHT: 114px
}
.headright {...}{
FLOAT: left; WIDTH: 774px
}
.headright_part1 {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_02.gif); FLOAT: left; OVERFLOW: auto; WIDTH: 774px; HEIGHT: 28px
}
.headright_part1 LI {...}{
FLOAT: left; MARGIN: 0px 2px; LINE-HEIGHT: 28px
}
.headright_part1_img {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_04.gif) no-repeat center 50%; WIDTH: 17px; HEIGHT: 24px
}
.input {...}{
BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; MARGIN: 4px 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 55px; BORDER-BOTTOM: #999999 1px solid; HEIGHT: 18px
}
.login {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/login.gif) no-repeat; FLOAT: left; MARGIN: 5px 0px; WIDTH: 51px; HEIGHT: 17px
}
.reg {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/reg.gif) no-repeat; FLOAT: left; MARGIN: 5px 0px; WIDTH: 51px; HEIGHT: 17px
}
.headright_part2 {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_05.gif); FLOAT: left; WIDTH: 774px; HEIGHT: 86px
}
.headmemu_left {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_06.gif) no-repeat; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 17px; HEIGHT: 65px
}
.headmemu_center {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_07.gif) repeat-x; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 730px; HEIGHT: 65px
}
.headmemu_right {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_08.gif) no-repeat; FLOAT: left; MARGIN: 12px 0px 9px; WIDTH: 15px; HEIGHT: 65px
}
.headmenu720a {...}{
FLOAT: left; MARGIN: 9px 0px 0px; WIDTH: 730px
}
.headmenu720a LI {...}{
DISPLAY: block; FLOAT: left; WIDTH: 91px; LINE-HEIGHT: 30px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
.headmenu720b {...}{
FLOAT: left; WIDTH: 730px; LINE-HEIGHT: 21px; TEXT-ALIGN: center
}
.top_pic {...}{
BORDER-RIGHT: #87a3d1 1px solid; BORDER-TOP: #87a3d1 1px solid; BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_21.gif) no-repeat center 50%; FLOAT: left; BORDER-LEFT: #87a3d1 1px solid; WIDTH: 335px; BORDER-BOTTOM: #87a3d1 1px solid; HEIGHT: 300px
}
.top_art {...}{
BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_20.gif) repeat-x 50% top; FLOAT: left; WIDTH: 395px
}
.top_art_today {...}{
PADDING-RIGHT: 7px; PADDING-LEFT: 6px; BACKGROUND: url(http://images.pcgames.com.cn/index/images07/index07_22.gif) no-repeat center 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 395px; PADDING-TOP: 7px; HEIGHT: 63px
}
.top_art_all {...}{
FLOAT: left; OVERFLOW: auto; WIDTH: 395px; HEIGHT: 268px
}
.top_art_all LI {...}{
FLOAT: left
}
.top_art_all .left {...}{
PADDING-LEFT: 8px; FLOAT: left; WIDTH: 193px; TEXT-ALIGN: left
}
.top_art_all .line {...}{
FLOAT: left; WIDTH: 15px; TEXT-ALIGN: left
}
.top_art_all .right {...}{
FLOAT: left; WIDTH: 186px; TEXT-ALIGN: left
}
.top_art_bottom {...}{
BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; FLOAT: left; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 395px; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid
}
.top_art_bottom UL {...}{
HEIGHT: 90px; BACKGROUND-COLOR: #f6f6ed
}
.top_art_bottom LI {...}{
FLOAT: left; BACKGROUND-COLOR: #f6f6ed
}
</STYLE>
<BODY>
<DIV class=top_pic>
<STYLE type=text/css>...
#f_div {...}{
MARGIN: 6px auto 0px; OVERFLOW: hidden; WIDTH: 320px; HEIGHT: 250px
}
#f_imgDiv {...}{
OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 250px
}
#f_img {...}{
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
#f_infoDiv {...}{
WIDTH: 100%; POSITION: relative; TOP: -22px
}
#f_buttonDiv {...}{
OVERFLOW: hidden; WIDTH: 100%; MARGIN-RIGHT: 1px; HEIGHT: 21px; TEXT-ALIGN: left
}
#f_line {...}{
BACKGROUND: #fff; FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100); FLOAT: right; OVERFLOW: hidden; WIDTH: 40%; HEIGHT: 1px
}
#f_buttonDiv DIV {...}{
BACKGROUND: #fff; FLOAT: right; WIDTH: 1px; HEIGHT: 21px
}
#f_buttonDiv .bg {...}{
BACKGROUND: #fff; FILTER: Alpha(Opacity=40); FLOAT: right; WIDTH: 21px; HEIGHT: 21px
}
#f_buttonDiv A {...}{
DISPLAY: block; FONT-SIZE: 10px; FLOAT: right; OVERFLOW: hidden; WIDTH: 21px; COLOR: #fff; PADDING-TOP: 5px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; HEIGHT: 21px; TEXT-ALIGN: center; TEXT-DECORATION: none
}
#f_buttonDiv A:link {...}{
COLOR: #000
}
#f_buttonDiv A:visited {...}{
COLOR: #000
}
#f_buttonDiv A:active {...}{
COLOR: #000
}
#f_buttonDiv A:hover {...}{
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:link {...}{
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:visited {...}{
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:active {...}{
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover {...}{
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover {...}{
BACKGROUND: #ff6600
}
#f_text {...}{
MARGIN-TOP: 8px; OVERFLOW: hidden; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-ALIGN: center
}
#f_text A:link {...}{
COLOR: #000; TEXT-DECORATION: none
}
#f_text A:visited {...}{
COLOR: #000; TEXT-DECORATION: none
}
#f_text A:active {...}{
COLOR: #000; TEXT-DECORATION: none
}
#f_text A:hover {...}{
COLOR: #ff6600; TEXT-DECORATION: none
}
</STYLE>
<DIV id=f_div>
<!--图片区域-->
<DIV id=f_imgDiv></DIV>
<DIV id=f_infoDiv>
<!--数字按钮区域-->
<DIV id=f_buttonDiv></DIV>
</DIV>
</DIV>
<!--焦点文字区域-->
<DIV class=f12b id=f_text></DIV>
<SCRIPT>...
//可修改区域
var imgWidth=320;
var imgHeight=250;
var _timeOut_=5000;
var show_text = true; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0; //第一张图
var target="_blank"; //打开方式
var button_on ='on'; //当前焦点对应按钮的样式名
var button_off ='';//非当前焦点对应按钮的样式名
//不可修改区域
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
//var menuList = new Array();//菜单menu
var ver=2; //兼容浏览器版本 默认2 为非ie
var firstTime=true;
var n =-1;
imgUrl[++n]='http://www.pcgames.com.cn/netgames/xwkx/gnww/images/picpath/pczhh0820002.jpg';
imgText
='<a href="http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html" target="_blank" class=linkblack>史上最强 安全套做成游戏周边</a>';
imgLink
='http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html';
imgAlt
='史上最强 安全套做成游戏周边';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/ccccccc15224154.jpg';
imgText
='<a href="http://www.pcgames.com.cn/netgames/netmm/" target="_blank" class=linkblack>前RF代言人范冰冰清凉比基尼释放激情写真</a>';
imgLink
='http://www.pcgames.com.cn/netgames/netmm/';
imgAlt
='前RF代言人范冰冰清凉比基尼释放激情写真';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/PCgames070817vanilogobig.jpg';
imgText
='<a href="http://fight.pcgames.com.cn/mm/" target="_blank" class=linkblack>PlayGirl魔兽血精灵MM左小娜性感内衣秀</a>';
imgLink
='http://fight.pcgames.com.cn/mm/';
imgAlt
='PlayGirl魔兽血精灵MM左小娜性感内衣秀';
imgUrl[++n]='http://www.pcgames.com.cn/cartoon/dl/wall/images/picpath/pcgames0818CP2_320.jpg';
imgText
='<a href="http://www.pcgames.com.cn/cartoon/bbs/c72" target="_blank" class=linkblack>C72预热之四：[和]激萌萝莉壁纸大赏</a>';
imgLink
='http://www.pcgames.com.cn/cartoon/bbs/c72';
imgAlt
='C72预热之四：[和]激萌萝莉壁纸大赏';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/pcgame0820jiaodian01.jpg';
imgText
='<a href="http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html" target="_blank" class=linkblack>中日决战!云天河大战克劳德爆笑同人漫画(1)</a>';
imgLink
='http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html';
imgAlt
='中日决战!云天河大战克劳德爆笑同人漫画(1)';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/pcgames0818crazytaxi320.jpg';
imgText
='<a href="http://www.pcgames.com.cn/tvgames" target="_blank" class=linkblack>极速!《疯狂出租车 车费战争》游戏下载</a>';
imgLink
='http://www.pcgames.com.cn/tvgames';
imgAlt
='极速!《疯狂出租车 车费战争》游戏下载';
var count=0;
for (i=0;i<imgUrl.length;i++) ...{
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) ...{
count++;
} else ...{
break;
}
}
function p$(string)...{
document.write(string);
}
function $(id)...{
return document.getElementById(id);
}
//固定图片size
p$("<style> #f_img { width:"+imgWidth+"px;height:"+imgHeight+"px;</style>");
function change()...{
if (ver==1)...{
with($('f_img').filters[0])...{
Transition=1;
apply();
play();
}
}
if (firstTime)...{ firstTime=false;timeOut=_timeOut_/1000;}
else...{
$('f_img').src=imgUrl[now];
$('f_img').alt=imgAlt[now];
$('f_imgLink').href=imgLink[now];
if (show_text) $('f_text').innerHTML=imgText[now];
for (var i=0;i<count;i++) ...{
$('b'+i).className="button";
//$('f_menu'+i).className="";
}
$('b'+now).className="on";
//$('f_menu'+now).className="on";
now=(now>=imgUrl.length-1)?0:now+1;
timeOut=_timeOut_;
}
theTimer=setTimeout("change()", timeOut);
}
function b_change(num)...{
window.clearInterval(theTimer);
now=num;
firstTime=false;
change();
}
//draw 渐变line （即css:f_line)
function draw_line()...{
var div = document.createElement("div");
div.id = 'f_line';
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));
}
//表现层 start
//图片
var a = document.createElement("a");
a.id="f_imgLink";
a.target=target;
a.href=imgLink[now];
$('f_imgDiv').appendChild(a);
var img = document.createElement("img");
img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild(img);
//数字按钮
for (var i=count-1;i>=0;i--)...{
var div_bg = document.createElement("div");
div_bg.id = 'div_bg'+i;
div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);
var a = document.createElement("a");
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';
$('div_bg'+i).appendChild(a);
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);
}
if (show_text) $('f_text').innerHTML = imgText[now];
//表现层 end
$('f_img').onmouseover=function()...{window.clearInterval(theTimer);}
$('f_img').onmouseout=function()...{theTimer=setTimeout("change()", timeOut2);}
try...{ //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();
ver=1;
draw_line();
}
catch (e)...{ver=2;}
var theTimer = setTimeout("change()", _timeOut_/1000);
</SCRIPT>
</DIV>
</BODY></HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js+css写的图片自动切换
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- Web前端-JS效果-网站首页+图片自动播放、切换等效果
- 滚动视图(UIScrollView)无限无缝左右切换图片,自动顺序加逆序循环播放图片
- 新闻图片切换代码（纯js，no flash)
- 前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
- 原生js实现拖动图片左右弹性切换（模仿iPhone弹性拖拽的功能）
- js自动切换图片
- JS+CSS实现淡入式焦点图片幻灯切换效果的方法
- 非常漂亮的JS+CSS图片幻灯切换特效
- js+css图片自动等比例缩小且垂直居中
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换，UIPageControl可点击
- JS实现的简单图片切换功能示例【测试可用】
- 基于jQuery焦点图片新闻代码（JS+CSS）
- 图片切换（一）(div+css+js)
- 网页缓存Js，css以及图片导致页面刷新无效果的三种解决办法
- 图片自动切换鼠标移上暂停6秒继续切换的js代码
- js实现图片自动切换
- CSS或JS实现gif动态图片的停止与播放