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端广告轮播图的主要内容,如果未能解决你的问题,请参考以下文章

ViewPager详解广告轮播图

JavaScripts广告轮播图以及定时弹出和定时隐藏广告

jquery 广告轮播图

为啥淘宝首页的广告位轮播图片只有5个

iOS广告轮播图

预约挂号系统之首页广告轮播图