简单的轮播图

js 部分

/**
*
* 首页幻灯
* Mandy
*/

$(function() {
if($("#focus ul li").length>1){
bannerAct("focus",5000);
}
if($("#focus2 ul li").length>0){
$(".rightActBanner").fadeIn(2000);
if($("#focus2 ul li").length>1){
bannerAct("focus2",4000);
$(".rightActBanner").fadeIn(2000);
}
}
});
function bannerAct(bannerId,actTime){
var sWidth = $("#"+bannerId).width(); //获取焦点图的宽度（显示面积）
var len = $("#"+bannerId+" ul li").length; //获取焦点图个数
var index = 0;
var picTimer ="";

//以下代码添加数字按钮和按钮后的半透明长条
var btn = "<div class='btnBg'></div><div class='btn'>";
for (var i = 0; i < len; i++) {
//btn += "<span>" + (i + 1) + "</span>";
btn += "<span></span>";
}
btn += "</div>";
$("#"+bannerId).append(btn);
$("#"+bannerId+" .btn").css("opacity", 0.7);
$("#"+bannerId+" .btnBg").css("opacity", 0.5);

//为数字按钮添加鼠标滑入事件，以显示相应的内容
$("#"+bannerId+" .btn span").mouseenter(function() {
index = $("#"+bannerId+" .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#"+bannerId+" ul").css("width", sWidth * (len + 1));

//鼠标滑入某li中的某div里，调整其同辈div元素的透明度，由于li的背景为黑色，所以会有变暗的效果
$("#"+bannerId+" ul li div").hover(function() {
$(this).siblings().css("opacity", 0.7);
}, function() {
$("#"+bannerId+" ul li div").css("opacity", 1);
});

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#"+bannerId).hover(function() {
clearInterval(picTimer);
}, function() {
picTimer = setInterval(function() {
if (index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
showFirPic();
index = 0;
} else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
showPics(index);
}
index++;
}, actTime); //此数字参数代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");

//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
$("#"+bannerId+" ul").stop(true, false).animate({ "left": nowLeft }, 500); //通过animate()调整ul元素滚动到计算出的position
$("#"+bannerId+" .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
}

function showFirPic() { //最后一张图自动切换到第一张图时专用
$("#"+bannerId+" ul").append($("#"+bannerId+" ul li:first").clone());
var nowLeft = -len * sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
$("#"+bannerId+" ul").stop(true, false).animate({ "left": nowLeft }, 500, function() {
//通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
$("#"+bannerId+" ul").css("left", "0");
$("#"+bannerId+" ul li:last").remove();
});
$("#"+bannerId+" .btn span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
}
}

 

 

css部分

#focus {
width:1200px;
height:460px;
overflow:hidden;
position:relative;
z-index:10
}
#focus ul {
height:460px;
position:absolute
}
#focus ul li {
width:1200px;
height:460px;
float:left;
overflow:hidden;
position:relative
}
#focus ul li div {
position:absolute;
overflow:hidden
}
#focus .btn {
position:absolute;
width:auto;
bottom:30px;
right:1%
}
#focus .btn span {
text-align:center;
list-style-type:none;
margin-right:15px;
width:12px;
height:12px;
font-family:Arial;
float:left;
color:#fff;
font-size:15px;
cursor:pointer;
border-radius:12px;
background-color:#fff
}
#focus .btn span.on {
background-color:#ff0
}
#focus .btnBg {
position:absolute;
width:980px;
height:38px;
left:0;
bottom:0;
background:0
}

 

html部分

<div id="focus">
<ul>
<li><a href="http://" target="_blank"> <img src="${image_url}${p.image}" /></a></li>

<li><a href="http://" target="_blank"> <img src="${image_url}${p.image}" /></a></li>

<li><a href="http://" target="_blank"> <img src="${image_url}${p.image}" /></a></li>
</ul>
</div>