我的定位：中高级人才（框架熟练、Java语法精通、数据库会用、Linux会用、中间件会用、有大数据经验！）
开始，我以为自己什么都知道。后来发现，其实我什么都不知道。

jQuery - 广告图片轮播切换

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            /*创建一个集合保存图片*/
            var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
            var  flag=0;  /*代表数组的下标*/
            /*点击向左的按钮*/
            $(".arrowLeft").click(function(){
                var i=0;
                if(flag==0){
                    flag=imgs.length-1;
                    i=flag+1;  /*图片的编号 li中的值*/
                }else{
                    flag--;
                    i=flag+1;  /*图片的编号*/
                }
                $(".adver").css("background","url(images/"+imgs[flag]+")");
                $("li:nth-of-type("+i+")").css("background","orange");
                $("li:nth-of-type("+i+")").siblings().css("background","#333333");
            });
            /*点击向右的按钮*/
            $(".arrowRight").click(function(){
                var i=0;
                if(flag==imgs.length-1){
                    flag=0;
                    i=flag+1;  /*图片的编号*/
                }else{
                    flag++;
                    i=flag+1;  /*图片的编号*/
                }
                $(".adver").css("background","url(images/"+imgs[flag]+")");
                $("li:nth-of-type("+i+")").css("background","orange");
                $("li:nth-of-type("+i+")").siblings().css("background","#333333");
            });

            /*显示→   ← 的按钮*/
            $(".adver").hover((function(){
                $(".arrowRight").show();
                $(".arrowLeft").show();
            }),function(){
                $(".arrowRight").hide();
                $(".arrowLeft").hide();
            })
        })
    </script>
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"></div><div class="arrowRight"></div>
</div>
</body>
</html>
html+js

 

style.css

 

posted @ 2017-03-24 16:37  想太多先森  阅读(764)  评论(0)  编辑  收藏  举报