经验分享程序开发文档资料数据资源其它资源

迅雷网div+css+js图片展示轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 迅雷网div+css+js图片展示轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

迅雷网div+css+js图片展示轮播滚动切换特效代码

HTML代码(index.html):

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为迅雷网div+css+js图片展示代..." />
<title>迅雷网div+css+js图片展示代...</title>
<link rel="stylesheet" rev="stylesheet" href="css/css_xunlei.css" type="text/css" media="all" />
<script type="text/javascript" src="js/funcs.js"></script>
</head>
<body>
<div align="center" >
<script type="text/javascript">
var MaxScreen = 7 ;
var CurScreen = 1 ;
</script>
<div class="flashNews">
<div id="Switch_1"><a  href="#" target="_blank" blockid="1121"><img src="images/01.jpg" alt="功夫世界" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>
<div id="Switch_2" style="display:none;"><a  href="#" target="_blank" blockid="1121"><img src="images/02.jpg" alt="康师傅茉莉清茶" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>
<div id="Switch_3" style="display:none;"><a  href="#" target="_blank" blockid="1121"><img src="images/03.jpg" alt="VANCL 凡客城品" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>
<div id="Switch_4" style="display:none;"><a  href="#" target="_blank" blockid="1121"><img src="images/04.jpg" alt="赎命24小时" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>
<div id="Switch_5" style="display:none;"><a  href="#" target="_blank" blockid="1121"><img src="images/05.jpg" alt="耀眼的日子" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>
<div id="Switch_6" style="display:none;"><a  href="#" target="_blank" blockid="1121"><img src="images/06.jpg" alt="星河舰队3" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>
<div id="Switch_7" style="display:none;"><a  href="#" target="_blank" blockid="1121"><img src="images/07.jpg" alt="全民超人汉考克" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"/></a></div>

<div id="SwitchTitle" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"></div>
<ul id="SwitchNav"></ul>
<div class="bg" onmouseover="pauseSwitch();"  onmouseout="goonSwitch();"></div>
</div>

<p>
  <script type="text/javascript">
var Switcher = new Array();
Switcher[1] = Array() ;
Switcher[1]['title'] = "功夫世界" ;
Switcher[1]['stitle'] = "每天送礼再升级 更多豪礼拿不停" ;
Switcher[1]['link'] = "#" ;
Switcher[2] = Array() ;
Switcher[2]['title'] = "康师傅茉莉清茶" ;
Switcher[2]['stitle'] = "创意生活 晒出你的新创意" ;
Switcher[2]['link'] = "#" ;
Switcher[3] = Array() ;
Switcher[3]['title'] = "VANCL 凡客城品" ;
Switcher[3]['stitle'] = "低价新体验 火爆促销中" ;
Switcher[3]['link'] = "#" ;
Switcher[4] = Array() ;
Switcher[4]['title'] = "赎命24小时" ;
Switcher[4]['stitle'] = "电影版-步步涉险分分惊魂" ;
Switcher[4]['link'] = "#" ;
Switcher[5] = Array() ;
Switcher[5]['title'] = "耀眼的日子" ;
Switcher[5]['stitle'] = "点燃激情的动力，捍卫生命的奇迹" ;
Switcher[5]['link'] = "#" ;
Switcher[6] = Array() ;
Switcher[6]['title'] = "星河舰队3" ;
Switcher[6]['stitle'] = "重力打造强势回归，继续与异形战斗" ;
Switcher[6]['link'] = "#" ;
Switcher[7] = Array() ;
Switcher[7]['title'] = "全民超人汉考克" ;
Switcher[7]['stitle'] = "票房“超人”威尔·史密斯最新力作枪版" ;
Switcher[7]['link'] = "#" ;

var refreshSwitchTimer = null;
switchPic(CurScreen);
refreshSwitchTimer = setTimeout('reSwitchPic();', 3000);
</script>
</div>
</body>
</html>

JS代码(funcs.js):

function getDownloadUrl(productName){
	var random = parseInt(Math.random()*100);
	var temp = 0;
	for(var i = 0;
	i < productName.length && random > temp;
	i++){
	temp += parseInt(productName[i].percent);
}
i = (random == 0 ? 0:i - 1);
	return "<a href=\"" + productName[i].url + "\">" + productName[i].name + "</a>";
}
function switchTab(identify,index,count){
	for(i=0;
	i<count;
	i++){
	var CurTabObj = document.getElementById("Tab_"+identify+"_"+i);
	var CurListObj = document.getElementById("List_"+identify+"_"+i);
	if (i != index){
	fRemoveClass(CurTabObj,"upH3");
	fRemoveClass(CurListObj,"upBox");
}
}
fAddClass(document.getElementById("Tab_"+identify+"_"+index),"upH3");
	fAddClass(document.getElementById("List_"+identify+"_"+index),"upBox");
}
function switchSideTab(identify,index,count){
	for(i=0;
	i<count;
	i++){
	var CurTabObj = document.getElementById("Tab_"+identify+"_"+i);
	var CurListObj = document.getElementById("List_"+identify+"_"+i);
	if (i != index){
	fRemoveClass(CurTabObj,"upH3");
	fRemoveClass(CurListObj,"upUL");
}
}
fAddClass(document.getElementById("Tab_"+identify+"_"+index),"upH3");
	fAddClass(document.getElementById("List_"+identify+"_"+index),"upUL");
}
function fAddClass(XEle,XClass){
	/* shawl.qiu code,void return */
 if(!XClass) throw new Error("XClass 不能为空!");
	if(XEle.className!=""){
	var Re = new RegExp("\\b"+XClass+"\\b\\s*","");
	XEle.className = XEle.className.replace(Re,"");
	var OldClassName = XEle.className.replace(/^\s+|\s+$/g,"");
	if (OldClassName == "" ){
	XEle.className = XClass;
}
else{
	XEle.className = OldClassName + " " + XClass;
}
}
else XEle.className = XClass;
}
/* end function fAddClass(XEle,XClass) */
function fRemoveClass(XEle,XClass){
	/* shawl.qiu code,void return */
 if(!XClass) throw new Error("XClass 不能为空!");
	var OldClassName = XEle.className.replace(/^\s+|\s+$/g,"");
	if(OldClassName!=""){
	var Re = new RegExp("\\b"+XClass+"\\b\\s*","");
	XEle.className = OldClassName.replace(Re,"");
}
}
/* function fRemoveClass(XEle,XClass) */
function switchPic(screen){
	if (screen > MaxScreen){
	screen = 1;
}
for (i=1;
	i<=MaxScreen;
	i++){
	document.getElementById("Switch_"+i).style.display = "none";
}
document.getElementById("Switch_"+screen).style.display = "block";
	showSwitchNav(screen);
	showSwitchTitle(screen);
	//Effect.Appear("Switch_"+screen);
	//switchLittlePic(screen);
	//showSwitchTitles(screen);
	CurScreen = screen;
}
function showSwitchNav(screen){
	var NavStr = "";
	for (i=1;
	i<=MaxScreen;
	i++){
	if (i == screen){
	NavStr += '<li onmouseover="pauseSwitch();
	" onmouseout="goonSwitch();
	"><a href="javascript://" target="_self" class="sel">'+i+'</a></li>';
}
else{
	NavStr += '<li onmouseover="pauseSwitch();
	" onmouseout="goonSwitch();
	" onclick="goManSwitch('+i+');
	"><a href="javascript://" target="_self">'+i+'</a></li>';
}
}
document.getElementById("SwitchNav").innerHTML = NavStr;
}
function showSwitchTitle(screen){
	var titlestr = "";
	titlestr = '<h3><a href="'+Switcher[screen]['link']+'" target="_blank">'+Switcher[screen]['title']+'</a></h3><p><a href="'+Switcher[screen]['link']+'" target="_blank">'+Switcher[screen]['stitle']+'</a></p>';
	document.getElementById("SwitchTitle").innerHTML = titlestr;
}
function reSwitchPic(){
	refreshSwitchTimer = null;
	switchPic(CurScreen+1);
	refreshSwitchTimer = setTimeout('reSwitchPic();
	',3000);
}
function pauseSwitch(){
	clearTimeout(refreshSwitchTimer);
}
function goonSwitch(){
	clearTimeout(refreshSwitchTimer);
	refreshSwitchTimer = setTimeout('reSwitchPic();
	',3000);
}
function goManSwitch(index){
	clearTimeout(refreshSwitchTimer);
	CurScreen = index - 1;
	reSwitchPic();
}
function floatAdMove(){
	try{
	BigAd = document.getElementById("BigAd")}
catch(e){
}
if (BigAd.style.display != "none"){
	if (document.ns){
	BigAd.style.top=bdy.scrollTop+bdy.clientHeight-imgheight_close -360;
	BigAd.style.left=bdy.offsetWidth/2-bdy.scrollLeft-300;
}
else{
	BigAd_style_left=bdy.offsetWidth/2-bdy.scrollLeft-300;
	BigAd_style_top = 200;
	BigAd.style.top=BigAd_style_top + "px";
	BigAd.style.left=BigAd_style_left + "px";
}
}
setTimeout("floatAdMove();
	",50);
}
function FloatCtrlMove(){
	try{
	FloatCtrl = document.getElementById("FloatCtrl")}
catch(e){
}
if (FloatCtrl.style.display != "none"){
	if (document.ns){
	FloatCtrl.style.top=bdy.scrollTop+bdy.clientHeight-imgheight_close;
	FloatCtrl.style.left=bdy.scrollLeft+bdy.offsetWidth-150;
}
else{
	FloatCtrl_style_left=bdy.scrollLeft+bdy.offsetWidth-150;
	FloatCtrl_style_top = 500;
	FloatCtrl.style.top=FloatCtrl_style_top + "px";
	FloatCtrl.style.left=FloatCtrl_style_left + "px";
}
}
setTimeout("FloatCtrlMove();
	",50);
}
function showFloatAd(){
	cleanTimer();
	try{
	floatbig = document.getElementById("floatbig")}
catch(e){
}
if (floatbig.innerHTML != ""){
	BigAdStartTimer = setTimeout("Effect.Appear('BigAd');
	",500);
	BigAdEndTimer = setTimeout("hiddenFloatAd();
	",6000);
	hiddenFloatCtrl();
}
}
function hiddenFloatAd(){
	cleanTimer();
	Effect.Fade('BigAd');
	showFloatCtrl();
}
function showFloatCtrl(){
	try{
	FloatCtrl = getElementById("FloatCtrl")}
catch(e){
}
FloatCtrl.style.display = "block";
}
function hiddenFloatCtrl(){
	try{
	FloatCtrl = getElementById("FloatCtrl")}
catch(e){
}
FloatCtrl.style.display = "none";
}
function cleanTimer(){
	clearTimeout(BigAdStartTimer);
	clearTimeout(BigAdEndTimer);
}

CSS代码(css_xunlei.css):

/* 代码整理：懒人图库 ＊珍惜他人劳动，转载请自觉注明出处 */
body{text-align:left;font:normal 12px/1.6em simsun,Verdana,Lucida,Arial,Helvetica,sans-serif;color:#353535;}
a{text-decoration:none;color:#353535;}
a:hover{color:#CD0102;}
img{border:0;}
.flashNews{position:relative;width:304px;margin-bottom:12px;overflow:hidden;border:1px solid #B6CAE3;text-align:left}
.firstNews{position:relative;float:right;width:434px;margin-bottom:12px;overflow:hidden;border:1px solid #B6CAE3;}
.flashNews,.firstNews{height:270px;}
.flashNews .bg{position:absolute;left:0;bottom:0;width:304px;height:73px;background:#000000;filter:alpha(opacity=39);-moz-opacity:0.39;opacity:0.39;}
.flashNews h3{position:absolute;left:10px;top:200px;width:284px;height:35px;line-height:35px;z-index:2;}
.flashNews h3 a{font-size:20px;font-family:"黑体";font-weight:normal;color:#FFFFFF;}
.flashNews h3 a:hover{color:#F20000;}
.flashNews p{position:absolute;left:10px;top:230px;width:284px;height:20px;line-height:20px;;z-index:2;}
.flashNews p a{color:#FFFFFF;}
.flashNews p a:hover{color:#F20000;}
.flashNews ul{position:absolute;right:0;bottom:0;padding-left:47px;_padding-left:46px;background:url(flashPage_bg.png) 0 0 no-repeat;z-index:2;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flashPage_bg.png',sizingMethod='crop')}
.flashNews ul li{float:left;width:15px;height:18px;line-height:18px;text-align:center;margin-left:1px;background:#000000;}
.flashNews ul li a{display:block;width:15px;height:18px;font-size:10px;font-family:Tahoma;font-weight:bold;color:#FFFFFF;}
.flashNews ul li a:hover,.flashNews ul li a.sel{color:#F20000;}
.firstNews h3{width:432px;height:27px;line-height:27px;text-indent:14px;font-size:12px;border:1px solid #FFFFFF;background:#F2F6FB;}
.firstNews p{position:absolute;top:5px;right:5px;}
.firstNews p a{font-size:12px;}
.firstNews h4{width:410px;height:25px;margin:0 auto;overflow:hidden;padding-top:12px;line-height:25px;font-weight:normal;font-size:18px;font-family:"黑体";}
.firstNews ul{width:410px;height:auto;overflow:hidden;_zoom:1;margin:0 0 0 12px;}
.firstNews ul li{position:relative;width:410px;height:22px;line-height:22px;overflow:hidden;text-indent:10px;font-size:14px;background:url(../img/pic.gif) -298px -141px no-repeat;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
226.92 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
226.92 KB
立即下载
简毓桂
了解
打赏作者 鼓励作者
Html 焦点滚动特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章