/*两种播放行为；（一种自动播放，一种控制播放），一个定时器控制。
*一个定时器控制两种播放状态。
* 布局说明：装图片的盒子足够宽，让图片左浮，排成一排，最后一张重新放置第一张。
* 定时器里执行自动播放行为。
* 定义一个计时器（全局），根据计时器对个数*图片的宽，让它左移，再次根据计时器%（总个数-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. [LeetCode]Single Number 异或的妙用

    1.数组中仅仅有一个元素仅仅出现一次,其余出现偶数次. 利用异或中同样元素相互抵消的方式求解. 2.数组中仅仅有2个元素仅仅出现一次.其余出现偶数次. class Solution { public: ...

  2. Android设计模式（十二）－－抽象工厂模式

    问题: 抽象工厂模式,是一个,狠恶心的模式,那么这个模式在Android有没实用到过呢? 1.定义: 抽象工厂模式:为创建一组相关或者是相互依赖的对象提供一个接口,而不须要指定他们的详细类. 2.使用 ...

  3. How to search Installed Updates

    Windows本身的控制面板中自带的搜索,无法根据补丁编号进行搜索 可以将补丁信息导出到文本,再用文本编辑器进行查找 https://www.concurrency.com/blog/w/search ...

  4. Android开发之蓝牙(Bluetooth)操作(一)--扫描已经配对的蓝牙设备

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一. 什么是蓝牙(Bluetooth)? 1.1  BuleTooth是目前使用最广泛的无线通信协议 1.2  主要针对短距离设备通讯(10m) ...

  5. 流量数据iftop命令

    yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel tar zxvf iftop-0.17.tar.gz cd ift ...

  6. excel2007去掉方括号及里面的

    获取括号外面的 b2=LEFT(A1,FIND("[",A1)-1) 获取括号里面的 =MID(A2,FIND("(",A2)+1,(FIND(")& ...

  7. Linux常用浏览器

    1.火狐浏览器是一个安全高效的浏览器,它具有速度快.隐私保护.丰富的插件资源.不同设备之间同步数据.分页浏览.个性化定制等特性. 2.谷歌浏览器 谷歌浏览器是一个由Google公司开发的网页浏览器,具 ...

  8. node.学习笔记（关于http2的讲解)

    个人总结:读完这篇文章需要30分钟 http2部分很有学习价值,可以好好看.  用node搭建TCP服务器 用node搭建HTTP服务器 用node文件fs模块对文件读取,并用流的方式写入 用url路 ...

  9. 参考《Python数据处理》中英文PDF+源代码

    在实际操作中掌握数据处理方法,比较实用.采用基于项目的方法,介绍用Python完成数据获取.数据清洗.数据探索.数据呈现.数据规模化和自动化的过程.主要内容包括:Python基础知识,如何从CSV.E ...

  10. whereis---定位指令的二进制程序、源代码文件和man手册页等相关文件的路径。

    whereis命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径. whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件 ...