轮播图片简单常用的图片轮播，新闻轮播，焦点新闻轮播
空话就不多说了，开始。。。
简略经常使用的图片轮播，新闻轮播，焦点新闻轮播,空话不说，贴代码，代码简略易懂，非插件，欢迎留言啊，有什么问题可以指出来,效果图如下
<!DOCTYPE html>
<html>
<head>
<title>简略经常使用的图片轮播，新闻轮播，焦点新闻轮播</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var index=0;
var slideFlag = true;
var length=$(".roll_pic img").length;
function showImg(i){
$(".roll_pic a")
.eq(i).stop(true,true).fadeIn(600)
.siblings("a").hide();
$(".roll_num li").removeClass("roll_num_hover");
$(".roll_num li").eq(i).addClass("roll_num_hover");
$(".roll_title a")
.eq(i).stop(true,true).fadeIn(600)
.siblings("a").hide();
}
showImg(index);
$(".roll_num li").click(function(){
index = $(".roll_num 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 {width:480px;height:300px;border:solid 1px #c1c1c1;}
.roll_num li.roll_num_hover {background:#fff;color:red;}
.roll_pic img {width:480px;height:300px;}
.roll_num {position:relative;top:-30px;margin-right:5px;float:right;z-index:10;}
.roll_num li {list-style:none;float:left;font-size:12px;font-weight:600;width:18px;height:18px;line-height:18px;cursor:pointer;margin:0 3px;background:#000;opacity:0.50;text-align:center;color:#fff;-moz-border-radius:8px;border-radius:8px;}
.roll_title {position:relative;top:-35px;padding-left:10px;height:30px;line-height:22px;background:#000;opacity:0.50;}
.roll_title a {font-size:12px;text-decoration:none;color:#fff;}
.roll_title a:hover {color:red;}
</style>
</head>
<body>
<div class="roll">
<div class="roll_pic">
<a href="http://www.875.cn/" target="_blank"><img src="http://pic.875.cn/upload/2013-05-22/1751132091.jpg"></a>
<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-03-26/1504517406.jpg" ></a>
<a href="http://www.875.cn/" style="display:none" target="_blank"><img src="http://pic.875.cn/upload/2013-04-12/1003432197.jpg"></a>
</div>
<div class="roll_num">
<ul>
<li class="roll_num_hover">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="roll_title">
<a href="http://www.875.cn/" target="_blank">图片1的标题</a>
<a href="http://www.875.cn/" target="_blank" style="display:none">图片2的标题</a>
<a href="http://www.875.cn/" target="_blank" style="display:none">图片3的标题</a>
</div>
</div>
</body>
</html>
文章结束给大家分享下程序员的一些笑话语录： 人工智能今天的发展水平：8乘8的国际象棋盘其实是一个体现思维与创意的强大媒介。象棋里蕴含了天文数字般的变化。卡斯帕罗夫指出，国际象棋的合法棋步共有1040。在棋局里每算度八步棋，里面蕴含的变化就已经超过银河系里的繁星总数。而地球上很少有任何数量达到这个级别。在金融危机之前，全世界的财富总和大约是1014人民币，而地球人口只有1010。棋盘上，所有可能的棋局总数达到10120，这超过了宇宙里所有原子的总数！经典语录网
---------------------------------
原创文章 By
轮播和图片
---------------------------------
