jquery图片轮番显示_图片自动播放器_左右切换焦点图_幻灯片
jquery图片轮番显示实现，使用jquery做焦点图，自动切换图片显示，类似幻灯片
效果图:
实例代码如下（需要引入jquery-1.9.1.min.js文件）
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左右切换的jQuery焦点图插件演示</title>
<link href="css/common.css" type="text/css" rel="stylesheet">
<link href="css/BigSlide.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/BigSlide.js" type="text/javascript"></script>
</head>
<body>
<div id="Big_Slide_box">
<div id="Big_Slide">
<ul>
<li style=" background:#E81216;" id="Big_Slide_0"><img src="images/banner03.jpg"></li>
<li style=" background:#000000;" id="Big_Slide_1"><img src="images/banner02.jpg"></li>
<li style=" background:#4144D7;" id="Big_Slide_2"><img src="images/banner01.jpg"></li>
</ul>
<a id="Big_Slide_Last"></a>
<a id="Big_Slide_Next"></a>
<div id="Big_Slide_Tab"></div>
<div id="prevL" class="prev" ></div>
<div id="prevR" class="prev" ></div>
</div>
</div>
</body>
</html>
js代码：
$(function(){
var Big_Slide_boxWidth=$("#Big_Slide").width();//获取幻灯片外部div宽度
var Big_Slide_boxHeight=$("#Big_Slide").height();//获取幻灯片外部div高度
var Big_Slide_LiWidth=$("#Big_Slide").children("ul").children("li").eq(0).width();//获取幻灯片Li的宽度
var Big_Slide_liNubr=$("#Big_Slide").find('li').length;//获取幻灯片Li的数量
var Big_Slide_Speed=8000;//滚动速度
var Big_Slide_Tab_Contne="";//初始化tab按钮
var Big_Slide_Last_NextHeight=$("#Big_Slide_Last").height();//获取按钮高度
//tab 条宽度
var Big_Slide_Tab_AWidth=(1/Big_Slide_liNubr)*100;
var Big_Slide_TabWidth=$("#Big_Slide_Tab").width();//tab的宽度
var Big_SlideWidth=$("#Big_Slide").width();//Big_Slide的宽度
$("#Big_Slide_Tab").css("left",(Big_SlideWidth-Big_Slide_TabWidth)*0.5);//Big_Slide_Tab定位
$("#Big_Slide_Last").css("top",(Big_Slide_boxHeight-Big_Slide_Last_NextHeight)*0.5);
$("#Big_Slide_Next").css("top",(Big_Slide_boxHeight-Big_Slide_Last_NextHeight)*0.5);
$("#prevL").css("left",-Big_Slide_LiWidth);
$("#prevR").css("right",-Big_Slide_LiWidth);
for(var i=0;i<parseInt(Big_Slide_liNubr);i++){
$("#Big_Slide").children("ul").children("li").eq(i).css("left",(i-1)*Big_Slide_LiWidth);//初始化Li位置
if(i==1){
Big_Slide_Tab_Contne=Big_Slide_Tab_Contne+"<a class='"+"TabOn' id='"+"TabOn"+i+"' style='width:"+Big_Slide_Tab_AWidth+"%'></a>";
}else{
Big_Slide_Tab_Contne=Big_Slide_Tab_Contne+"<a id='TabOn"+i+"' style='width:"+Big_Slide_Tab_AWidth+"%'></a>";//生成tab按钮
}
}
$("#Big_Slide_Tab").html(Big_Slide_Tab_Contne);//写入tab按钮
var Slide_Run = setInterval(Slide_Next,Big_Slide_Speed)//设置滚动器
function Slide_Next(){
for(var k=0;k<parseInt(Big_Slide_liNubr);k++){
if(parseInt($("#Big_Slide").children("ul").children("li").eq(k).css("left"))==-Big_Slide_LiWidth)//判断LI是否有位移到0，防止同时多次点击出错
{
var Big_Slide_liSeat=0;//位置参数归零
for(var j=0;j<parseInt(Big_Slide_liNubr);j++){
if(parseInt($("#Big_Slide").children("ul").children("li").eq(j).css("left"))==-Big_Slide_LiWidth){//判断是否第一个
$("#Big_Slide").children("ul").children("li").eq(j).css("left",Big_Slide_LiWidth*(Big_Slide_liNubr-2));//第一个回到最后一个
}else{
Big_Slide_liSeat=parseInt($("#Big_Slide").children("ul").children("li").eq(j).css("left"))-Big_Slide_LiWidth;//获取位移位置
$("#Big_Slide").children("ul").children("li").eq(j).animate({left:Big_Slide_liSeat},"slow");//进行位移动画
}
}
}
}
}
function Slide_Last(){
for(var k=0;k<parseInt(Big_Slide_liNubr);k++){
if(parseInt($("#Big_Slide").children("ul").children("li").eq(k).css("left"))==0)//判断LI是否有位移到0，防止同时多次点击出错
{
var Big_Slide_liSeat=0;//位置参数归零
for(var j=0;j<parseInt(Big_Slide_liNubr);j++){
if(parseInt($("#Big_Slide").children("ul").children("li").eq(j).css("left"))==Big_Slide_LiWidth*(Big_Slide_liNubr-2)){//判断是否第一个
$("#Big_Slide").children("ul").children("li").eq(j).css("left",-Big_Slide_LiWidth);//第一个回到最后一个
}else{
Big_Slide_liSeat=parseInt($("#Big_Slide").children("ul").children("li").eq(j).css("left"))+Big_Slide_LiWidth;//获取位移位置
$("#Big_Slide").children("ul").children("li").eq(j).animate({left:Big_Slide_liSeat},"slow");//进行位移动画
}
}
}
}
}
setInterval(function(){
for(var n=0;n<parseInt(Big_Slide_liNubr);n++){
if(parseInt($("#Big_Slide").children("ul").children("li").eq(n).css("left"))==0){
if((n-1)<0){
$("#TabOn"+(Big_Slide_liNubr-1)).removeClass("TabOn");
$("#TabOn"+(n+1)).removeClass("TabOn");
$("#TabOn"+n).addClass("TabOn");
}else {
$("#TabOn0").removeClass("TabOn");
$("#TabOn"+(n-1)).removeClass("TabOn");
$("#TabOn"+(n+1)).removeClass("TabOn");
$("#TabOn"+n).addClass("TabOn");
}
}
}
},1)
$("#Big_Slide_Next").click(Slide_Next);//下一张按钮
$("#Big_Slide_Last").click(Slide_Last);//上一张按钮
$("#Big_Slide_box").mouseenter(function(){clearInterval(Slide_Run)});//鼠标在幻灯片上，停止滚动
$("#Big_Slide_box").mouseleave(function(){Slide_Run = setInterval(Slide_Next,Big_Slide_Speed)})//鼠标不在幻灯哦上，开始滚动
})
来源：//作者：/更新时间：2015-05-13
顶
踩
相关文章：
