Web前端 淡入浅出效果轮播图
摘要：前端搭建开发环境搭建 游戏开发的前端后端 前端开发游戏制作 html 代码 <style> ul, li { padding: 0; margin: 0; } li { list-style: none; } .containe……
前端搭建开发环境搭建 游戏开发的前端后端 前端开发游戏制作
html 代码
<style>
ul,
li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.container {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
}
.banner {
position: relative;
overflow: hidden;
}
.banner li {
position: absolute;
top: 0;
left: 0;
}
.banner li img {
width: 800px;
height: 400px;
}
.btn {
height: 50px;
position: absolute;
left: 0;
display: none;
}
.btn>.prev,
.btn>.next {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
color: #fff;
background: rgba(188, 185, 185, 0.50);
cursor: pointer;
font-weight: bold;
}
.btn .prev:hover,
.btn .next:hover {
background: rgba(188, 185, 185, 0.80);
}
.btn>.prev {
float: left;
}
.btn>.next {
float: right;
}
.box {
height: 10px;
position: absolute;
bottom: 30px;
overflow: hidden;
}
.box li {
width: 50px;
height: 10px;
background: rgba(188, 185, 185, 0.50);
float: left;
cursor: pointer;
}
.box li:hover {
background: #00FA9A !important;
}
</style>
<div class=”container”>
<ul class=”banner”>
<li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1499241259&di=2ff02fbccfaf02ec79dc4b304444e6ad&imgtype=jpg&er=1&src=http%3A%2F%2Fdl.bizhi.sogou.com%2Fimages%2F2013%2F09%2F29%2F391672.jpg”></li>
<li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498646608817&di=5555cbf15efd661a65578440897827b3&imgtype=0&src=http%3A%2F%2Fpic15.photophoto.cn%2F20100615%2F0006019058815826_b.jpg”></li>
<li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498646647211&di=3514a6cc7bad445901c50b1056498b9f&imgtype=0&src=http%3A%2F%2Fp3.image.hiapk.com%2Fuploads%2Fallimg%2F140814%2F7730-140Q41I921.jpg”></li>
<li><img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498646677725&di=2757bfb1e0b6a7e30086942808bc01db&imgtype=0&src=http%3A%2F%2Fwww.pp3.cn%2Fuploads%2F201409%2F2014091305.jpg”></li>
</ul>
<div class=”btn”>
<div class=”prev”><</div>
<div class=”next”>></div>
</div>
<ul class=”box”></ul>
</div>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js” integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=”
crossorigin=”anonymous”></script>
<script>
//准备工作
var i = 0,
w = $(‘.container’).width(),
h = $(‘.container’).height(),
n = $(‘.banner li’).length,
tbtn = (h / 2),
wbox = (w / 2),
wboxleft = (w / 4),
blmright = [wbox – (50 * n)] / n;
$(document).ready(function () {
$(‘.banner’).css({ width: w, height: h });
$(‘.banner li’).css({ width: w, height: h });
$(‘.btn’).css({ width: w * 0.9, top: tbtn, marginLeft: w * 0.05 });
$(‘.box’).css({ width: wbox, left: wboxleft });
for (var j = 0; j < n; j++) {
$(‘.box’).append(‘<li></li>’);
};
$(‘.box li’).css({ marginRight: blmright });
});
//初始化
$(document).ready(function () {
$(‘.banner li’).eq(i).stop(true).fadeIn();
$(‘.banner li’).eq(i).siblings().stop(true).fadeOut();
$(‘.box li’).eq(i).css({ background: ‘#00FA9A’ });
$(‘.box li’).eq(i).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
});
var time = setInterval(‘next()’, 2500);
//btn next
function next() {
i++;
if (i > n – 1) { i = 0 }
$(‘.banner li’).eq(i).stop(true).fadeIn();
$(‘.banner li’).eq(i).siblings().stop(true).fadeOut();
$(‘.box li’).eq(i).css({ background: ‘#00FA9A’ });
$(‘.box li’).eq(i).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
};
//btn prev
function prev() {
i–;
if (i < 0) { i = n – 1 }
$(‘.banner li’).eq(i).stop(true).fadeIn();
$(‘.banner li’).eq(i).siblings().stop(true).fadeOut();
$(‘.box li’).eq(i).css({ background: ‘#00FA9A’ });
$(‘.box li’).eq(i).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
};
//btn
$(document).ready(function () {
$(‘.prev’).click(function () {
prev();
clearInterval(time);
time = setInterval(‘next()’, 2500);
});
$(‘.next’).click(function () {
next();
clearInterval(time);
time = setInterval(‘next()’, 2500);
});
});
//box li
$(document).ready(function (e) {
$(‘.box li’).click(function () {
var m = $(this).index();
i = m;
$(‘.box li’).eq(m).css({ background: ‘#00FA9A’ });
$(‘.box li’).eq(m).siblings().css({ background: ‘rgba(188,185,185,0.50)’ });
$(‘.banner li’).eq(m).stop(true).fadeIn();
$(‘.banner li’).eq(m).siblings().stop(true).fadeOut();
clearInterval(time);
time = setInterval(‘next()’, 2500);
});
});
//hover停止
$(document).ready(function () {
$(‘.banner’).hover(function () {
clearInterval(time);
}, function () {
time = setInterval(‘next()’, 2500);
});
});
$(document).ready(function () {
$(‘.banner’).hover(function () {
$(‘.btn’).stop(true).fadeIn();
}, function () {
$(‘.btn’).stop(true).fadeOut();
});
$(‘.btn’).hover(function () {
$(‘.btn’).stop(true).fadeIn();
}, function () {
$(‘.btn’).stop(true).fadeOut();
});
});
</script>
cocos2dx前端开发环境搭建 前端格斗游戏开发 sts前端开发环境
» 本文来自：前端开发者 » 《Web前端 淡入浅出效果轮播图》
» 本文链接地址：https://www.rokub.com/5363.html
» 您也可以订阅本站：https://www.rokub.com
近期评论