本节内容：
jquery 焦点新闻图片轮播
完整代码：
<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>图片轮播，新闻轮播，焦点新闻轮播-脚本学堂 </title>
<base target="_blank" />
<script type="text/javascript" src="http://jb200.com/jbxue/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var index = 0;
var slideFlag = true;
var length = $(".roll-news-image img").length;
function showImg(i) {
$(".roll-news-image img")
.eq(i).stop(true, true).fadeIn(800)
.siblings("img").hide();
$(".roll-news-index li").removeClass("roll-news-index-hover");
$(".roll-news-index li").eq(i).addClass("roll-news-index-hover");
$(".roll-news-title a")
.eq(i).stop(true, true).fadeIn(800)
.siblings("a").hide();
}
showImg(index);
$(".roll-news-index li").click(function () {
index = $(".roll-news-index li").index(this);
showImg(index);
slideFlag = false;
});
function autoSlide() {
setInterval(function () {
if (slideFlag) {
showImg((index + 1) % length);
index = (index + 1) % length;
}
slideFlag = true;
}, 3000);
}
autoSlide();
});
</script>
<style type="text/css">
* {
padding:0px;
margin:0px;
}
.roll-news-jbxue-com {
width:480px;
height:300px;
border:solid 1px #c1c1c1;
}
.roll-news-index-hover {
background-color:white;
}
.roll-news-image img {
width:480px;
height:300px;
}
.roll-news-index {
position:relative;
top:-50px;
margin-right:5px;
float:right;
}
.roll-news-index {
}
.roll-news-index li {
list-style:none;
float:left;
font-size:12px;
font-weight:600;
width:18px;
height:16px;
line-height:16px;
cursor:pointer;
margin:0 3px;
background-image:url(opacity_50.png);
text-align:center;
}
.roll-news-title {
position:relative;
top:-25px;
padding-left:10px;
height:22px;
line-height:20px;
background:url(opacity_50.png);
}
.roll-news-title a {
font-size:12px;
text-decoration:none;
color:white;
background-color:gray
}
.roll-news-title a:hover {
color:red;
}
</style>
</head>
<body>
<div style="width:500px;margin:0px auto;">
<h2>图片轮播-脚本学堂</h2>
<div class="roll-news-jbxue-com">
<div class="roll-news-image">
<img src="http://down.jb200.com/images/bing/2013-8-10_Toulouse_ZH-CN7808794431_jbxue.jpg">
<img src="http://down.jb200.com/images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_jbxue.jpg" style="display:none">
<img src="http://down.jb200.com/images/bing/2013-8-22_KataleKhorCave_ZH-CN6707191757_jbxue.jpg" style="display:none">
</div>
<div class="roll-news-index">
<ul>
<li class="roll-news-index-hover">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="roll-news-title">
<a href="http://jb200.com/a/bjac/s3sw6q5t.htm">图片轮播切换汇总</a>
<a href="http://jb200.com/a/bjac/xkqqoac2.htm" style="display:none">柯乐义选美大赛</a>
<a href="http://jb200.com/a/bjac/600xsi0s.htm" style="display:none">俄罗斯方块游戏</a>
</div>
</div><a href="http://jb200.com/a/bjac/0ttmf3ib.htm">原文</a></div>
</body>
</html>