1-11作业
来源：1-13 作业题
夕落呀
2018-10-18 13:39:59
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现轮播图</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 标题 -->
<div class="word">jQuery实现轮播图</div>
<!-- 主体 -->
<div id="main">
<!-- 图片轮播 -->
<div class="pics">
<img src="img/1.jpg" class="bloc pics-active">
<img src="img/2.jpg" class="bloc">
<img src="img/3.jpg" class="bloc">
<img src="img/4.jpg" class="bloc">
<img src="img/5.jpg" class="bloc">
</div>
<!-- 箭头 -->
<div class="button prev" id="prev"></div>
<div class="button next" id="next"></div>
<!-- 圆点 -->
<div class="dots" id="dots">
<span class="dot dots-active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script src="vendor/jquery-1.12.4.js"></script>
<script src="jquery/jquery.js"></script>
</body>
</html>
css
*{
margin:0;
padding:0;
}
.word{
font-size: 26px;
font-family: "Microsoft YaHei";
text-align: center;
margin: 30px;
}
#main{
width: 1200px;
height: 460px;
border: 10px solid #bbb;
margin: 50px auto;
position: relative;
}
/*图片样式*/
.pics{
width: 1200px;
height: 460px;
overflow: hidden;
}
.bloc{
display: none;
float: left;
cursor: pointer;
}
.pics-active{
display: block;
}
/*箭头样式*/
.button{
width: 40px;
height: 80px;
position: absolute;
top: 50%;
left:0;
margin-top: -40px;
cursor: pointer;
}
.prev{
left:auto;
right:0;
background: url(../img/pre.png) center center no-repeat;
}
.next{
background: url(../img/pre2.png) center center no-repeat;
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
/*圆点样式*/
.dots{
position: absolute;
bottom: 20px;
right: 0px;
padding-right: 14px;
text-align: center;
line-height: 15px;
}
.dot{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7,17,27,0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255,255,255,1) inset;
}
.dots-active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background-color: #fff;
}
js
$(function(){
var timer=null,
index=0,
len=$('.bloc').length;
//定时器每隔2秒切换图片
function startChange(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg();
},2000)
}
startChange();
// 清除定时器
function stopChange(){
if(timer){
clearInterval(timer);
}
}
//滑过main清除定时器，离开继续
function slidImg(){
$('#main').mouseover(function(){
stopChange();
}).mouseout(function(){
startChange();
})
}
slidImg();
// 点击next(左)箭头切换图片
$('#next').click(function(){
index--;
if(index<0){
index=len-1;
}
changeImg();
})
// 点击prev(右)箭头切换图片
$('#prev').click(function(){
index++;
if(index>=len){
index=0;
}
changeImg();
})
// 点击圆点切换图片
$('.dot').click(function(){
index=$(this).index();
changeImg();
})
// 图片和圆点切换样式
function changeImg(){
$('.bloc').eq(index).addClass('pics-active').siblings().removeClass('pics-active');
$('.dot').eq(index).addClass('dots-active').siblings().removeClass('dots-active');
}
})
老师 帮忙看看
1回答
-
好帮手慕夭夭
2018-10-18
效果实现了呢 , 优秀哦 ! 建议同学也在css中加入适量注释 ,便于日后的阅读维护哦 . 祝学习愉快 !
0
