jquery焦点图 #34

yijie-web · 2019-10-22T14:44:18Z

<head>
	<meta charset="utf-8" />
	<title>11</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 440px;
			height: 248px;
			border: 1px solid #000;
			margin: 50px auto;
			position: relative;
		}
		.box1{
			position: absolute;
			right: 25px;
			bottom: 25px;
		}
		.content1>li{
			float: left;
			list-style: none;
			height: 20px;
			width: 20px;
			line-height: 20px;
			display: inline-block;
			text-align: center;
			background:#ccc;
			margin: 5px;
		}
		.content>li{
			list-style: none;
			display: none;
		}
		.content>.show{
			display: block;
		}
		.content1>.current{
			background: red;

		}

	</style>
	<script src="js/jquery-3.3.1.js"></script>
	<script>
		$(function(){
		    $(".content1>li").mouseenter(function () {
				$(this).addClass("current");
				$(this).siblings().removeClass("current");
				var index=$(this).index();
				var $li=$(".content>li").eq(zuoye1);
				$li.siblings().removeClass("show");
				$li.addClass("show");


            });
		});
	</script>

</head>

<body>
<div class="box">

<ul class="content">
	<li class="show"><img src="img/11.jpg" alt=""></li>
	<li><img src="img/12.jpg" alt=""></li>
	<li><img src="img/13.jpg" alt=""></li>
	<li><img src="img/14.jpg" alt=""></li>
</ul>
	<div class="box1">
		<ul class="content1">
			<li  class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</div>
</body>

The text was updated successfully, but these errors were encountered:

yijie-web changed the title ~~焦点点击~~ jquery图片点击 Oct 22, 2019

yijie-web changed the title ~~jquery图片点击~~ jquery焦点图 Oct 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery焦点图 #34

jquery焦点图 #34

yijie-web commented Oct 22, 2019

jquery焦点图 #34

jquery焦点图 #34

Comments

yijie-web commented Oct 22, 2019