jquery 图片轮播
<!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>jQuery图片自动切换</title>
<script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script>
<style type="text/css">
*{ margin:0; padding:0; border:0; list-style:none}
img{ display:block; border:0}
body{ padding:50px;}
.switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;}
.switch .pic_box{width:320px; height:255px; position:relative;}
.switch .pic_box li{ width:320px; height:255px; float:left; position:absolute}
.switch .pic_box li .pic{ width:320px; height:255px;}
.switch .pic_box li .pic img{ width:320px; height:230px;}
.switch .pic_box li .txt{ display:block; width:320px; height:25px; font-size:13px; overflow:hidden; line-height:25px; text-align:center; overflow:hidden; color:#666666}
.switch .btn_box{ width:320px; height:25px; float:right; background:#2B2B2B}
.switch .btn_box li{ border:1px solid #333333; width:23px; height:23px; float:left; background:#CCCCCC; cursor:pointer; line-height:25px; overflow:hidden; text-align:center; font-weight:700}
</style>
</head>
<body>
<div class="switch">
<ul class="pic_box">
<li id="pic1"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/1.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">京津渝等28城市获批用公积金建保障房</a></li>
<li id="pic2" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/2.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">俄大火逼近绝密核设施 毒雾笼罩莫斯科</a></li>
<li id="pic3" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/3.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">银监会清查银行3000项收费 叫停点钞费</a></li>
<li id="pic4" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/4.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">鸭绿江干流现超警戒洪水 东北强降雨减弱 </a></li>
<li id="pic5" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/5.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">美国防部确定华盛顿号航母将参加黄海军演</a></li>
</ul>
<ul class="btn_box">
<li style="background:#FF0000">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".btn_box li").css('backgroundColor','#eeeeee');
$(".btn_box li").eq(0).css('backgroundColor','#FF0000');
//获取图片总数
var len = $(".btn_box li").size();
//设置默认显示图片
var index = 1;
$(".btn_box li").click(function(){
index = $(".btn_box li").index(this);
showimg(index);
});
//
$(".btn_box").hover(function(){
if (myTime){
clearInterval(myTime);
}
},function(){
myTime = setInterval(function(){
index++;
if(index>=len){
index=0;
}
showimg(index);
},4000);
});
//自动开始切换
var myTime = setInterval(function(){
showimg(index);
index++;
if (index>=len){
index=0;
}
},4000);
});
//显示图片
function showimg(i){
$(".btn_box li").css('backgroundColor','#eeeeee');
$(".btn_box li").eq(i).css('backgroundColor','#FF0000');
$(".pic_box li").fadeOut(800);
$("#pic"+$(".btn_box li").eq(i).text()).fadeIn(800);
}
</script>
来源www.vihchina.net
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片自动切换</title>
<script language="javascript" src="http://www.vihchina.net/Public/Js/jQuery/jQuery.js"></script>
<style type="text/css">
*{ margin:0; padding:0; border:0; list-style:none}
img{ display:block; border:0}
body{ padding:50px;}
.switch{ width:320px; height:280px; border:1px #CCCCCC solid; padding:3px;}
.switch .pic_box{width:320px; height:255px; position:relative;}
.switch .pic_box li{ width:320px; height:255px; float:left; position:absolute}
.switch .pic_box li .pic{ width:320px; height:255px;}
.switch .pic_box li .pic img{ width:320px; height:230px;}
.switch .pic_box li .txt{ display:block; width:320px; height:25px; font-size:13px; overflow:hidden; line-height:25px; text-align:center; overflow:hidden; color:#666666}
.switch .btn_box{ width:320px; height:25px; float:right; background:#2B2B2B}
.switch .btn_box li{ border:1px solid #333333; width:23px; height:23px; float:left; background:#CCCCCC; cursor:pointer; line-height:25px; overflow:hidden; text-align:center; font-weight:700}
</style>
</head>
<body>
<div class="switch">
<ul class="pic_box">
<li id="pic1"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/1.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">京津渝等28城市获批用公积金建保障房</a></li>
<li id="pic2" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/2.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">俄大火逼近绝密核设施 毒雾笼罩莫斯科</a></li>
<li id="pic3" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/3.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">银监会清查银行3000项收费 叫停点钞费</a></li>
<li id="pic4" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/4.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">鸭绿江干流现超警戒洪水 东北强降雨减弱 </a></li>
<li id="pic5" style="display:none"><a href="http://www.vihchina.net" target="_blank" class="pic"><img src="images/5.jpg" /></a><a href="http://www.vihchina.net" target="_blank" class="txt">美国防部确定华盛顿号航母将参加黄海军演</a></li>
</ul>
<ul class="btn_box">
<li style="background:#FF0000">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".btn_box li").css('backgroundColor','#eeeeee');
$(".btn_box li").eq(0).css('backgroundColor','#FF0000');
//获取图片总数
var len = $(".btn_box li").size();
//设置默认显示图片
var index = 1;
$(".btn_box li").click(function(){
index = $(".btn_box li").index(this);
showimg(index);
});
//
$(".btn_box").hover(function(){
if (myTime){
clearInterval(myTime);
}
},function(){
myTime = setInterval(function(){
index++;
if(index>=len){
index=0;
}
showimg(index);
},4000);
});
//自动开始切换
var myTime = setInterval(function(){
showimg(index);
index++;
if (index>=len){
index=0;
}
},4000);
});
//显示图片
function showimg(i){
$(".btn_box li").css('backgroundColor','#eeeeee');
$(".btn_box li").eq(i).css('backgroundColor','#FF0000');
$(".pic_box li").fadeOut(800);
$("#pic"+$(".btn_box li").eq(i).text()).fadeIn(800);
}
</script>
来源www.vihchina.net
-------此处无银三百两------
