2个回答
展开全部
<!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=utf-8" />
<title>图片轮播，选项卡，图片幻灯片效果</title>
<style type="text/css">
body{padding:0;margin:0;}
h1{margin:0;}
.box{position:relative;width:1000px;margin:10px auto;}
.cont{height:500px;overflow:hidden;}
.item{background:rgba(0,0,0,0.5);color:#fff;font-size:120px;position:absolute;left:0;bottom:0;width:100%;text-align:right;line-height:80px;height:80px;}
.item a{margin-right:10px;cursor:pointer;text-shadow:0 0 3px rgba(0,0,0,0.8);}
a.seld{color:#06C;}
a.hide{display:none;}
</style>
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var n = 0;
$(document).ready(function(){
count=$(".cont a").length;//显示区域的内容长度
$(".item a").click(function(){
$(this).addClass("seld").siblings().removeClass("seld");
var _index=$(this).index();//分屏的数字索引
$(".cont>a").eq(_index).fadeIn(300).siblings().fadeOut(300);
});
t = setInterval("showAuto()", 2000);//执行定义好的函数
$(".box").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});/*当鼠标划向图片时终止定时器，离开时再调用定时器*/
})
function showAuto()
{
n = n >=(count - 1)?0: ++n;
$(".item a").eq(n).trigger('click');
}
</script>
</head>
<body>、
<h1>图片轮播效果简单实现</h1>
<div class="box">
<div class="cont">
<a><img src="/jscss/demoimg/201210/201172320545.jpg" /></a>
<a class="hide"><img src="/jscss/demoimg/201210/200711717301151.jpg" /></a>
<a class="hide"><img src="/jscss/demoimg/201210/28_8904_66a3b12f7b96272.jpg" /></a>
<a class="hide"><img src="/jscss/demoimg/201210/200879153333156.jpg" /></a>
</div>
<div class="item">
<a class="seld">·</a>
<a>·</a>
<a>·</a>
<a>·</a>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播，选项卡，图片幻灯片效果</title>
<style type="text/css">
body{padding:0;margin:0;}
h1{margin:0;}
.box{position:relative;width:1000px;margin:10px auto;}
.cont{height:500px;overflow:hidden;}
.item{background:rgba(0,0,0,0.5);color:#fff;font-size:120px;position:absolute;left:0;bottom:0;width:100%;text-align:right;line-height:80px;height:80px;}
.item a{margin-right:10px;cursor:pointer;text-shadow:0 0 3px rgba(0,0,0,0.8);}
a.seld{color:#06C;}
a.hide{display:none;}
</style>
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var n = 0;
$(document).ready(function(){
count=$(".cont a").length;//显示区域的内容长度
$(".item a").click(function(){
$(this).addClass("seld").siblings().removeClass("seld");
var _index=$(this).index();//分屏的数字索引
$(".cont>a").eq(_index).fadeIn(300).siblings().fadeOut(300);
});
t = setInterval("showAuto()", 2000);//执行定义好的函数
$(".box").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});/*当鼠标划向图片时终止定时器，离开时再调用定时器*/
})
function showAuto()
{
n = n >=(count - 1)?0: ++n;
$(".item a").eq(n).trigger('click');
}
</script>
</head>
<body>、
<h1>图片轮播效果简单实现</h1>
<div class="box">
<div class="cont">
<a><img src="/jscss/demoimg/201210/201172320545.jpg" /></a>
<a class="hide"><img src="/jscss/demoimg/201210/200711717301151.jpg" /></a>
<a class="hide"><img src="/jscss/demoimg/201210/28_8904_66a3b12f7b96272.jpg" /></a>
<a class="hide"><img src="/jscss/demoimg/201210/200879153333156.jpg" /></a>
</div>
<div class="item">
<a class="seld">·</a>
<a>·</a>
<a>·</a>
<a>·</a>
</div>
</div>
</body>
</html>
参考资料： 源码爱好者：http://www.codefans.net/jscss/code/3773.shtml
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
