一个简单轮播案例

来源：互联网发布：java split 去除空格编辑：程序博客网时间：2024/06/06 08:29

一个轮播案例

<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> ]

0 0