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