图片新闻切换效果

原创 2007年09月30日 14:49:00

<!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[n]='<a href="http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html" target="_blank" class=linkblack>史上最强 安全套做成游戏周边</a>';
imgLink[n]='http://www.pcgames.com.cn/netgames/xwkx/gnww/0708/933872.html';
imgAlt[n]='史上最强 安全套做成游戏周边';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/ccccccc15224154.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/netgames/netmm/" target="_blank" class=linkblack>前RF代言人范冰冰清凉比基尼释放激情写真</a>';
imgLink[n]='http://www.pcgames.com.cn/netgames/netmm/';
imgAlt[n]='前RF代言人范冰冰清凉比基尼释放激情写真';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/PCgames070817vanilogobig.jpg';
imgText[n]='<a href="http://fight.pcgames.com.cn/mm/" target="_blank" class=linkblack>PlayGirl魔兽血精灵MM左小娜性感内衣秀</a>';
imgLink[n]='http://fight.pcgames.com.cn/mm/';
imgAlt[n]='PlayGirl魔兽血精灵MM左小娜性感内衣秀';
imgUrl[++n]='http://www.pcgames.com.cn/cartoon/dl/wall/images/picpath/pcgames0818CP2_320.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/cartoon/bbs/c72" target="_blank" class=linkblack>C72预热之四:[和]激萌萝莉壁纸大赏</a>';
imgLink[n]='http://www.pcgames.com.cn/cartoon/bbs/c72';
imgAlt[n]='C72预热之四:[和]激萌萝莉壁纸大赏';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/pcgame0820jiaodian01.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html" target="_blank" class=linkblack>中日决战!云天河大战克劳德爆笑同人漫画(1)</a>';
imgLink[n]='http://www.pcgames.com.cn/pcgames/pczq/xj4/index.html';
imgAlt[n]='中日决战!云天河大战克劳德爆笑同人漫画(1)';
imgUrl[++n]='http://www.pcgames.com.cn/games/tt/images/picpath/pcgames0818crazytaxi320.jpg';
imgText[n]='<a href="http://www.pcgames.com.cn/tvgames" target="_blank" class=linkblack>极速!《疯狂出租车 车费战争》游戏下载</a>';
imgLink[n]='http://www.pcgames.com.cn/tvgames';
imgAlt[n]='极速!《疯狂出租车 车费战争》游戏下载';
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> 

相关文章推荐

百度新闻首页图片切换效果

  • 2012年01月12日 22:48
  • 9KB
  • 下载

JQuery页面图片切换和新闻列表滚动效果的具体实现

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下:   前段代码: jQuery(document).ready(function() { ...

163图片新闻切换效果

  • 2010年03月30日 11:12
  • 8KB
  • 下载

新浪新闻图片切换效果

  • 2011年11月23日 13:35
  • 655KB
  • 下载

JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻

新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden...

ActionBarSherlock与Viewpager及Fragment结合实现仿新闻客户端顶部滑动切换效果

ActionBarSherlock与Fragment的结合使用非常广泛,
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片新闻切换效果
举报原因:
原因补充:

(最多只允许输入30个字)