这周的我首次用JQ做了个轮播图， 给大家展示一下过！
可以优化的地方还望大家多多指导！
首先要做的就是HTML页面了，做两个按钮和下面的随之改变的数字图形。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="jquery-3.3.1.min.js"></script> <script src="lunBoTu.js"></script> <link href="lunBoTu.css" rel="stylesheet" /> </head> <body> <div id="tu"> <div id="igs" class="igs"> <div class="ig"><img src="img/1.jpg" /></div> <div class="ig"><img src="img/2.jpg" /></div> <div class="ig"><img src="img/3.jpg" /></div> <div class="ig"><img src="img/4.jpg" /></div> <div class="ig"><img src="img/5.jpg" /></div> <div class="ig"><img src="img/6.png" /></div> <div class="ig"><img src="img/7.jpg" /></div> <div class="ig"><img src="img/8.jpg" /></div> </div> <div id="btn"> <div class="btn btn1"> < </div> <div class="btn btn2"> > </div> </div> <div id="tabs"> <div class="tab bg">1</div> <div class="tab">2</div> <div class="tab">3</div> <div class="tab">4</div> <div class="tab">5</div> <div class="tab">6</div> <div class="tab">7</div> <div class="tab">8</div> </div> </div> </body> </html>
接下来我们就可以为HTML页面设置样式了！这里使用的是css外联样式！
body {
width :100%;
height:100%;
padding:0px;
margin:0px;
}
#to{
900px;
height:500px;
}
#igs{
position:relative;
left:50%;
clear:both;
}
.ig{
position:absolute;
}
img{
900px;
height:500px;
position:relative;
left:-450px;
}
#btn{
position:relative;
left:50%;
clear:both;
}
.btn{
60px;
height:90px;
color:#000000;
font-size:40px;
text-align:center;
line-height:90px;
background-color:#808080;
position:relative;
top :215px;
opacity:0.5;
clear:both;
}
.btn1{
position:relative;
right :450px;
clear:both;
cursor:pointer;
}
.btn2{
position:absolute;
left:390px;
cursor:pointer;
}
ul{
list-style-type:none;
}
#tabs{
position:relative;
left:50%;
clear:both;
}
.tab{
font-size:20px;
text-align:center;
line-height:30px;
color:#000000;
background-color:#0094ff;
30px;
height:30px;
float:left;
margin-right:10px;
position:relative;
top:380px;
right:150px;
border-radius:100%;
cursor:pointer;
/*鼠标悬停是变小手*/
}
.bg{
background-color:#ff0000;
}
最后就是JS事件了
var i = 0;
var timer;
$(function () {
$(".ig").eq(0).show().siblings().hide();
Showtime();
//鼠标经过tab事件
$(".tab").hover(function () {
i = $(this).index();
Show();
clearTimeout(timer);
}, function () {
Showtime();
});
//点击左边事件
$(".btn1").click(function () {
clearInterval(timer);
if (i == 0) {
i = 8;
}
i--;
Show();
Showtime();
});
//点击右边事件
$(".btn2").click(function () {
clearInterval(timer);//清除轮播；
if (i == 8) {
i = 0;
}
i++;
Show();
Showtime();
});
});
//显示图片
function Show(){
$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
$(".tab").eq(i).addClass("bg").siblings().removeClass("bg");
}
//轮播图定时器
function Showtime() {
timer = setInterval(function () {
i++;
if (i == 8) {
i = 0;
}
Show();
}, 4000);
}
JQ代码在网站上有很多的，大家可以找一下。
希望可以对大家有些些帮助！