一下是案例代码，可以根据自己的需要再次修改。
<body>
<div class="show">
<div class="myShow">
<div class="number">1 / 4</div>
<img src="../image/huan1.jpg" alt="">
<div class="text">introduction1</div>
</div>
<div class="myShow">
<div class="number">2 / 4</div>
<img src="../image/huan2.jpg" alt="">
<div class="text">introduction2</div>
</div>
<div class="myShow">
<div class="number">3 / 4</div>
<img src="../image/huan3.jpg" alt="">
<div class="text">introduction3</div>
</div>
<div class="myShow">
<div class="number">4 / 4</div>
<img src="../image/huan4.jpg" alt="">
<div class="text">introduction4</div>
</div>
<div class="dot_contain">
<div class="dot" onmouseenter="currentShow(1)">1</div>
<div class="dot" onmouseenter="currentShow(2)">2</div>
<div class="dot" onmouseenter="currentShow(3)">3</div>
<div class="dot" onmouseenter="currentShow(4)">4</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<br>
</body>
<style>
*{
font-family: 微软雅黑;
}
.show{
max-width: 1000px;
position: relative;
margin:auto;
}
.myShow{
display: none;
}
img{
width: 100%;
}
/*-------------------------------------------------------------------*/
/*文字部分s*/
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
right: 8px;
width: 50%;
text-align: center;
/*border:1px solid #000;*/
}
/*数字文字部分*/
.number{
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/*-------------------------------------------------------------------*/
/*左右切换*/
.prev,.next{
cursor: pointer;
position:absolute;
top:50%;
margin-top: -22px;
padding: 16px;
border-radius: 0 3px 3px 0;
color: #000;
font-size: 50px;
font-weight: bold;
}
.next{
right:0px;
}
.prev:hover, .next:hover {
background-color:#DCDCDC;
opacity: 0.3;
}
/*-------------------------------------------------------------------*/
/*幻灯片下方圆点*/
.dot_contain{
position:absolute;
bottom:8px;
text-align: center;
}
.dot{
font-size: 10px;
font-weight: bold;
text-align: center;
height: 20px;
width: 20px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.active, .dot:hover {
background-color: #696969;
}
</style>
<script src="../jquery-1.11.3/jquery-1.11.3.min.js"></script>
<script>
index = 1;
show(index);
function changeShow(n) {
show(index += n);
}
function currentShow(n) {
show(index = n);
}
function show(n) {
//根据class名获取到shows和dots
shows=$('.myShow');
dots =$('.dot');
//获取到幻灯片长度-----即幻灯片个数
length=shows.length;
//获取到幻灯片下方圆圈个数
dotLength=dots.length;
//如果向后走到最后一张幻灯片时，则将index=1-----即切换到第一张幻灯片
if (n > length) {
index = 1;
}else if (n < 1) {//如果向前走到第一张幻灯片时，则将index=length-----即切换到最后一张幻灯片
index = length;
}
for (i = 0; i < length; i++) {
shows[i].style.display = "none";
}
for (i = 0; i < dotLength; i++) {
dots[i].className = dots[i].className.replace("active", "");
}
shows[index-1].style.display = "block";
dots[index-1].className += " active";
}
$('.prev').click(function(){
changeShow(-1);
});
$('.next').click(function(){
changeShow(1);
});
</script>
上一篇：女性化的Geisha巧克力设计
下一篇：优秀设计精选集
业界动态
关联推荐
