/*两种播放行为；（一种自动播放，一种控制播放），一个定时器控制。
*一个定时器控制两种播放状态。
* 布局说明：装图片的盒子足够宽，让图片左浮，排成一排，最后一张重新放置第一张。
* 定时器里执行自动播放行为。
* 定义一个计时器（全局），根据计时器对个数*图片的宽，让它左移，再次根据计时器%（总个数-1）修改当前显示的提示标识。
* 通过标识控制行为。
* 当触发标识时，清除上述的定时器，根据计时器产生左移运动，同时修改当前的标识，再次开启定时器执行自动播放行为。
* */

~(function() {

　　var $banner = $(".banner");

　　var timer = setInterval(autoSwipe,3000);

　　var tag = 1;

　　//$banner.find("a").eq(0).children("img").addClass("activeA");

　　function autoSwipe(){

　　　　if(tag == 8){

　　　　　　$banner.css({'margin-left':'0px'});

　　　　　　tag = 1;

　　　　}

　　　　$banner.animate({'margin-left':-tag*1920},1000);

　　　　$('.banActive>li>p').removeClass('bannerActive');

　　　　$('.banActive>li').eq(tag%7).find("p").addClass('bannerActive');

　　　　tag++;

　　}

　　$('.banActive>li>p').on({'mouseover':hoverSwipe });

　　function hoverSwipe() {

　　　　clearInterval(timer);

　　　　$('.banActive>li>p').removeClass('bannerActive');

　　　　$(this).stop().addClass('bannerActive');

　　　　tag = $(this).parent().index();

　　　　$banner.stop().animate({ 'margin-left':-tag*1920},2000);

　　　　timer = setInterval(autoSwipe,3000);

　　}

})();

<<<<<<============== 透明度 轮播图的总结 ===============>>>>>>

<!-- 透明度--轮播解析：
布局说明： 给图片盒子相对定位，下面的子元素绝对定位。并且设置z-index=0,opacity=0;设置层叠定位和透明度。添加修饰的过度。transition属性。
js 控制：
遍历控制切换图片的标识，修改当前的z-index的值和透明度。
-->

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body,ul{margin:0;padding:0;}

li{ list-style:none;}

img{ vertical-align:top; border:none;}

/*#list{ position:relative; height:400px; -webkit-mask:url(../mask.png) center;}*/

#list{ position:relative; height:400px;}

#list li{position:absolute;width:100%; left:0;top:0; z-index:0; opacity:0; -webkit-transition:0.7s opacity ease;-o-transition:0.7s opacity ease;-moz-transition:0.7s opacity ease;}

#list li:nth-child(1){ z-index:1; opacity:1;}

/*#list a{ display:block; height:400px; background:url(img/1.jpg) no-repeat center 0;}

#list li:nth-of-type(2) a{ background:url(img/2.jpg) no-repeat center 0;}

#list li:nth-of-type(3) a{ background-image:url(img/3.jpg);}

#list li:nth-of-type(4) a{ background-image:url(img/4.jpg);}

#list li:nth-of-type(5) a{ background-image:url(img/5.jpg);}*/

#list a{ display:block; height:400px;}

.footer{background:url(img/scroll_bg.png);}

.footer_c{ width:825px; margin:0 auto;height:76px; position:relative;}

.pic_list{ position:absolute;left:0;top:0;}

.pic_list li{ float:left; margin:5px 10px;width:145px;height:65px;background:#000;}

#active{ position:absolute;left:8px;top:3px; width:145px;height:65px; border:2px solid #FF780D; background:url(img/arrow_on.png) no-repeat center 0; -webkit-transition:0.7s left ease;-o-transition:0.7s opacity ease;-moz-transition:0.7s opacity ease;}

body{ min-width:825px;}

</style>

<script>

window.onload=function() {

var oList=document.getElementById("list");

var oBtns=document.getElementById("btns");

var aBtns=oBtns.getElementsByTagName("li");

var aLi=oList.getElementsByTagName("li");

var oActive=document.getElementById("active");

var iZindex=1;

var i=0;

var iNow=0;

for(i=0;i<aBtns.length;i++)

{

aBtns[i].index=i;

aBtns[i].onmouseover=function()

{

iZindex++;

aLi[this.index].style.zIndex=iZindex;

aLi[iNow].style.opacity=0;

aLi[this.index].style.opacity=1;

iNow=this.index;

oActive.style.left=this.offsetLeft-2+"px";

};

}

};

</script>

</head>

<body>

<ul id="list">

<li><a href="#"><img src="img/1.jpg" alt=""></a></li>

<li><a href="#"><img src="img/2.jpg" alt=""></a></li>

<li><a href="#"><img src="img/3.jpg" alt=""></a></li>

<li><a href="#"><img src="img/4.jpg" alt=""></a></li>

<li><a href="#"><img src="img/5.jpg" alt=""></a></li>

</ul>

<div class="footer">

<div class="footer_c">

<ul class="pic_list" id="btns">

<li><img src="img/smail_1.gif" /></li>

<li><img src="img/smail_2.gif" /></li>

<li><img src="img/smail_3.gif" /></li>

<li><img src="img/smail_4.gif" /></li>

<li><img src="img/smail_5.gif" /></li>

</ul>

<div id="active"></div>

</div>

</div>

</body>

</html>

js-轮播图的总结的更多相关文章

  1. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  2. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  3. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  4. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  6. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  7. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  8. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  9. 第六十八天 js轮播图

    1.浮动与定位结合使用 浮动与相对定位 //1.两者均参与布局 //2.主浮动布局,相对布局辅助完成布局微调 //3.相对定位布局微调不同于盒模型布局微调,相对定位布局不影响盒子原有位置,就会影响兄弟 ...

  10. 原生的js轮播图

    图片会照常循环播放,当然也可以通过按钮来进行切换,当切出当前的页面时,等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态. HTML部分: <html> < ...

随机推荐

  1. Exchange2003迁移2010DAG的权限问题

    exchange2010无法删除用户.在2010的控制台中新建一个通讯组.然后将它删除就会报告下面错误. MicrosoftExchange 错误:无法对对象"test"执行&qu ...

  2. tp5项目搭建思路

    按照需求,创建主体的目录结构,一般包括管理后台admin,前台展示index,app接口api. admin中又包含controller,model,view,其他等等. 一些js,css,image ...

  3. 今天了解了些redis和memcached的知识

    提取于http://www.cnblogs.com/wupeiqi/articles/5132791.html 感谢博主 使用Redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于Hash ...

  4. POJ 3265 DP

    思路: f[i][j]表示前i天能做j道题 (是做 不是做完) if(f[i-1][k]) if(suma[j]-suma[k]+g[i-1][k]<=n) f[i][j]=1,g[i][j]= ...

  5. C#初学者使用file.creat()创建文件后，显示正由另一进程使用

    string sourcePhotoPath = this.GetUserSelectedPhoto(); if(sourcePhotoPath == null) { return; } string ...

  6. ZOJ 3175 Number of Containers 分块

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3216 乱搞的...watashi是分块做的...但我并不知道什么是分块...大 ...

  7. JS的解析与执行过程—函数预处理

    声明:之所以分为全局预处理与函数预处理,只是为了理解方便,其实在实际运行中二者是不分先后的. 函数预处理阶段与全局预处理的差别: 函数每调用一次,就会产生一个LexicalEnviroment对象,在 ...

  8. 【 正确使用vim编辑器的姿势】

    vi:可视化接口(Visual Interface) vim:是vi的增强版(vi iMprove) vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样 ...

  9. MD5解密（常用语登录密码加密）

    http://pmd5.com/

  10. 与TCP/IP协议的初次见面(一)

    与TCP/IP协议的初次见面(一) 前言 今下午刚才女朋友那边回来,唉,算是情人节去找她吧,穷屌丝住不起好酒店,住的打折酒店,只是女朋友来姨妈了,万幸啊,牙还疼得不行,这几天光照应她了,没空写博客了. ...