之前找了好多banner滚动轮播效果，都感觉代码太多，一个简单的小效果js写了一大堆，我实在不想费那劲在一行行去看跟修改了，于是就简单的整理出了简洁型的滚动轮播，虽然鼠标经过时不会停止，不过我后续会把这个效果加上的！
如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简洁代码实现banner轮播</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.clearfix{overflow:hidden; clear:both; margin: 0; padding: 0;}
.imgbox{width:640px; margin:0 auto; text-align:center; }
.imgbox ul#bannerimg{padding:0px; margin:0px;}
.imgbox ul#bannerimg li{float:left; list-style:none; width: 100%; height: 300px;line-height: 300px; color: white;}
.imgbox ul#bannerimg li.select{display:block;}
.imgnum span{border-radius:50%; font:normal normal 12px 微软雅黑; color:white; margin-left:5px; padding:2px 6px 2px 6px; background-color: orange; cursor:pointer;}
.imgnum span.default{background-color:red;}
.imgnum{text-align:center; float:right; margin:-30px 30px; position:relative;}
</style>
</head>
<body>
<div class="imgbox">
<ul id="bannerimg">
<li style="background: salmon;">这里面没有图所以我用背景颜色代替</li>
<li style="background: orange;">这里面没有图所以我用背景颜色代替</li>
<li style="background: greenyellow;">这里面没有图所以我用背景颜色代替</li>
<li style="background: cyan;">这里面没有图所以我用背景颜色代替</li>
</ul>
<div class="clearfix"></div>
<div class="imgnum">
<span class="default">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<script type="text/javascript">
var win = 1,time = "";
$(function () {
showimg(win); //鼠标移入移出
$(".imgnum span").hover(function () {
clearTimeout(time);
var icon=$(this).text();
$(".imgnum span").removeClass("default").eq(icon-1).addClass("default"); //当图片对应焦点显示时，按钮添加颜色样式
$("#bannerimg li").hide().stop(true,true).eq(icon-1).fadeIn("slow"); //当鼠标指中相应按钮时获取焦点，停止切换焦点图
}, function () {
win=$(this).text()> 3 ? 1 :parseInt($(this).text())+1;
time = setTimeout("showimg(" + win + ")", 2000);
});
});function showimg(num) {
win = num;
$(".imgnum span").removeClass("default").eq(win-1).addClass("default");
$("#bannerimg li").hide().stop(true,true).eq(win-1).fadeIn("slow");
win = win + 1 > 4 ? 1 : win + 1;
time = setTimeout("showimg(" + win + ")", 2000);
}
</script>
</body>
</html>[demo]http://demo.skillcat.cn/jquery/banner-scrolling-one/index.html[/demo]
如果效果出来比较慢，就换成本地引用Jquery文件，li 里面加图片，背景去掉，可以自由修改宽高。
Comments | NOTHING