有一个层 id为myDiv 有三张小图片 有三张大图片
谁能给我一个js代码 传入这四个参数 然后让图片轮流显示 每三秒钟切换一次
鼠标 停留在小图片上 就会显示相应的小图片
谁能帮帮我 千恩万谢 跪求中…………
谁能给我一个js代码 传入这四个参数 然后让图片轮流显示 每三秒钟切换一次
鼠标 停留在小图片上 就会显示相应的小图片
谁能帮帮我 千恩万谢 跪求中…………
解决方案 »
- 继续求教yixianggao 依然是关于Popup的问题
- 请教怎样在frame中打开文件
- 求一个特效,鼠标拖放
- e.client事件与滚动条滚动
- 高分求助简单问题
- 这个论坛支持JS吗?
- excel进程怎么老是杀不掉啊??高手进来!!!!!!!
- 我想在网页中,按了esc键后自动执行操作,比如关闭窗体,怎么做?
- 在JS中,一段中英文混着的字符串,想保留英文空格和标点,去掉中文空格保留标点,正则咋写?谢谢,祝各位新年快乐,心想事成。
- 求助贴:如何利用Jquery根据)$('.class').text()改变text内容
- ##$$$看这个js操作dom问题
- 单击浏览器的刷新按钮为什么不触发window.location.reload呢?
<div id="myDiv" style="position:absolute;width:100px;height:100px;left:100px;top:100px;">
<image id=showImg title="" style="width:100%;height:100px;"></image>
</div>
<SCRIPT LANGUAGE="JavaScript">
var data=["img1.gif","img2.gif","img3.gif"];
var img=document.getElementById("showImg");
img.onmouseover=function(){
clearInterval(timer);
this.style.width="150%";
this.style.height="150%";
}
img.onmouseout =function(){
this.style.width="100%";
this.style.height="100%";
timer=setInterval(function(){
img.src=data[++i>2?(i=0):i];
img.title=data[i];
},3000);
}
var i=0;
var timer=setInterval(function(){
img.src=data[++i>2?(i=0):i];
img.title=data[i];
},3000);
</script>
基本思路:
1: 将需要切换的图片放到一个数组里面
2: 调用filters效果
3: 用setTimeout()来间隔显示
<title></title>
<link type="text/css" rel="Stylesheet" href="css.css" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var currentIndex = 0;
var DEMO; //函数对象
var currentID = 0; //取得鼠标下方的对象ID
var pictureID = 0; //索引ID
$("#ifocus_piclist li").eq(0).show(); //默认
autoScroll();
$("#ifocus_btn li").hover(function() {
StopScrolll();
$("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式
$(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式
currentID = $(this).attr("id"); //取当前元素的ID
pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
$("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
$("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
$("#ifocus_tx li").hide();
$("#ifocus_tx li").eq(pictureID).show(); }, function() {
//当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
currentID = $(this).attr("id"); //取当前元素的ID
pictureID = currentID.substring(currentID.length - 1); //取最后一个字符
currentIndex = pictureID;
autoScroll();
});
//自动滚动
function autoScroll() {
$("#ifocus_btn li:last").removeClass("current");
$("#ifocus_tx li:last").hide();
$("#ifocus_btn li").eq(currentIndex).addClass("current");
$("#ifocus_btn li").eq(currentIndex - 1).removeClass("current");
$("#ifocus_tx li").eq(currentIndex).show();
$("#ifocus_tx li").eq(currentIndex - 1).hide();
$("#ifocus_piclist li").eq(currentIndex).fadeIn("slow");
$("#ifocus_piclist li").eq(currentIndex - 1).hide();
currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex;
DEMO = setTimeout(autoScroll, 2000);
}
function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动
{
clearTimeout(DEMO);
}
});
</script></head>
<body><hr />
<div id="confirm"></div>
<!-- 区块一开始 -->
<div class="content1">
<div class="top"></div>
<div class="main cl">
<!-- FLASH切换图开始 -->
<div class="l_flash_pic">
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left:0; top:0;">
<ul>
<li><a target="_blank"><img src="images/center.jpg" /></a></li>
<li><a target="_blank"><img src="images/02.jpg" /></a></li>
<li><a target="_blank"><img src="images/03.jpg" /></a></li>
<li><a target="_blank"><img src="images/04.jpg" /></a></li>
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul>
<li class="current">图片一</li>
<li class="normal">图片二</li>
<li class="normal">图片三</li>
<li class="normal">图片四</li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="current" id="p0"><img src="images/center.jpg" alt="" /></li>
<li id="p1"><img src="images/btn_02.jpg" alt="" /></li>
<li id="p2"><img src="images/btn_03.jpg" alt="" /></li>
<li id="p3"><img src="images/btn_04.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>
<!-- FLASH切换图结束 -->
</div>
</div>
<!-- 区块一结束 -->
</body>
</html>
css.css
body {text-align: center;margin:0;padding:0;background: #FFF;font-size:12px;color:#353535;font-family: "宋体";}
div,form,img,ul,ol,li,dl,dt,dd,label {margin: 0; padding: 0; border: 0;}
table,td,tr,th{font-size:12px;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
img{border:0;}
li{list-style-type:none;}/*-------------------------------------------------------*//*****首页FLASH图片切换*****/
#ifocus { width:689px; height:244px;border:1px solid #DEDEDE; background:#F8F8F8;}
#ifocus_pic { display:inline; position:relative;float:left;width:570px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:570px; height:225px; overflow:hidden; display:none}
#ifocus_piclist img { width:570px; height:225px;}
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0;}
#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
#ifocus_btn .current { background: url(images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:570px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
#ifocus_tx .normal { display:none; }
<head>
<style type = "text/css">
.a{
width:500px;
height:200px;
border:1px solid;
padding-left:10px;;
padding-top:10px;
}
a{
text-decoration:none;
width:20px;
height:10px;
background-color:orange;
text-align:center
}
</style>
<script language = "javascript">
var num1 = 1;
var num2 = 5;
var timer ;
function Init(d){ if(Number(d)){//如果触动计时器
clearTimeout(timer);
num1 = d;//当前图片显示
}
for(var i =1;i<num2+1;i++){
if(i == num1){
document.getElementById(num1).style.display = "block";//下一张图片显示
document.getElementById("1"+ num1).style.backgroundColor = "blue";
}else{
document.getElementById(i).style.display = "none";//当前图片隐藏
document.getElementById("1"+i).style.backgroundColor = "";
}
}
if(num1 == num2)
num1 = 1;
else
num1++;
timer = setTimeout("Init()",1000)
} </script>
</head>
<body onload = "Init()">
<div class = "a">
<div>
<img src = "topic/image/class1-1.jpg" id = "1">
<img src = "topic/image/class1-2.jpg" style = "display:none" id = "2">
<img src = "topic/image/class1-3.jpg" style = "display:none" id = "3">
<img src = "topic/image/class1-4.jpg" style = "display:none" id = "4">
<img src = "topic/image/class1-5.jpg" style = "display:none" id = "5">
</div>
<div>
<a href = "#" id = "11" onClick = "Init(1)">1</a>
<a href = "#" id = "12" onClick = "Init(2)">2</a>
<a href = "#" id = "13" onClick = "Init(3)">3</a>
<a href = "#" id = "14" onClick = "Init(4)">4</a>
<a href = "#" id = "15" onClick = "Init(5)">5</a>
</div>
</div>
</body>
</html>
这上面拔下来就可以 或者你联系我 我这里有源码 我用过的很好用