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

    在C++里面,dynamic_cast 通常用于横向转换,而不是向上或者向下的转换. 这个常常用于检查某个实例,是否实现了某个接口类,那么就把这个实例,用dynamic_cast来转换成这个接口类的实 ...

  2. vue29-vue2.0组件通信_recv

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 异常Exception

    try…catch…finally恐怕是大家再熟悉不过的语句了,而且感觉用起来也是很简单,逻辑上似乎也是很容易理解.不过,我亲自体验的“教训”告诉我,这个东西可不是想象中的那么简单.听话.不信?那你看 ...

  4. Android控件-TabHost（二）

    这边再补充一种更为灵活的方法,可以把TabWidget隐藏,用(RadioGroup+RadioButton)来代替,并利用监听器的方式来实现监听点击点击跳转Activity. 在讲解之前,先补充几点 ...

  5. UESTC 1599 wtmsb

    这天,AutSky_JadeK看到了n张图片,他忍不住说道:“我TM社保!”. 每张图片有一个社保值,他可以合并两张图片,合并所得的图片的社保值是原来两张图片的社保值之和. 每次合并需要消耗的体力也是 ...

  6. 在Windows下如何创建指定的虚拟环境

    前几天给大家分享了如何在默认的情况下创建虚拟环境,没来得及上车的伙伴,可以戳这篇文章:在Windows下如何创建虚拟环境(默认情况下).今天小编给大家分享一下,如何创建的指定的Python环境. 创建 ...

  7. 关于IDEA无法完整显示项目文件结构

    今天发现一个奇怪的问题,就是我从本地导入了文件,明明已经成功了,但是在我的项目结构里面就是不显示,然而点击目录, 又能打开相应的文件,如图所示: 其实这个打开的只是包文件,只需要如下图操作即可:

  8. js中split,splice,slice方法之间的差异。

    首先我们先来林格斯双击翻译一下: split  劈开, 使分裂: splice   接合; 使结合: slice  切成薄片, 切: 我先是这么区分的:这三个方法最后一个字母是t的是字符串方法,是e的 ...

  9. Chrome OS 70 发布：这是安卓的私生子吗？

    谷歌于28日正式宣布推出Chrome OS 70.这个最新的Chrome OS系统在一些设计上具备了更多安卓风味,为配备了触摸屏的Chromebook.平板电脑和二合一设备带来了操作界面改善. 据9t ...

  10. pwd---以绝对路径的方式显示用户当前工作目录

    pwd命令以绝对路径的方式显示用户当前工作目录.命令将当前目录的全路径名称(从根目录)写入标准输出.全部目录使用/分隔.第一个/表示根目录,最后一个目录是当前目录.执行pwd命令可立刻得知您目前所在的 ...