js-基础-简易轮播图

最新推荐文章于 2022-04-06 18:24:31 发布

song-jian

最新推荐文章于 2022-04-06 18:24:31 发布

阅读量574

点赞数

本文链接：https://blog.csdn.net/sjyssn/article/details/82556585

版权

1.jQuery仿京东首页轮播效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style type="text/css">
        	*{
        		margin: 0;
        		padding: 0;
        	}
        	#div1{
        		width: 790px;
        		height: 340px;
        		margin: 100px auto;
        		position: relative;
        	}
        	#div1 ul{
        		list-style: none;
        	}
        	#div1 li{
        		position: absolute;
        		display: none;
        	}
        	#div1 li:first-child{
        		display: block;
        	}
        	#left,#right{
        		position: absolute;
        		background-color: rgba(0,0,0,0.2);
        		color: white;
        	    width: 30px;
        	    height: 60px;
        	    font-size: 36px;
        	    text-align: center;
        	    line-height: 60px;
        	    top: 50%;
        	    margin-top:-30px ;
        	    display: none;
        	    cursor: pointer;
        	}
        	#left{
        		left: 0;
        	}
        	#right{
        		right: 0;
        	}
            #div1:hover span{
            	display: block;
            }
        	#left:hover,#right:hover{
        		background-color: rgba(0,0,0,0.6);
        	}
        	#nav{
        		position: absolute;
        		bottom: 10px;
        		/*left:50%;
        		margin-left:-80px ;*/
        		left: 20px;
        	}
        	#nav i{
        		float: left;
        		margin:0 1px;
        	}
        	#nav .i{
        		width: 18px;
        		height: 18px;
        		position: relative;
        	}
        	#nav .i:after{
        		content: "";
        		display:block;
        		width: 6px;
        		height: 6px;
        		position: absolute;
        		top:4px;
        		left: 4px;
        		border: 2px solid rgba(255,255,255,0.3);
        		border-radius:50%;
        	}
        	#nav .ib{
        		position: relative;
        		box-sizing: border-box;
        		border: 4px solid rgba(255,255,255,0.3);
                border-radius:50%;
        	}
        	#nav .ib:after{
        		content: "";
        		display:block;
        		position: absolute;
        		top: 0;
        		left: 0;
        		box-sizing: border-box;
        		border: 5px solid rgba(255,255,255,1);
        		border-radius:50%;

        	}
        	   
        </style>
	</head>
	<body>
		<div id = "div1">
			<ul>
				<li><a href=""><img src="images/1.jpg"/></a></li>
				<li><a href=""><img src="images/2.jpg"/></a></li>
				<li><a href=""><img src="images/3.jpg"/></a></li>
				<li><a href=""><img src="images/4.jpg"/></a></li>
				<li><a href=""><img src="images/5.jpg"/></a></li>
				<li><a href=""><img src="images/6.jpg"/></a></li>
				<li><a href=""><img src="images/7.jpg"/></a></li>
				<li><a href=""><img src="images/8.jpg"/></a></li>
			</ul>
			<span id="left">&lt;</span>
			<span id="right">&gt;</span>
			<div id="nav">
				<i class="i ib"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
				<i class="i"></i>
			</div>
		</div>
			<script type="text/javascript" src="jquery-1.12.4.js"></script>
			<script type="text/javascript">
				var count = 0;
				var timer = setInterval(showLi, 3000);
				$(function() {
					$("#right").click(function() {
						count++;
						if(count == $("#div1 li").length) {
							count = 0;
						}
//						console.log(count)
						$("#div1 li").eq(count).stop().fadeIn().siblings().stop().fadeOut();
						$("#nav i").eq(count).addClass("ib").siblings().removeClass("ib");
						//或者调用showLi
						//count--;showli()
						clearInterval(timer);
						timer = setInterval(showLi, 3000);
					});
					$("#left").click(function() {
						count--;
						if(count == -1) {
							count = $("#div1 li").length - 1;
						}
//						console.log(count)
						$("#div1 li").eq(count).stop().fadeIn().siblings().stop().fadeOut();
						$("#nav i").eq(count).addClass("ib").siblings().removeClass("ib");
						//或者调用showLi
						//count--;showli()
						clearInterval(timer);
						timer = setInterval(showLi, 3000);//开启定时器之前要关闭尚一个定时器
					});
				});
				$(function() {
					$("#nav i").mouseenter(function() {
						count = $("#nav i").index(this);
						count--
						showLi();
						clearInterval(timer);
						timer = setInterval(showLi, 3000);
					});
				});
				function showLi(){
					count++;
					if(count == $('#div1 li').length) {
						count = 0;
					}
//	     	        console.log(count);
					$("#div1 li").eq(count).stop().fadeIn().siblings().stop().fadeOut();
					$("#nav i").eq(count).addClass("ib").siblings().removeClass("ib");
				}
			</script>
	</body>
</html>