当前位置：Gxlcms > JavaScript > Javascript+CSS实现Flash动态新闻效果（pp原创）

Javascript+CSS实现Flash动态新闻效果（pp原创）

时间：2021-07-01 10:21:17 帮助过：45人阅读

.pp_portal_imgNew { 
position:absolute; 
}

/* 图片样式 */ 
.pp_portal_imgNew img { 
width:100%; 
height:165px; 
border:0; 
}

/* 文字标题样式 */ 
.pp_portal_imgNew_title { 
text-align:center; 
margin-top:5px; 
}

.pp_portal_imgNew_title a{ 
display:block; 
color:#000; 
text-decoration: none; 
font-size: 14px; 
font-weight: bold; 
text-align:center; 
}

/* 导航提示位置 */ 
.pp_portal_navLink { 
position:absolute; 
display:block; 
right:0px; 
bottom:5px; 
}

/* 导航提示样式(未选择) */ 
.pp_portal_navLink a { 
color:#fff; 
text-align:center; 
text-decoration: none; 
}

.pp_portal_navLink li { 
display:inline; 
text-align:center; 
background-color:#333; 
width:15px; 
margin-left:1px; 
} 
</style> 
<script type="text/javascript"> 
var newsNum = 4; 
var nn = 1;

// 自动选择图片新闻 
function pp_portal_changePicNew() 
{ 
if(nn>newsNum) nn=1 
//alert(nn); 
pp_portal_selectPicNew(nn); 
nn++; 
}

function pp_portal_picNew_auto() { 
pp_portal_picNew_autoTask = setInterval('pp_portal_changePicNew()', 2000); 
} 
pp_portal_picNew_auto(); 
</script>

<img alt="图片新闻一" src="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-17-201917/20081011185509111.jpg"></img> 
图片新闻一 
 
 
<img alt="图片新闻二" src="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-17-201917/20081011185509111.jpg"></img> 
图片新闻二 
 
 
<img alt="图片新闻三" src="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-17-201917/20081011185509111.jpg"></img> 
图片新闻三 
 
 
<img alt="图片新闻四" src="https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-17-201917/20081011185509111.jpg"></img> 
图片新闻四 
 
 
<ul> 
<li id="id_portal_navLink1" > 1 </li> 
<li id="id_portal_navLink2" > 2 </li> 
<li id="id_portal_navLink3" > 3 </li> 
<li id="id_portal_navLink4" > 4 </li> 
</ul>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Javascript+CSS实现Flash动态新闻效果（pp原创）

人气教程排行