html、css、js實現輪播圖

時間 2019-11-18

標籤 html css 實現欄目 HTML 简体版

原文原文鏈接

2017-03-13javascript

今天把輪播圖的知識1過了一下，寫了一個比較簡單的輪播圖，給你們參考一下。css

查看具體的效果點擊這個連接： http://gjhnstxu.me/%E8%BD%AE%E6%92%AD%E5%9B%BE/html/demo.htmlhtml

html代碼：java

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<link rel="stylesheet" type="text/css" href="../css/demo.css">　　　　　　//要本身修改一下路徑
<script type="text/javascript" src="../js/jquery.js"></script>　　　　　　　//要本身修改一下路徑jquery

</head>
<body>
<div id="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.jpg"></div>

</div>
<div class="btn btn1"><</div>
<div class="btn btn2">></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>ide

</div>
</body>
</html>this

js代碼：htm

var i=0;
var timer;
$(function(){
// $("#igs").hover(function(){
// $(".btn").show();
// },function(){
// $(".btn").hide();
// })ip

$(".ig").eq(0).show().siblings().hide();

ShowTime();rem

$(".tab").hover(function(){
i = $(this).index();
Show();
clearInterval(timer); //清除輪播
},function(){
ShowTime();
})

$(".btn1").click(function(){
clearInterval(timer);
if (i == 0) {
i = 6;
}
i--;
Show();
ShowTime();
})
$(".btn2").click(function(){
clearInterval(timer);
if(i == 5){
i = -1;
}
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 == 6) {
i =0;
}
Show();
},2000);
}

css代碼：

*{
padding: 0px;
margin: 0px;
}
.ig{
position: absolute;
}
.btn{
position: absolute;
height: 130px;
width: 80px;
background:rgba(0,0,0,0.4);
color: #fff;
text-align: center;
line-height: 130px;
font-size: 70px;
top: 175px;
cursor: pointer; /*放上鼠標變成一個手的形狀*/
/*display: none;*/
}
.btn2{
left: 1100px;
}
#tabs{
position: absolute;
top: 420px;
left: 475px;
}
.tab{
width: 30px;
height: 30px;
background-color: #5388e8;
float: left;
margin-right: 10px;
text-align: center;
line-height: 30px;
color: #fff;
cursor: pointer;
border-radius: 100%; /*將方形變成圓形*/
}
.bg{
background-color: red;
}