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

    //: Playground - noun: a place where people can play import Cocoa class Person { var residence: Resi ...

  2. AFNetworking框架的使用

    #import "ViewController.h" #import "AFNetworking.h" @interface ViewController () ...

  3. html 笔记2

    .css重用 <style> 如果整个页面的宽度 > 900px时: { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div ...

  4. 我在看着你呢——shiro学习

    说实话开学第一周效率并不高.项目该结的都差不多结了,看来这毛病我是养成了.项目忙的要死的时候,想休息想停一停就不断往下扔包袱.一下没项目了开学了,反倒开始手痒,捉摸着写点什么代码.马上我的小mac就要 ...

  5. selenium 窗口句柄之间的切换

    以前使用selenium时都是在单窗口的模式下,本次新增多窗口下的窗口之间切换 from selenium import webdriver from selenium.webdriver.commo ...

  6. WebAssembly学习(六)：AssemblyScript - 限制与类型

    一.限制 将无类型的JavaScript编译为WebAssembly没有意义,因为它最终会导致运行其中较慢的一个JavaScript. 相反,AssemblyScript专注于WebAssembly擅 ...

  7. 【Linux下禁用rm命令之建立回收站】

    第一步 创建回收站目录 # 根据自己的习惯,找个位置创建一个用作回收文件的目录 # 我们这里将在root目录下面创建一个名为".trash"的隐藏文件 [root@fedora ~ ...

  8. 紫书 例题 9-5 UVa 12563 ( 01背包变形）

    总的来说就是价值为1,时间因物品而变,同时注意要刚好取到的01背包 (1)时间方面.按照题意,每首歌的时间最多为t + w - 1,这里要注意. 同时记得最后要加入时间为678的一首歌曲 (2)这里因 ...

  9. 解决spring-boot启动中碰到的问题：Cannot determine embedded database driver class for database type NONE(转)

    问题 如下: 2017-07-16 08:50:57.436  INFO 13524 --- [           main] c.p.p.web.PointshopWebApplication   ...

  10. cogs 184. [USACO Oct08] 搭建篱笆

    184. [USACO Oct08] 搭建篱笆 ★★   输入文件:quad.in   输出文件:quad.out   简单对比时间限制:1 s   内存限制:128 MB 勤奋的农夫约翰想要修建一个 ...