娱乐站常用七屏js焦点图定时切换特效

7个月前 (04-23 16:36)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

js实现焦点图定时切换效果，娱乐站常用一种图片切换特效，当用户的鼠标经过右边的带箭头标题时立即切换左侧大图显示。

<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>娱乐站常用七屏js焦点图定时切换特效_武鸣人</title>
<SCRIPT type="text/javascript">
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("bigimg").src = picarry[id];
document.getElementById("a_jimg").href = lnkarry[id];
if (id==4) {
document.getElementById("a_jimg").style.background = 'url('+picarry[0]+')'
}
else {
document.getElementById("a_jimg").style.background = 'url('+picarry[id+1]+')'
}
currslid = id;
for(i=0;i<7;i++){
document.getElementById("li_jimg"+i).className = "li_jimg";
};
document.getElementById("li_jimg"+id).className ="li_jimg on";
var borserInfo=navigator.userAgent.toLowerCase();
if(/msie/.test(borserInfo))
{
document.getElementById("bigimg").style.visibility = "hidden";
document.getElementById("bigimg").filters[0].Apply();
document.getElementById("bigimg").filters[0].transition=23;
if (document.getElementById("bigimg").style.visibility == "visible") {
document.getElementById("bigimg").style.visibility = "hidden";
}
else {
document.getElementById("bigimg").style.visibility = "visible";
}
document.getElementById("bigimg").filters[0].Play();
}
stopit();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function playnext(){
if(currslid==6){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function playit(){
slidint = setTimeout(playnext,2500);
}
function stopit(){
clearTimeout(slidint);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload = function(){
playit();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function playit01(){
document.getElementById("playStop").className = "stop";
playit();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function stopit01(){
document.getElementById("playStop").className = "play";
stopit();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>
<style type="text/css">
<!--
BODY {FONT: 12px "宋体"; COLOR: #000;}
A:hover {COLOR: #000; TEXT-DECORATION: underline}
A {COLOR: #454545; TEXT-DECORATION: none}
.div_wuming_ren {BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 617px; POSITION: relative; HEIGHT: 267px}
.div_jimg {MARGIN: 0px; WIDTH: 405px; HEIGHT: 267px}
.div_jimg #a_jimg {DISPLAY: block; WIDTH: 405px; HEIGHT: 267px}
.div_jimg #bigimg {BORDER-RIGHT: #fd8383 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fd8383 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #fd8383 1px solid; WIDTH: 403px; PADDING-TOP: 0px; BORDER-BOTTOM: #fd8383 1px solid; HEIGHT: 265px}
.div_jimg .ul_jimg {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; RIGHT: 0px; BACKGROUND: url(/img/20240423_www_wuming_ren_34.jpg) repeat-y right top; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 225px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 0px; HEIGHT: 267px}
.div_jimg .ul_jimg LI {DISPLAY: inline; FLOAT: right; OVERFLOW: hidden; WIDTH: 212px; CURSOR: pointer; WORD-BREAK: break-all; TEXT-INDENT: 30px; PADDING-TOP: 14px; WHITE-SPACE: nowrap; HEIGHT: 24px; TEXT-OVERFLOW: ellipsis}
.div_jimg .ul_jimg A {POSITION: relative}
.div_jimg .ul_jimg .on {background-image:url(/img/20240423_www_wuming_ren_35.png)!important;background-image:url(/img/20240423_www_wuming_ren_35.png);BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/20240423_www_wuming_ren_35.png',sizingMethod='scale'); WIDTH: 225px; COLOR: #fff; TEXT-INDENT: 43px; POSITION: static}
.div_jimg .ul_jimg .on A {FONT-WEIGHT: bold; COLOR: #fff}
-->
</style>
</head>
<BODY>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<br><br>
<TABLE id=pictable style="DISPLAY: none">
  <TBODY>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_36.jpg" border=0></TD>
    <TD>郭富城拒娶进门 熊黛林扫便宜货</TD>
    <TD>https://www.wuming.ren/</TD></TR>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_37.jpg" border=0></TD>
    <TD>明星身价随票房涨 赵薇升最快</TD>
    <TD>https://www.wuming.ren/</TD></TR>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_38.jpg" border=0></TD>
    <TD>张柏芝倚窗见光捧腹逃</TD>
    <TD>https://www.wuming.ren/</TD></TR>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_39.jpg" border=0></TD>
    <TD>芙蓉姐姐妖艳登场</TD>
    <TD>https://www.wuming.ren/</TD></TR>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_40.jpg" border=0></TD>
    <TD>老公新戏上映 李湘产后首次亮相</TD>
    <TD>https://www.wuming.ren/</TD></TR>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_41.jpg" border=0></TD>
    <TD>徐子淇探艾滋孤儿 打水烧柴憋尿</TD>
    <TD>https://www.wuming.ren/</TD></TR>
  <TR>
    <TD><IMG src="/img/20240423_www_wuming_ren_42.jpg" border=0></TD>
    <TD>精明港姐徐淑敏出嫁秘定3大条件</TD>
    <TD>https://www.wuming.ren/</TD></TR></TBODY></TABLE>
<DIV class=div_wuming_ren>
<SCRIPT language=javascript type=text/javascript>
<!--
var picarry = {};
var lnkarry = {};
var ttlarry = {};
  function FixCode(str){
    return str.replace("'","=");
  }//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
  var t=document.getElementById("pictable");
  var rl=t.rows.length;
  var baseu=  document.URL.replace(/(http.*\/)(.*)/, "$1"); 
  if(baseu.indexOf("/servlet/")>=0)
  baseu = baseu.replace("/servlet/","/");
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
  var txt="";
  for(var i=0;i<rl;i++){
    try{
        picarry[i]=t.rows[i].cells[0].childNodes[0].src;
        lnkarry[i]=t.rows[i].cells[2].innerHTML;
        ttlarry[i]=FixCode(t.rows[i].cells[1].innerHTML);
        document.getElementById("li_jimg"+i).innerHTML = '<a href="'+lnkarry[id]+'" target="_blank" class="img"><img src="'+picarry[id]+'" alt=""><\/a>';
        alert(picarry[i]);
    }catch(e){
        
    }
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)     
    document.write("<div class='div_jimg\'><a class='a_jimg' id='a_jimg' href='"+lnkarry[0]+"' title='' style='background:url("+picarry[1]+")' target='_blank'><img id='bigimg' style='filter:RevealTrans (duration='1',transition='23'); visibility:visible;' alt='' src='"+picarry[0]+"'><\/a><ul class='ul_jimg'><li class='li_jimg on' id='li_jimg0' onmouseover='setfoc(0)' onmouseout='playit()'><a href='"+lnkarry[0]+"' target='_blank' class='img'>"+ttlarry[0]+"<\/a><\/li><li class='li_jimg' id='li_jimg1' onmouseover='setfoc(1)' onmouseout='playit()'><a href='"+lnkarry[1]+"' target='_blank' class='img'>"+ttlarry[1]+"<\/a><\/li><li class='li_jimg' id='li_jimg2' onmouseover='setfoc(2)' onmouseout='playit()'><a href='"+lnkarry[2]+"' target='_blank' class='img'>"+ttlarry[2]+"<\/a><\/li><li class='li_jimg' id='li_jimg3' onmouseover='setfoc(3)' onmouseout='playit()'><a href='"+lnkarry[3]+"' target='_blank' class='img'>"+ttlarry[3]+"<\/a><\/li><li class='li_jimg' id='li_jimg4' onmouseover='setfoc(4)' onmouseout='playit()'><a href='"+lnkarry[4]+"' target='_blank' class='img'>"+ttlarry[4]+"<\/a><\/li><li class='li_jimg' id='li_jimg5' onmouseover='setfoc(5)' onmouseout='playit()'><a href='"+lnkarry[5]+"' target='_blank' class='img'>"+ttlarry[5]+"<\/a><\/li><li class='li_jimg' id='li_jimg6' onmouseover='setfoc(6)' onmouseout='playit()'><a href='"+lnkarry[6]+"' target='_blank' class='img'>"+ttlarry[6]+"<\/a><\/li><\/ul><\/div>");
-->
</SCRIPT>
</DIV>
</DIV>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/812.html

定时图片切换
回帖

娱乐站常用七屏js焦点图定时切换特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息