<!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>无标题文档</title>
<style>
html,body,ul,img{margin:0;padding:0;color:#fff;}
body{background:#666;}
img{border:none;}
li{list-style:none;}
#playImages{width:400px;height:430px;background:#CCC;margin:50px auto;font:12px Arial;}
#big_images{width:400px;height:320px;position:relative;}
#big_images .prev,#big_images .next{position:absolute;top:131px;width:60px;height:58px; filter:alpha(opacity=0);opacity:0;z-index:101;}
#big_images .prev{left:10px;background:url(images/left_btn.jpg);}
#big_images .next{right:10px;background:url(images/right_btn.jpg);}
#big_images .mark{position:absolute;bottom:0;left:0;width:400px;height:30px;background:#000;filter:alpha(opacity=50);opacity:0.5;z-index:102;}
#big_images .text,#big_images .number{position:absolute;top:9px;z-index:102;}
#big_images .text{left:0;}
#big_images .number{right:0;} #big_images .mark_left,#big_images .mark_right{position:absolute;top:0;width:200px;height:320px;filter:alpha(opacity=0);opacity:0;cursor:pointer;z-index:100;}
#big_images .mark_left{left:0;}
#big_images .mark_right{right:0;}
#big_images li{width:400px;height:320px;overflow:hidden;position:absolute;}/*①*/
#big_images .active{z-index:1;}
#big_images img{width:400px;height:320px;} #small_images{width:400px;height:110px;position:relative;overflow:hidden;}
#small_images ul{position:absolute;height:110px;overflow:hidden;}
#small_images li{float:left;padding-top:7px;padding-left:10px;filter:alpha(opacity=30);opacity:0.3;}
#small_images img{width:120px;height:96px;}
#small_images .active{filter:alpha(opacity=100);opacity:1;} /*说明:①/*需要加上绝对定位后面使用z-index才生效,这里只有加上overflow,height下拉渐变效果才能显示出来,因为在运动的过程中height是一点点变的,其他的部分需要隐藏才能显示出下拉渐变这种效果*/
*/
</style>
<script src="move.js"></script>
<script>
function getClassName(oParent,sClass){
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className == sClass){
aResult.push(aEle[i]);
}
}
return aResult;
} window.onload = function(){
var oDiv = document.getElementById('big_images');
var oBtnPrev = getClassName(oDiv,'prev')[0];
var oBtnNext = getClassName(oDiv,'next')[0];
var oMarkLeft = getClassName(oDiv,'mark_left')[0];
var oMarkRight = getClassName(oDiv,'mark_right')[0];
var bigUl = oDiv.getElementsByTagName('ul')[0];
var bigLi = bigUl.getElementsByTagName('li');
var oSmallDiv = document.getElementById('small_images');
var smallUl = oSmallDiv.getElementsByTagName('ul')[0];
var smallLi = oSmallDiv.getElementsByTagName('li'); var smallText = getClassName(oDiv,'text')[0];
var smallNumber = getClassName(oDiv,'number')[0];
var arrPicture =['图片一','图片号','图片3']; var iNow = 0;
var imageZindex = 2;
smallUl.style.width = (smallLi[0].offsetWidth*smallLi.length)+'px'; init();
var timer = null;
clearInterval(timer);
timer = setInterval(function(){
iNow++;
if(iNow == smallLi.length){
iNow = 0;
}
tab();
},3000);
//上面的左右按钮
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<smallLi.length;i++){
smallLi[i].index = i;
smallLi[i].onmouseover = function(){
startMove(this,'opacity',100);
};
smallLi[i].onmouseout = function(){
if(this.index != iNow){
startMove(this,'opacity',30);
}
}; smallLi[i].onclick = function(){
if(iNow == this.index){
return;
}
iNow = this.index;
tab();
};
} oBtnPrev.onclick = function(){
iNow--;
if(iNow == -1){
iNow = smallLi.length-1;
}
tab();
}; oBtnNext.onclick = function(){
iNow++;
if(iNow == smallLi.length ){
iNow = 0;
}
tab();
}; function init(){
smallText.innerHTML = arrPicture[iNow%arrPicture.length];
smallNumber.innerHTML = iNow+1+'/'+smallLi.length;
} function tab(){ for(var j=0;j<smallLi.length;j++){
startMove(smallLi[j],'opacity',30);
bigLi[iNow].style.zIndex = 1;
}
startMove(smallLi[iNow],'opacity',100);
bigLi[iNow].style.zIndex = imageZindex++;
bigLi[iNow].style.height = 0;
startMove(bigLi[iNow],'height',320);
if(iNow ==0){
startMove(smallUl,'left',0);
}else if(iNow == smallLi.length-1){
startMove(smallUl,'left',-(iNow-2)*smallLi[0].offsetWidth)
}else{
startMove(smallUl,'left',-(iNow-1)*smallLi[0].offsetWidth);
}
init();
} }; </script>
</head> <body>
<div id='playImages'>
<div id='big_images'>
<span class='prev'></span>
<span class='next'></span>
<div class="mark">
<span class='text'>图片正在加载……</span>
<span class='number'>计算图片数量……</span>
</div>
<a class='mark_left' href='javascript:;'></a>
<a class='mark_right' href='javascript:;'></a>
<ul>
<li class='active'><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>
<li><img src = 'images/7.jpg'></li>
</ul>
</div>
<div id='small_images'>
<ul>
<li class ='active'><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>
<li><img src = 'images/7.jpg'></li>
</ul>
</div>
</div>
</body>
</html>

仿flash实现图片轮换播放的更多相关文章

  1. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  2. JS 阶段练习~ 仿flash的图片轮换效果

    结合了所学的简单运动框架~  做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName  IE低版的兼容性 2.DOM不够严谨 … 各种 ...

  3. js图片轮换播放器

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  4. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  5. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  6. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  7. salesforce 零基础学习(六十一)apex:component简单使用以及图片轮转播放的实现

    有的时候,我们项目有可能有类似需求:做一个简单的图像轮转播放功能,不同的VF页面调用可以显示不同的图片以及不同的图片描述.这种情况,如果在每个页面单独处理相关的图像轮转播放则显得代码特别冗余,此种情况 ...

  8. js实现图片向上播放(轮番滚动)

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  9. JavaScript之图片轮换

    <!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...

随机推荐

  1. Java后台及Jsp前端的简单分页_学习笔记

    在你需要导出显示大量列表时,在一页中都显示出来,是不美观页不实用的.在这种时候,就需要设置一个分页来显示你的内容,如百度的分页: 分页分为:前段分页和后端分页 后端分页: 首先我们应该确定,我们要分页 ...

  2. 为什么jdk1.8 HashMap的容量一定要是2的n次幂

    一.jdk1.8中,对“HashMap的容量一定要是2的n次幂”做了严格控制 1.默认初始容量: [Java] 纯文本查看 复制代码 ? 1 2 3 4 /**  * The default init ...

  3. 国产ROM纷争升级 能否诞生终结者?

    能否诞生终结者?" title="国产ROM纷争升级 能否诞生终结者?"> 相比iOS系统的低硬件高流畅,安卓系统就显得"逼格"低了许多.先不说 ...

  4. UnitTest测试框架-操作步骤

    一.UnitTest 1. TestCase 说明:测试用例 1.新建类并集成unittest.TestCase 2. TestSuite 说明:测试套件(多条用例) 方法: 1. 实例化 suite ...

  5. (六)mybatis-spring集成完整版

    mybatis-spring集成完整版 一.项目整体 mybatis接口层.mapper层 Service层 Test调用测试 二.自动生成代码-mybatis generator 主要修改: 接口. ...

  6. HexoC++第04课 构造析构.md

    C++第04课 构造析构.mdhtml {overflow-x: initial !important;}#write, body { height: auto; } #write, #write h ...

  7. mysql 系列错误解决

    参考文章来源 https://segmentfault.com/a/1190000015678751 https://blog.csdn.net/Tong_zhi/article/details/84 ...

  8. js 四舍五入实现

    js Number.prototype.toFixed 进行的舍入的算法没研究明白,应该不是四舍六入五成双,当然也不是四舍五入 下面是chrome与excel的对比 修改完之后的结果 对于“问题数据” ...

  9. API网关Kong

    官网:https://konghq.com/ 各种方式安装汇总:https://konghq.com/install/ 命令列表:https://docs.konghq.com/0.14.x/admi ...

  10. Stock Starer股票盯盘

    一个业余小项目,用于监控指定股票的成交指标,触发事件的主动通知 源码 !https://github.com/jeffchen81/stock-starer 设计说明 场景 定时任务1:通过网上Ope ...