京东轮播图

来源：互联网发布：丹爷辣椒酱淘宝编辑：程序博客网时间：2024/06/05 00:31
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body,ul,li{padding:0;margin:0;}        li{list-style-type:none;}        .wrap{            position:relative;            width:480px;            height:260px;            margin:100px auto;        }        .wrap>ul>li{position:absolute;display:none;}        /*隐藏所有的li*/        .wrap img{width:480px;height:260px;}        .wrap li:first-child{display:block;}/*显示第一个*/        .arrow{            width:480px;            height:60px;            position:absolute;            top:50%;            margin-top:-30px;            display:none;        }        .arrow>span{           font-size:24pt;            line-height:60px;            display:inline-block;            width:36px;            background-color:#CEE5E8;            text-align:center;            cursor:pointer;            opacity:0.5;            border-radius:5px;/*显示圆框*/            -webkit-border-radius:5px;            -moz-border-radius:5px;            color:black;        }        .wrap:hover .arrow{            display:block;        }        .arrow>span:last-child{            float:right;        }    </style></head><body><div class="wrap">    <!--图片部分-->    <ul>        <li>            <a href="javascript:void(0)">                <img src="images/1.jpg"/>            </a>        </li>        <li>            <a href="javascript:void(0)">                <img src="images/2.jpg"/>            </a>        </li>        <li>            <a href="javascript:void(0)">                <img src="images/3.jpg"/>            </a>        </li>        <li>            <a href="javascript:void(0)">                <img src="images/4.jpg"/>            </a>        </li>    </ul>    <!--按钮部分-->    <div class="arrow">        <span><</span>        <span>></span>    </div></div></body><script src="jquery-1.12.0.min.js"></script><script>    $(function(){        var count = 0;        function change() {            count++;            if( count == $(".wrap>ul>li").length){                count = 0;            }            $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();        }       var myTimer = setInterval(change,4000);        function reRun(){           myTimer = setInterval(change,4000);        }        /*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/        $(".arrow>span").eq(0).click(function(){            clearInterval(myTimer);            /*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/            count--;            if( count == -1){                count = $(".wrap>ul>li").length - 1;            }            $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();            setTimeout(reRun,0);            /*重新启动计时器，保证不点击按钮是能正常切换*/        });        $(".arrow>span").eq(1).click(function(){            clearInterval(myTimer);            count++;            if( count == $(".wrap>ul>li").length){                count = 0;            }       $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();            setTimeout(reRun,0);        });    });</script></html>
阅读全文
0 0