/*两种播放行为；（一种自动播放，一种控制播放），一个定时器控制。
*一个定时器控制两种播放状态。
* 布局说明：装图片的盒子足够宽，让图片左浮，排成一排，最后一张重新放置第一张。
* 定时器里执行自动播放行为。
* 定义一个计时器（全局），根据计时器对个数*图片的宽，让它左移，再次根据计时器%（总个数-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. ajax --- Ajax跨域请求保证同一个session的问题

    我们知道,根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求,服务 ...

  2. spring-cloud-netflix集成的服务

    1.Ribbon Ribbon is a client side IPC library that is battle-tested in cloud. It provides the followi ...

  3. 图论：Tarjan算法

    在有向图中,若两点至少包含一条路径可以到达,则称两个顶点强连通,若任意两个顶点皆如此,则称此图为强联通图.非强连通图有向图的极大强连通子图,称为强连通分量(strongly connected com ...

  4. Unix操作系统的入门与基础

    http://dev2dev.cnblogs.com/archive/2005/10/10/251894.aspx Unix操作系统的入门与基础 与大家熟悉的Windows用户界面和使用习惯不同,Un ...

  5. NOIP愤怒的小鸟

    愤怒的小鸟 Description: 给你\(n<=18\)个小猪,发射的小鸟轨迹为抛物线,求最小用多少个小鸟可以将小猪全部干掉 看到n很小,我想到了搜索,于是我用\(dfs\)枚举出,每个抛物 ...

  6. SpringBoot结合Mybatis 使用 mapper*.xml 进行数据库增删改查操作

    什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索. MyBa ...

  7. sparkR处理Gb级数据集

    spark集群搭建及介绍:敬请关注 数据集:http://pan.baidu.com/s/1sjYN7lF 总结:使用sparkR进行数据分析建模相比R大致有3-5倍的提升 查看原始数据集:通过iri ...

  8. matlab中tic和toc使用方法

    tic和toc用来记录matlab命令运行的时间.  tic用来保存当前时间,而后使用toc来记录程序完毕时间. 两者往往结合使用,使用方法例如以下: 程序代码: tic  operations  t ...

  9. HTTP请求和响应1：概述

    HTTP的报文分为请求报文和响应报文,打开一个web页面后,浏览器将发起一个HTTP请求报文.HTTPserver收到请求后将回送一个响应报文. 报文的基本结构 HTTP的请求和响应报文都由三个部分组 ...

  10. Erlang简单并行server

    Erlang简单并行服务器 (金庆的专栏) Erlang并行服务器为每一个Tcp连接创建相应的连接进程,处理client数据. 參考 Erlang程序设计(第2版)17.1.3 顺序和并行服务器 并行 ...