仿FLASH的图片轮换效果

最新推荐文章于 2018-07-19 16:31:47 发布

bangxionger9224

最新推荐文章于 2018-07-19 16:31:47 发布

阅读量96

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/theWayToAce/p/5268138.html

版权

css布局代码(test.css)：

body {
background: #ccc;
}

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(img/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(img/btn.gif) no-repeat;
position: absolute;
top: 130px;
left: 10px;
z-index: 3001;
filter: alpha(opacity:0);
/**隐藏，相当于display：none*/
 opacity: 0;
cursor: pointer;
}

.big_pic .next {
width: 60px;
height: 60px;
background: url(img/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(img/loading.gif) no-repeat center center;
cursor: pointer;
filter: alpha(opacity=60);
opacity: 0.6;
}

.small_pic img {
width: 120px;
height: 94px;
}

封装好的js代码：


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);
}

html代码：


　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>仿FLASH的图片轮换效果 </title>
 <link rel="stylesheet" type="text/css" href="test.css">
 <script src="test.js"></script>
 <script type="text/javascript">
function getByClass(oParent, sClass) {
var aEle = oParent.getElementsByTagName("*");//选择元素
 var aResult = [];//存储选出来的结果
 for (var i = 0; i < aEle.length; i++) {
if (aEle[i].className == sClass) {//如果选出了的第i个元素等于传进来的参数
 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];


var oDivSmall = getByClass(oDiv, "small_pic")[0];//根据全局选择小图
 var aLiSmall = oDivSmall.getElementsByTagName("li");
var oUlSmall = oDivSmall.getElementsByTagName("ul")[0];

var oUlBig = getByClass(oDiv, "big_pic")[0];//根据全局选择大图
 var aLiBig = oUlBig.getElementsByTagName("li");


var nowZindex = 2;//此变量为了保证将要显示大图的索引足以让它显示在最前方
 var now = 0;//此变量为了防止重复点击图片重复显示

 oUlSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + "px"; //小图无缝滚动

 //左右按钮
 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);
　　　　}
　　　　
　　　　//大图切换
for (var i = 0; i < aLiSmall.length; i++) {
aLiSmall[i].index = i;//小图的索引，为了控制大图的索引一致来改变对应的Z-index
 aLiSmall[i].onclick = function () {
if (this.index == now) return;//此条件成立则不执行其后面代码
 now = this.index;
tab();

 };

//小图淡入淡出

 aLiSmall[i].onmouseover = function () {
startMove(this, "opacity", 100);
 };
aLiSmall[i].onmouseout = function () {
if (this.index != now) {//此判断为了保证当前显示大图对应的小图常亮
 startMove(this, "opacity", 60);
 }
 };
}//for结束

 function tab() {
aLiBig[now].style.zIndex = nowZindex++;

for (var i = 0; i < aLiSmall.length; i++) {
startMove(aLiSmall[i], "opacity", 60);
 }
startMove(aLiSmall[now], "opacity", 100);

aLiBig[now].style.height = 0;//为了图片从上到下显示，所以图片高度设置为0 再拉大
 startMove(aLiBig[now], "height", 320);//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);
 }
 }

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>
</head>

<body>
<div id="playimages" class="play">
 <ul class="big_pic">

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

 <div class="text">加载图片说明……</div>
 <div class="length">计算图片数量……</div>

 <a class="mark_left" href="javascript:;"></a>
 <a class="mark_right" href="javascript:;"></a>

 <div class="bg"></div>

 <li style="z-index:1;"><img src="img/1.jpg"/></li>
<!-- Z-index：1，为了保证点击小图对应的大图显示在最前面 -->
 <li><img src="img/2.jpg"/></li>
 <li><img src="img/3.jpg"/></li>
 <li><img src="img/4.jpg"/></li>
 <li><img src="img/5.jpg"/></li>
 <li><img src="img/6.jpg"/></li>
 </ul>
 <div class="small_pic">
 <ul style="width:390px;">
 <li style="filter: 100; opacity: 1;"><img src="img/1.jpg"/></li>
 <li><img src="img/2.jpg"/></li>
 <li><img src="img/3.jpg"/></li>
 <li><img src="img/4.jpg"/></li>
 <li><img src="img/5.jpg"/></li>
 <li><img src="img/6.jpg"/></li>
 </ul>
 </div>
</div>

</body>
</html>

运行结果简要展示：

转载于:https://www.cnblogs.com/theWayToAce/p/5268138.html

bangxionger9224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿FLASH的图片轮换效果

css布局代码(test.css)：body { background: #ccc;}ul { padding: 0; margin: 0;}li { list-style: none;}img { border: 0;}.play { width: 400px; height: 430px; margin: 50px auto 0...
复制链接

扫一扫