zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    数据结构—链表
    python字母串查找基本操作
    python九九乘法表程序代码
    SpringMVC跨域问题排查以及源码实现
    深入理解MySql子查询IN的执行和优化
    Dubbo源码阅读-服务导出
    Disconf源码分析之启动过程分析下(2)
    Disconf源码分析之启动过程分析上(1)
    Java多线程volatile和synchronized总结
    Java多线程基础总结
  • 原文地址:https://www.cnblogs.com/xtdxs/p/6612183.html
Copyright © 2011-2022 走看看