<jQuery>首页图片切换／轮播

最新推荐文章于 2019-02-11 19:44:32 发布

MMMMMayC

最新推荐文章于 2019-02-11 19:44:32 发布

阅读量575

点赞数

分类专栏：实例代码文章标签： jquery html5 web设计图片 css3

本文链接：https://blog.csdn.net/qq_17615475/article/details/51105424

版权

实例代码专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="picture-switch.css">
</head>

<body>
<div id="page">
	<div id="pic">
    	<img style="display:block;" class="picture" id="pic-1" src="images/t01b916c314a98b2926.png" alt="1">
        <img class="picture" id="pic-2" src="images/t012aa03d26132327ff.png" alt="2">
        <img class="picture" id="pic-3" src="images/t016db3f957add48905.jpg" alt="3">
        <img class="picture" id="pic-4" src="images/t0173ad5da790686f2a.png" alt="4">
    </div>
    
    <ul id="nav">
    	<li class="thumb cur" id="thumb-1">
        	1
        </li>
        <li class="thumb" id="thumb-2">
        	2
        </li>
        <li class="thumb" id="thumb-3">
        	3
        </li>
        <li class="thumb" id="thumb-4">
        	4
        </li>
    </ul>
</div>

	<script src="jquery-1.11.1.min.js"></script>
    <script src="picture-switch.js"></script>
</body>
</html>

/* CSS Document */
*{
	margin:0;
	padding:0;
}
#page{
	position:relative;
	width:950px;
	height:260px;
	background:grey;
	margin:20px auto;
	overflow:hidden;
	border:medium solid black;
}
#pic{
	
}
#pic .picture{
	display:none;
}
#nav{
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:255px;
	background:#989898;
}
#nav li{
	display:block;
	border:thin solid black;
	height:65px;
	width:100%;
	cursor:pointer;
	vertical-align:bottom;
}
#nav li.cur{
	background:white;
}

// JavaScript Document
$('#nav').on('mouseenter','li',function(){
	var $this=$(this);
	var index=$this.index();
	
	$this.siblings('li').removeClass('cur');
	$this.addClass('cur');
	$('#pic .picture').stop(true,true).not(':eq('+index+')').hide();
	$('#pic .picture').eq(index).show();
});

http://download.csdn.net/detail/qq_17615475/9485873