1、调用CSS样式：
<link rel="stylesheet" href="css/style.css" type="text/css" />
2、调用JS插件代码：
<script type="text/javascript" src="js/jquery.js"></script>
3、添加HTML代码：
将
<!--效果html开始-->......
<!--效果html结束-->之间的html和js代码；放在<body></body>之间。
4、JS代码片段：
<script type="text/javascript">
$(function() {
var sWidth = $("#focus").width();
var len = $("#focus 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></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
$("#focus ul").css("width",sWidth * (len));
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000);
}).trigger("mouseleave");
function showPics(index) {
var nowLeft = -index*sWidth;
$("#focus ul").stop(true,false).animate({"left":nowLeft},300);
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
}
});
</script>
