jquery图片轮番显示_图片自动播放器_左右切换焦点图_幻灯片

jquery图片轮番显示实现,使用jquery做焦点图,自动切换图片显示,类似幻灯片

效果图:jquery图片轮番显示_图片自动播放器_左右切换焦点图_幻灯片1

实例代码如下(需要引入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
相关文章