页面轮播效果

最新推荐文章于 2024-04-12 07:49:03 发布

大炮的大炮没有大炮

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量265

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36074180/article/details/71402743

<script type="text/javascript">
	$(function(){
	var index=0;
	var stop=false;
	
	//悬浮小白点
	$(".carousel-indicators li").mouseover(function(){
	stop=true;
	index=$(this).index()+1;
	$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
	$(".item img").attr("src",
					"image/img0"+index+".png").show();
	});
	//悬浮图片不动
	$(".carousel-inner").hover(function(){
	stop=true;
	},function(){
	stop=false;
	});
	//悬停令图片不懂
	$(".carousel-control").mouseover(function(){
	stop=true;
	});
	//图片轮播
       setInterval(function(){
		if(stop){
		return;
		}
		index++;
		if(index>4){
		  index=0;
		}
		
		 
		$(".item img").attr("src",
					"image/img0"+index+".png").show();
		$(".carousel-indicators li").removeClass();
				$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
		
		},1000);
		//左 
		$(".left").click(function(){
		index--;
	
		if(index==0){
		index=$(".carousel-indicators li").length;
		$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
		$(".item img").attr("src",
					"image/img0"+index+".png").show();
		}else{
		
		$(".item img").attr("src",
					"image/img0"+index+".png").show();
					$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
		}
		
		});
		//右
		$(".right").click(function(){
		index++;
	
		if(index==$(".carousel-indicators li").length+1){
          index=1;
		$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
		$(".item img").attr("src",
					"image/img0"+index+".png").show();
		}else{
		
		$(".item img").attr("src",
					"image/img0"+index+".png").show();
					$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
		}
		
		});
		//点击左面的三角
	/* $(".left").click(function(){
	index=$(".carousel-indicators").children("li").attr("data-slide-to");
	
	alert(index);
	$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
	$(".item img").attr("src",
					"image/img0"+(index-1)+".png").show();
	}); */
	//点击右面的三角
	/* $(".right").click(function(){
	index=$(".carousel-indicators li").index()+1;
	$(".carousel-indicators li").eq(index-1).addClass("active").siblings().removeClass();
	$(".item img").attr("src",
					"image/img0"+index+".png").show();
	}); */
	

	
	
	
	
	});
	
	
	</script>