问一个小白有关问题，图中网页的图片切换效果是如何做出来的
日期：2014-05-17 浏览次数：20753 次
问一个小白问题，图中网页的图片切换效果是怎么做出来的
问一下下图中这种图片切换的效果是用什么做出来的，鼠标用到下标123的时候也可以切换，要怎么做出来，本人大学生，要帮社团做一下网站，想做一个下图的效果却不知道怎么做，求前辈们教一下
------解决方案--------------------
这个是应用jquery效果，我自己都经常用到，代码简单，方便使用！
里面用到了 jquery1.3.2.js 这个库，你自己在论坛上或者百度下一个，保存一个目录下，把这段 html保存在同一个目录，再放3张图片，都是jpg的，你自己打开始看一下html就明白了，
问一下下图中这种图片切换的效果是用什么做出来的，鼠标用到下标123的时候也可以切换，要怎么做出来，本人大学生，要帮社团做一下网站，想做一个下图的效果却不知道怎么做，求前辈们教一下
图片
------解决方案--------------------
<!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>
<title>jQuery常用焦点图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,ul,li{
font-size:12px; margin:0px; padding:0px;
}
ul,li{
list-style-type:none;
}
a{
color:#000; text-decoration:none;
}
.demo{
width:450px; height:200px; position:relative; margin:auto; border:#ddd 1px solid;padding:5px; overflow:hidden;
}
.demo ul{
position:relative; z-index:5;
}
.demo ul li{
position:absolute; display:none;
}
.num{
position:absolute;right:10px; bottom:10px; z-index:10;
}
.num a{
width:20px; height:20px; line-height:20px; display:inline-block; background-color:#333; text-align:center; margin:0 3px; cursor:pointer; text-decoration:none; color:#fff;
}
.num a.cur{
background:#ff6700;
}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
</head>
<body>
<div class="demo">
<ul>
<li style="display:block;"><a href="#/" target="_blank"><img src="1.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" /></a></li>
<li><a href="#" target="_blank"><img src="3.jpg" /></a></li>
</ul>
<div class="num"><a class="cur">1</a><a>2</a><a>3</a></div>
</div>
<script type="text/javascript">
$(function(){
var sw = 0;
$(".demo .num a").mouseover(function(){
sw = $(".num a").index(this);
myShow(sw);
});
function myShow(i){
$(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur");
$(".demo ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600);
}
//滑入停止动画，滑出开始动画
$(".demo").hover(function(){
if(myTime){
clearInterval(myTime);
}
},function(){
myTime = setInterval(function(){
myShow(sw)
sw++;
if(sw==3){sw=0;}
} , 3000);
});
//自动开始
var myTime = setInterval(function(){
myShow(sw)
sw++;
if(sw==3){sw=0;}
} , 3000);
})
</script>
</body>
</html>
这个是应用jquery效果，我自己都经常用到，代码简单，方便使用！
里面用到了 jquery1.3.2.js 这个库，你自己在论坛上或者百度下一个，保存一个目录下，把这段 html保存在同一个目录，再放3张图片，都是jpg的，你自己打开始看一下html就明白了，
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
