网页轮播图
2019-05-31 本文已影响0人
昆仑草莽
JQ轮播图代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq轮播</title>
<style type="text/css">
.banner{
width: 800px;
height: 200px;
border: 1px solid red;
position: relative;
}
.banner .pic li{
position: absolute;
left: 0;
top: 0;
}
.banner .tab{
position: absolute;
bottom: 5px;
left: 50%;
width: 128px;
margin-left: -100px;
height: 22px;
}
.banner .tab li{
list-style: none;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
float: left;
margin: 5px;
}
.banner .btn li{
list-style: none;
}
.banner .tab li.on{
background-color: aqua;
}
.banner .btn li span{
font-size: 50px;
color: white;
position: absolute;
top: 50%;
margin-top: -25px;
display: none;
}
.banner:hover .btn li span{
display: block;
}
.banner .btn li.left span{
left: 0;
}
.banner .btn li.right span{
right: 0;
}
</style>
</head>
<body>
<div class="banner">
<ul class="pic">
<li><a href="javascript:void (0)"><img src="../images/1.jpg" width="800" height="200" alt="test"></a></li>
<li><a href="javascript:void (0)"><img src="../images/2.jpg" width="800" height="200" alt="test"></a></li>
<li><a href="javascript:void (0)"><img src="../images/3.jpg" width="800" height="200" alt="test"></a></li>
<li><a href="javascript:void (0)"><img src="../images/4.jpg" width="800" height="200" alt="test"></a></li>
</ul>
<ul class="tab">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="btn">
<li class="left"><span><</span></li>
<li class="right"><span>></span></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="application/javascript">
//获取图片
var pic = $(".banner .pic li");
//获取小圆圈
var tab = $(".banner .tab li");
//获取箭头
var btn = $(".banner .btn li");
//获取图片长度
var len =pic.length;
var first = 0;
var timer;
//初始化
tab.eq(0).addClass('on');
pic.hide().eq(0).show();
//小圆圈区域
tab.click(function () {
var x = $(this).index();
if(x != first){
change(x)
}
});
//箭头区域
btn.click(function () {
var x = first;
if($(this).index()){
x++;
x%=len;
}else{
x--;
if(x<0){
x=len-1;
}
}
change(x)
});
//自动轮播
$(".banner").hover(function () {
clearInterval(timer)
},auto);
function auto() {
timer = setInterval(function () {
var x = first;
x++;
x%=len;
change(x);
},3000)
}
auto();
//变化函数
function change(i) {
tab.eq(first).removeClass('on');
pic.eq(first).fadeOut(2000);
first = i;
tab.eq(first).addClass('on');
pic.eq(first).fadeIn(2000);
}
</script>
</body>
</html>
此代码包含了CSS样式，JQ函数。可以直接使用在网页中。在使用中只需修改图片地址即可。
JS-轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.center_left{
width: 800px;
height: 200px;
/*border: 1px solid red;*/
/*background-color: aqua;*/
position: relative;
}
.center_left .ul1 li span{
font-size: 80px;
color: white;
position: absolute;
top: 45px;
}
.center_left .ul1 li{
list-style: none;
}
.center_left .ul1 li span:hover{
color: aqua;
}
.center_left .ul2 li{
width: 20px;
height: 20px;
list-style: none;
border: 1px solid saddlebrown;
border-radius: 50%;
float: left;
margin-left: 10px;
}
.center_left .ul2 li:hover{
background-color: aquamarine;
}
.center_left .ul2{
position: absolute;
left: 300px;
bottom: 30px;
}
#div2{
width: 800px;
height: 180px;
background-image: url("https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg");
/*背景大小自适应*/
background-size: contain;
}
</style>
</head>
<body>
<div class="center_left">
<div id="div2"></div>
<ul class="ul1">
<li><span style="left: 20px" onclick="last()"><</span></li>
<li><span style="right: 20px" onclick="add()">></span></li>
</ul>
<ul class="ul2">
<li class="li1"></li>
<li class="li1"></li>
<li class="li1"></li>
<li class="li1"></li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
var li1 = document.getElementsByClassName("li1");//获取小圆圈
var box = document.getElementById("div2");//获取div
var counter=1;
setInterval(add,4000);
function add() {
counter+=1;
if (counter>4){
counter=1;
}
s(counter)
}
function last() {
counter -= 1;
if (counter<1){
counter=4
}
s(counter)
}
li1[0].onclick = function () {s(1)};
li1[1].onclick = function () {s(2)};
li1[2].onclick = function () {s(3)};
li1[3].onclick = function () {s(4)};
function s(sum) {
counter=sum;
switch (sum){
case 1:
box.style.backgroundImage = "url('../images/1.jpg')";
$(".li1").css({background:'red',opacity:'0.1'});
$(".li1").eq(0).css({background:'aqua',opacity:'1'});
break;
case 2:
box.style.backgroundImage = "url('../images/2.jpg')";
$(".li1").css({background:'red',opacity:'0.1'});
$(".li1").eq(1).css({background:'aqua',opacity:'1'});
break;
case 3:
box.style.backgroundImage = "url('../images/3.jpg')";
$(".li1").css({background:'red',opacity:'0.1'});
$(".li1").eq(2).css({background:'aqua',opacity:'1'});
break;
case 4:
box.style.backgroundImage = "url('../images/4.jpg')";
$(".li1").css({background:'red',opacity:'0.1'});
$(".li1").eq(3).css({background:'aqua',opacity:'1'});
break;
}
}
</script>
</body>
</html>
轮播效果：
