您的位置：首页 > Web前端 > JQuery

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

2016-04-09 15:32 696 查看

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航