<!DOCTYPE html>
<html>
<head>
<title>Banner</title>
</head>
<script>
//通过 class 筛选
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj, false)[name];
}
}
//运动框架
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}
else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
}
else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
document.getElementById('txt1').value = obj.style.opacity;
}
else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
//通过 class 筛选元素函数
function getByClass(oParent, sClass) {
var aEle = oParent.getElementsByTagName('*');//选中所有子元素
var aResult = [];//定义一个数组
for (let i = 0; i < aEle.length; i++) {
if (aEle[i].className == sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload = function () {
var oDiv = document.getElementById('playimages');
var oBtnPrev = getByClass(oDiv, 'prev')[0];
var oBtnNext = getByClass(oDiv, 'next')[0];
var oMarkLeft = getByClass(oDiv, 'mark_left')[0];
var oMarkRight = getByClass(oDiv, 'mark_right')[0];
//hover 显示按钮
oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
startMove(oBtnPrev, 'opacity', 100);
}
oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
startMove(oBtnPrev, 'opacity', 0);
}
oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
startMove(oBtnNext, 'opacity', 100);
}
oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
startMove(oBtnNext, 'opacity', 0);
}
var oDivSmall = getByClass(oDiv, 'small_pic')[0];
var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
var aLiSmall = oDivSmall.getElementsByTagName('li');
//设置小图区域的宽度;
oUlSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';
var oUlBig = getByClass(oDiv, 'big_pic')[0];
var oLiBig = oUlBig.getElementsByTagName('li');
var nowZIndex = 2;
var now = 0;
//切换
function tab() {
oLiBig[now].style.zIndex = nowZIndex++;
//点击透明度变化逻辑step.1 小图点击时先将所有小图透明度变为60,将选中变为100
for (let j = 0; j < aLiSmall.length; j++) {
startMove(aLiSmall[j], 'opacity', 60);
}
startMove(aLiSmall[now], 'opacity', 100);
oLiBig[now].style.height = 0;
startMove(oLiBig[now], 'height', 320);
if (now == 0) {
startMove(oUlSmall, 'left', 0)
} else if (now == aLiSmall.length - 1) {
startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0], offsetWidth);
} else {
startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);
}
}
//点击小图换页
for (let i = 0; i < aLiSmall.length; i++) {
aLiSmall[i].index = i;
aLiSmall[i].onclick = function () {
if (this.index == now) {
return;
}
now = this.index;
tab();
}
//小图 hover 状态透明度变化
aLiSmall[i].onmouseover = function () {
startMove(this, 'opacity', 100);
}
aLiSmall[i].onmouseout = function () {
//点击透明度变化逻辑step.2 判断当前是否为已选中图像决定是否给非 hover 状态的透明度降低效果
if (this.index != now) {
startMove(this, 'opacity', 60);
}
}
}
//通过图标点击切换
oBtnPrev.onclick = function () {
now--;
if (now == -1) {
now = aLiSmall.length - 1;
}
tab();
}
oBtnNext.onclick = function () {
now++;
if (now == aLiSmall.length) {
now = 0;
}
tab();
}
//自动轮播
var timer = setInterval(oBtnNext.onclick, 2000);
oDiv.onmouseover = function () {
clearInterval(timer);
}
oDiv.onmouseout = function () {
timer = setInterval(oBtnNext.onclick, 2000);
}
}
</script>
<style>
body {
background: #666;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: 0;
}
.play {
width: 400px;
height: 430px;
margin: 50px auto 0;
background: #999;
font: 12px Arial;
}
.big_pic {
width: 400px;
height: 320px;
overflow: hidden;
border-bottom: 1px solid #ccc;
background: #222;
position: relative;
}
.big_pic li {
width: 400px;
height: 320px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 0;
background: url(images/loading.gif) no-repeat center center;
}
.mark_left {
width: 200px;
height: 320px;
position: absolute;
left: 0;
top: 0;
background: red;
filter: alpha(opacity:0);
opacity: 0;
z-index: 3000;
}
.mark_right {
width: 200px;
height: 320px;
position: absolute;
left: 200px;
top: 0;
background: green;
filter: alpha(opacity:0);
opacity: 0;
z-index: 3000;
}
.big_pic .prev {
width: 60px;
height: 60px;
background: url(images/btn.gif) no-repeat;
position: absolute;
top: 130px;
left: 10px;
z-index: 3001;
filter: alpha(opacity:0);
opacity: 0;
cursor: pointer;
}
.big_pic .next {
width: 60px;
height: 60px;
background: url(images/btn.gif) no-repeat 0 -60px;
position: absolute;
top: 130px;
right: 10px;
z-index: 3001;
filter: alpha(opacity:0);
opacity: 0;
cursor: pointer;
}
.big_pic .text {
position: absolute;
left: 10px;
top: 302px;
z-index: 3000;
color: #ccc;
}
.big_pic .length {
position: absolute;
right: 10px;
bottom: 4px;
z-index: 3000;
color: #ccc;
}
.big_pic .bg {
width: 400px;
height: 25px;
background: #000;
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
z-index: 2999;
bottom: 0;
left: 0;
}
.small_pic {
width: 380px;
height: 94px;
position: relative;
top: 7px;
left: 10px;
overflow: hidden;
}
.small_pic ul {
height: 94px;
position: absolute;
top: 0;
left: 0;
}
.small_pic li {
width: 120px;
height: 94px;
float: left;
padding-right: 10px;
background: url(images/loading.gif) no-repeat center center;
cursor: pointer;
filter: alpha(opacity=60);
opacity: 0.6;
}
.small_pic img {
width: 120px;
height: 94px;
}
</style>
<body>
<div id="playimages" class="play">
<ul class="big_pic">
<div class="prev"></div>
<div class="next"></div>
<a class="mark_left" href="javascript:;"></a>
<a class="mark_right" href="javascript:;"></a>
<li style="z-index:1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
<div class="small_pic">
<ul style="width:390px;">
<li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
完整 banner
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 先上效果图： 如果顶部是单个ImageView我们可以用下面的方法来获取： 如果是多布局复杂的Recyclervi...
- [设计思维][人工智能] 本文转载自：Tezign “鲁班”是商业和技术两方面的比较好的结合产物。首先在技术深度方...
