jq的无限轮播

最新推荐文章于 2020-11-29 03:28:02 发布

沫熙瑾年

最新推荐文章于 2020-11-29 03:28:02 发布

阅读量305

点赞数

分类专栏： jquery 文章标签： jquery的无缝轮播 jquery如何实现无缝轮播

本文链接：https://blog.csdn.net/xy19950125/article/details/81007332

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<style type="text/css">
	*{
	margin: 0;padding: 0;
	}
	#box{
	width:300px;height:200px;margin:0 auto;
	position: relative;overflow: hidden;
	}
	.list{
	height:200px;position: absolute;
	}
	.list li{
	width:300px;height:200px;list-style: none;
	float: left;
	}

	.list li img{
	display: block;
	height: 200px;
	width: 300px;

	}
	.btn div{
	width:50px;height:50px;
	position: absolute;
	display: none;
	}
	.btn_l{
	left:0;top:50%;
	background: url(img/left_1122.png) no-repeat center;
	margin-top: -25px;
	}
	.btn_r{
	right:0;top:50%;
	background: url(img/right_1122.png) no-repeat center;
	margin-top: -25px;
	}
	.small{
	position: absolute;right:10px;bottom:10px;
	}
	.small li{
	width:20px;height:20px;background: #CECECE;
	text-align: center;line-height: 20px;list-style: none;
	float: left;margin: 0 5px;border-radius: 50%;
	}
	.small .hover{
	background: red;
	}
	</style>
	</head>
	<body>
	<div id="box">
	<ul class="list">
	<li><img src="img/2.jpg"/></li>
	<li><img src="img/3.jpg"/></li>
	<li><img src="img/1.jpg"/></li>
	<li><img src="img/4.jpg"/></li>
	<li><img src="img/2.jpg"/></li>
	</ul>

	<div class="btn">
	<div class="btn_l"></div>
	<div class="btn_r"></div>
	</div>

	<ul class="small">
	<li class="hover">1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	</ul>
	</div>
	<script type="text/javascript">
	var _left=$(".list li").eq(0).width();
	var leng=$(".list li").length;
	$(".list").width(_left*leng)
	var num=0;
	var timer=null;
	timer=setInterval(function(){
	move()
	},2000)
	//方便下次再次使用
	function move(){
	num++;
	if(num==leng){
	// $(".list").css("left",0)
	$(".list").animate({left:0},0)
	num=1;
	}
	//按钮的判断
	if(num==-1){
	$(".list").animate({left:-_left*(leng-1)},0)
	// $(".list").css("left",-_left*(leng-1))
	num=leng-2;
	}
	//下方背景颜色
	if(num==leng-1){
	$(".small li").eq(0).addClass("hover").siblings().removeClass("hover")
	}else{
	$(".small li").eq(num).addClass("hover").siblings().removeClass("hover")
	}


	$(".list").stop().animate({left:-_left*num});
	}
	//左右按钮点击事件
	$(".btn_r").click(function(){
	move();
	})
	$(".btn_l").click(function(){
	num=num-2;
	move();
	})
	//下面小方块事件
	$(".small li").mouseover(function(){
	num=$(this).index()-1;
	move();
	})


	//移入移除事件
	$("#box").mouseenter(function(){
	console.log("aaaa")
	clearInterval(timer)
	$(".btn_l").css({"display":"block"});
	$(".btn_r").css({"display":"block"});
	});
	$("#box").mouseleave(function(){
	timer=setInterval(function(){
	move()
	},2000)
	$(".btn_l").css({"display":"none"});
	$(".btn_r").css({"display":"none"});

	})


	</script>
	</body>
	</html>

沫熙瑾年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq的无限轮播

&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.js"&gt;&lt;/script&gt; &lt;
复制链接

扫一扫