轮播图

来源：互联网发布：有赞微商城和淘宝区别编辑：程序博客网时间：2024/06/05 15:40

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #666;
}
li{
list-style: none;
}
img{
border: 0;
}
#div1{
width: 500px;
height: 378px;
background: #be37b9;
margin: 100px auto;
}
#div1 .big_pic{
width: 500px;
height: 300px;
background: yellow;
position: relative;
}
.big_pic ul{
width: 500px;
height: 300px;
background: #666;
position: absolute;
top: 0;
left: 0;
}
.big_pic li{
position: absolute;
height: 300px;
width: 500px;
/*这里的隐藏不能少不然JS不会出现下拉效果*/
overflow: hidden;
}
.big_pic .mark_left{
width: 250px;
height: 300px;
background: red;
position: absolute;
left: 0;
top: 0;
z-index: 3000;
filter: alpha(opacity:100); /*兼容IE处理*/
opacity: 0; /* chrome FF*/
}
.prev{
width: 60px;
height: 60px;
background: url("5.png");
position: absolute;
top: 50%;
margin-top: -30px;
left: 5px;
z-index: 3001;
filter: alpha(opacity:0);
opacity: 0;
}
.big_pic .mark_right{
width: 250px;
height: 300px;
background: green;
position: absolute;
top: 0;
right: 0;
float: right;
z-index: 3000;
filter: alpha(opacity:100);
opacity: 0;
}
.next{
width: 60px;
height: 60px;
background: url("6.png");
position: absolute;
top: 50%;
margin-top: -30px;
right: 5px;
z-index: 3001;
filter: alpha(opacity:0);
opacity: 0;
}
.small_pic{
width: 500px;
height: 78px;
background: #aeffe9;
position: relative;
left:0;
bottom:0;
overflow: hidden;
}
.small_pic ul{
width: 1000px;
height: 78px;
background: #04243d;
position: absolute;
top: 0;
}
.small_pic li{
height: 78px;
width: 125px;
float: left;
display: inline-block;
filter: alpha(opacity:0);
opacity: 0.5;
}
.small_pic li img{
width: 119px;
margin: 3px;

}
</style>
</head>
<body>
<div id="div1">
<div class="big_pic">
<ul>
<li style="z-index: 1"><img src="21.jpg" alt=""></li>
<li><img src="22.jpg" alt=""></li>
<li><img src="23.jpg" alt=""></li>
<li><img src="24.jpg" alt=""></li>
<li><img src="25.jpg" alt=""></li>
<li><img src="26.jpg" alt=""></li>
<li><img src="27.jpg" alt=""></li>
<li><img src="28.jpg" alt=""></li>
</ul>

<div class="mark_left"></div>
<div class="mark_right"></div>


<div class="prev"></div>
<div class="next"></div>

</div>
<div class="small_pic">
<ul>
<li style="filter: alpha(opacity:100); opacity: 1;"><img src="20.jpg" alt=""></li>
<li><img src="22.jpg" alt=""></li>
<li><img src="23.jpg" alt=""></li>
<li><img src="24.jpg" alt=""></li>
<li><img src="25.jpg" alt=""></li>
<li><img src="26.jpg" alt=""></li>
<li><img src="27.jpg" alt=""></li>
<li><img src="28.jpg" alt=""></li>
</ul>
</div>
</div>


<script src="move.js"></script>
<script>

window.onload = function () {
var oDiv = document.getElementById('div1');
//getByClass 返回的是数组
var oBtnPrev = getByClass(oDiv, 'prev')[0];
var oBtnNext = getByClass(oDiv, 'next')[0];

oBtnOnMouse();
oBtnOnClick();

//点击小图大图拉下切换效果层级z-index
var oDivSmall = getByClass(oDiv,'small_pic')[0];
var aLiSmall = oDivSmall.getElementsByTagName('li');
var oDivBig = getByClass(oDiv,'big_pic')[0];
var aLiBig = oDivBig.getElementsByTagName('li');

//初始化一个变量控制图层显示优先级
var nowZIndex = 1;
var now = 0;
for(var i = 0; i < aLiSmall.length; i++) {
aLiSmall[i].index = i;
aLiSmall[i].onclick = function () {
//如果显示的是当前这张,返回flase 这个函数终止
if(this.index == now) return;
//如果显示不是当前这张,那么使得当前小图等于当前大图
now = this.index;
tab();
};
aLiSmall[i].onmouseover = function () {
startMove(this, 'opacity', 100);
};
aLiSmall[i].onmouseout = function () {
//如果显示的是当前这张,返回flase 这个函数终止
if(this.index == now) return;
startMove(this, 'opacity', 50);
};
}

//oBtnOnMouse---左右按钮显示效果部分
function oBtnOnMouse() {
var oMarkLeft = getByClass(oDiv, 'mark_left')[0];
var oMarkRight = getByClass(oDiv, 'mark_right')[0];
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)
};
}

//封装--当前小图关联大图运动函数
function tab() {
var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
//每激活次函数zIndex累加使得now是优先级显示
aLiBig[now].style.zIndex = nowZIndex++;

//所有小图透明度为50%
for(var i = 0; i < aLiSmall.length; i++) {
startMove(aLiSmall[i], 'opacity', 50);
}
//this.index当前小图透明度为100
startMove(aLiSmall[now], 'opacity', 100);

//下拉效果,当前图片的Li高度初始化为零,
aLiBig[now].style.height = 0;
//运动效果
startMove(aLiBig[now], 'height', 300);

//小图区域ul移动框架
//第1张图---不移动
if(now == 0) {
startMove(oUlSmall, 'left', 0);
}
//倒数第二张图 --- 不移动
else if(now == aLiSmall.length-2) {
startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth)
}
//最后一张图 --- 不移动
else if(now == aLiSmall.length-1) {
startMove(oUlSmall, 'left', -(now-3)*aLiSmall[0].offsetWidth)
}
else {
startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth)
}
}

//点击导航大图切换
function oBtnOnClick() {
oBtnPrev.onclick = function () {
now--;
if(now == -1) {
now = aLiSmall.length-1;
}
tab();
};
oBtnNext.onclick = function () {
now++;
if(now == aLiSmall.length) {
now = 0;
}
tab();
};
}

// 自动播放即自动点击oBtnPrev.onclick加入定时器循环.
var timer = setInterval(oBtnPrev.onclick, 2000);

oDiv.onmouseover = function () {
clearInterval(timer)
};
oDiv.onmouseout = function () {
timer = setInterval(oBtnPrev.onclick, 2000)
}
};

//获取className 返回的是数组注意按数组处理
function getByClass(oParent, sClass) {
//取得所有函数
var aEle = oParent.getElementsByTagName('*');
//创建个数组容器
var aResult = [];

for(var i = 0; i < aEle.length; i++) {
if(aEle[i].className == sClass) {
//符合条件的class加入数组
aResult.push(aEle[i]);
}
}
//返回一个数组出去
return aResult;
}
</script>
</body>
</html>
--------------------------------------------------------------
move.js运动框架
/**
* Created by AC on 2017/4/2.
*/
//获取非行间样式
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle
} else {
return getComputedStyle(obj, false) [name];
}
}
//运动函数
function starMove(obj, attr, iTarget) {

clearInterval(obj.timer);
obj.timer = setInterval(move, 30);
function move() {
var current = null;

//如果传进来的样式是透明度
if(attr == 'opacity') {
//用浮点并且乘以一百变成整数 0.3*100 ==30
//Math.round 四舍五入
current = Math.round(parseFloat(getStyle(obj,attr))*100);
} else { //其他样式例如宽高等数字是整数的
current = parseInt(getStyle(obj,attr));
}

var speed = (iTarget-current) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if(current == iTarget){
clearInterval(obj.timer);
} else {
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity:'+current + speed+')';
obj.style.opacity = (current + speed)/100;

} else {
obj.style[attr] = current + speed + 'px';
}
}
}
}

阅读全文

0 0