一个简单轮播案例
2015-12-02 15:11
429 查看
一个轮播案例
css样式
is代码
siblings()具体用法:
<section class="banner-container"> <figure class="full box"> <ul> <li> <img class="img1" src="/img/teach/one-font.png"> <img class="img2" src="/img/teach/one-computer.png"> </li> <li> <img class="img1" src="/img/teach/two-font.png"> <img class="img2" src="/img/teach/two-book.png"> </li> <li> <img class="img2" src="/img/teach/three-pink.png"> <img class="img1" src="/img/teach/three-font.png"> </li> <li> <img class="img1" src="/img/teach/four-zhu.png"> <img class="img2" src="/img/teach/four-font.png"> </li> </ul> <!--<p class="prev"></p> <p class="next"></p>--> </figure> <div class="control"> <ul class="clear"> <li class="bg"></li> <li></li> <li></li> <li></li> </ul> </div> </section>
css样式
.banner-container { position: relative; background: url(../img/teach/bj.jpg) no-repeat;//很大的一张作为背景图 width: 100%; height: 777px; } .box { overflow: hidden; position: relative; } .box ul li { height: 777px; width: 1000px; position: relative; overflow: hidden; } .box ul li .img1 { position: absolute; left: -1000px; top: 0px; } .box ul li .img2 { position: absolute; left: -15px; top: 0px; display: none; } .banner-container .control { width: 200px; height: 14px; position: absolute; bottom: 20px; left: 50%; margin-left: -100px; } .control ul li { cursor: pointer; position: relative; width: 16px; height: 16px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; /*behavior: url(../csspie/PIE.htc);*/ background: #00655a; float: left; margin-right: 10px; } .control ul .bg { background: white; }
is代码
var i = -1; var time=null; junmper(); function junmper(){ i++; if(i>3) i=0; $(".control ul li").eq(i).addClass("bg").siblings().removeClass("bg"); $(".box ul li").eq(i).fadeIn(400).siblings().hide(); $(".box ul li").eq(i).find(".img1").css({left:"-1000px"}); $(".box ul li").eq(i).find(".img2").css({display:"none",left:"2000px"}); $(".box ul li").eq(i).find(".img1").animate({left:"0px"},800,function(){ $(".box ul li").eq(i).find(".img2").css("display","block"); $(".box ul li").eq(i).find(".img2").animate({left:"0px"},800); }); }; time=setInterval(junmper,3700); $(".control ul li").click(function(){ i=$(this).index(); $(".control ul li").eq(i).addClass("bg").siblings().removeClass("bg"); $(".box ul li").eq(i).show(400).siblings().hide(); $(".box ul li").eq(i).find(".img1").css({left:"-1000px"}); $(".box ul li").eq(i).find(".img2").css({display:"none",left:"2000px"}); $(".box ul li").eq(i).find(".img1").animate({left:"0px"},800,function(){ $(".box ul li").eq(i).find(".img2").css("display","block"); $(".box ul li").eq(i).find(".img2").animate({left:"0px"},800); }); }) $(".control ul li").hover(function(){ clearInterval(time); },function(){ time=setInterval(junmper,3700); }); 其中siblings()取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
siblings()具体用法:
HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div").siblings() 结果: [ <p>Hello</p>, <p>And Again</p> ] 描述: 找到每个div的所有同辈元素中带有类名为selected的元素。 HTML 代码: <div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> jQuery 代码: $("div").siblings(".selected") 结果: [ <p class="selected">Hello Again</p> ]
相关文章推荐
- 网页二维码推广App的实现
- 数据结构之 哈希表
- slf4j-api、slf4j-log4j12以及log4j之间什么关系?
- MIRO字段控制
- Android动画_AlphaAniamtion
- Hadoop-web日志信息挖掘MapReduce简单应用以及代码下载
- diff python2 python3
- 判断字符串是否为数字
- 数据结构之 哈希表
- 1099. Build A Binary Search Tree (30)
- [Win32]一个调试器的实现(三)异常
- Informatica - Audit Scripts
- 【剑指offer】之不用加减乘除做加法
- String.format详解
- 网页浏览过程
- 数据结构之 循环表线性表
- Android学习笔记——五大基本布局+AbsoluteLayout
- css3弹性盒子
- Create an ASP.NET web app in Azure App Service
- ubuntu搭建pyqt5开发环境