<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<script src="./jquery-1.12.4.js"></script>
<style>
ul,ol{
padding: 0;
margin: 0;
}
body{
background:#ccc;
}
li{
list-style: none;
}
.box{
height:470px;
width:590px;
margin:100px auto;
position: relative;
overflow: hidden;
}
ul{
width:800%;
position: absolute;
}
.box .list .item{
float:left;
}
.box ol{
position: absolute;
bottom:10px;
left:50%;
transform: translateX(-50%);
background:rgba(255,255,255,.4);
border-radius: 10px;
}
.box ol li{
height:12px;
width:12px;
background:#fff;
border-radius: 50%;
float:left;
margin:10px;
cursor: pointer;
}
.box ol li.now{
background:red;
}
span{
height:470px;
width:590px;
display: block;
background:pink;
font-size:200px;
font-weight: bolder;
line-height: 470px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="item"><a href="#"><span>1</span></a></li>
<li class="item"><a href="#"><span>2</span></a></li>
<li class="item"><a href="#"><span>3</span></a></li>
<li class="item"><a href="#"><span>4</span></a></li>
<li class="item"><a href="#"><span>5</span></a></li>
<li class="item"><a href="#"><span>6</span></a></li>
</ul>
<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
$(function(){
$('.box>ol>li').hover(function(e){
$(this).addClass('now').siblings().removeClass('now');
});
$('.box>ol>li').on('click',function(e){
var $width=590;
var $index=$(this).index();
$('.list').animate({
left:-$index*$width+'px'
})
});
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<script src="./jquery-1.12.4.js"></script>
<style>
ul,ol{
padding: 0;
margin: 0;
}
body{
background:#ccc;
}
li{
list-style: none;
}
.box{
height:470px;
width:590px;
margin:100px auto;
position: relative;
overflow: hidden;
}
ul{
width:800%;
position: absolute;
}
.box .list .item{
float:left;
}
.box ol{
position: absolute;
bottom:10px;
left:50%;
transform: translateX(-50%);
background:rgba(255,255,255,.4);
border-radius: 10px;
}
.box ol li{
height:12px;
width:12px;
background:#fff;
border-radius: 50%;
float:left;
margin:10px;
cursor: pointer;
}
.box ol li.now{
background:red;
}
span{
height:470px;
width:590px;
display: block;
background:pink;
font-size:200px;
font-weight: bolder;
line-height: 470px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="list">
<li class="item"><a href="#"><span>1</span></a></li>
<li class="item"><a href="#"><span>2</span></a></li>
<li class="item"><a href="#"><span>3</span></a></li>
<li class="item"><a href="#"><span>4</span></a></li>
<li class="item"><a href="#"><span>5</span></a></li>
<li class="item"><a href="#"><span>6</span></a></li>
</ul>
<ol>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
$(function(){
$('.box>ol>li').hover(function(e){
$(this).addClass('now').siblings().removeClass('now');
});
$('.box>ol>li').on('click',function(e){
var $width=590;
var $index=$(this).index();
$('.list').animate({
left:-$index*$width+'px'
})
});
})
</script>
</body>
</html>