pc端广告轮播图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了pc端广告轮播图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>轮播</title>
<style>
body{
margin:0;
}
.banner {
width: 100%;
position: relative;
overflow:hidden;
}
.banner ul {
width: 100%;
height:500px;
}
.banner li {
float:left;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.banner a {
display: block;
}
.banner img {
width: 100%;
}
.banner p {
width: 105px;
height: 20px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -42px;
z-index: 999;
}
.banner span {
width: 12px;
height: 12px;
display: block;
float: left;
margin: 0 5px;
border: 2px solid #7c7a7b;
border-radius: 50%;
background: #7c7a7b;
cursor: pointer;
}
.banner .active {
background: #fff;
border: 2px solid #97c62c;
}
.banner a {
position: absolute;
top:50%;
left:30px;
z-index: 11;
cursor: pointer;
width: 44px;
height: 44px;
margin-top: -24px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.prev {
border-bottom: 2px solid #393F3B;
border-left: 2px solid #393F3B;
}
.banner .next {
left: auto;
right: 30px;
border-top: 2px solid #393F3B;
border-right: 2px solid #393F3B;
}
.cur{
z-index:2;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li><img src="img/lun1.jpg"/></li>
<li><img src="img/lun2.jpg" /></li>
<li><img src="img/lun3.jpg" /></li>
<li><img src="img/lun4.jpg" /></li>
<li><img src="img/lun5.jpg" /></li>
</ul>
<p>
<span class="active"></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
</p>
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
var i = 0;
var iTimer = null;
var aLi = $(‘.banner ul‘).find(‘li‘);
var aSpan = $(‘.banner p‘).find(‘span‘);
//给所有的span添加点击操作
aSpan.click(function () {
i = $(this).index();
//console.log(i);
fadeFn();
});
//点击prev，图片显示上一张；
$(‘.prev‘).click(function () {
if (i > 0) {
i--;
fadeFn();
}
});
//点击next,图片显示 下一张；
$(‘.next‘).click(function () {
//console.log(i);
if (i < aLi.size() - 1) {
i++;
fadeFn();
}
});
//找到所有的li，清空所有li的class;给第一个li添加cur,并且改变li的透明度；给它的下一个li添加class；
function fadeFn() {
aLi.removeClass().hide();
aLi.eq(i).addClass(‘cur‘).fadeIn(‘slow‘);
aSpan.removeClass();
aSpan.eq(i).addClass(‘active‘);
}
function autoPlay() {
i++;
i %= aLi.size();
fadeFn();
}
iTimer = setInterval(autoPlay, 3000);
//鼠标移入停止定时器，鼠标移开启动定时器；
$(‘.banner‘).mouseover(function () {
clearInterval(iTimer);
$(‘.prev‘).show();
$(‘.next‘).show();
});
$(‘.banner‘).mouseout(function () {
clearInterval(iTimer); //先停止，再开启；
iTimer = setInterval(autoPlay, 3000);
$(‘.prev‘).hide();
$(‘.next‘).hide();
});
})
</script>
</body>
</html>
以上是关于pc端广告轮播图的主要内容，如果未能解决你的问题，请参考以下文章