zoukankan      html  css  js  c++  java
  • 点击按钮切换图片

    很久没更了,因为我处于javaScript迷茫期了,我不知道怎样才算将javaScript学的很好,看了好几本书,打了下基础,基本的结构差不多可以清楚地知道,但是javascript代码没有css html直接,就算你你错了你也不知道哪里错了,很忧伤的事情,希望又看到这篇博文的人能给我一些建议。
    然后最近就是去做一些页面培养一下整体的页面设计的感觉。结果我就碰到的轮播这个动态效果,看了很多人写的代码,然后理解别人的思想在试着自己敲。下面是一个自己敲得点击一个按钮就会切换图片的代码,之后还会更新轮播的代码。
    21:44:35
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#banner_list a:not(:first-child)").hide(); var n = $("#banner_choose").length; $("#banner_list a img").click(function () { window.open($("#banner_list a").attr("href"), "_blank"); }); $("#banner_choose li ").click(function () { var i = $(this).text() - 1; $("#banner_list a").filter(":visible").fadeOut(50).parent().children().eq(i).fadeIn(500); $(this).toggleClass("on"); $(this).siblings().removeClass("on"); $("#banner_list li ") }); }); </script>
    <div id="banner">
        <div id="banner_list">
            <a href="#" target="_blank"><img src="2.1.png" title="oo" name="oo" alt="那些让人失控的烘焙甜品"> </a>
            <a href="#" target="_blank"><img src="2.2.png" title="oo" name="oo" alt="妈妈的爱心早餐表"> </a>
            <a href="#" target="_blank"><img src="2.3.png" title="oo" name="oo" alt="春季必吃的滋补食物"> </a>
            <a href="#" target="_blank"><img src="2.4.png" title="oo" name="oo" alt="十里桃花 灼灼芳华"> </a>
            <a href="#" target="_blank"><img src="2.5.png" title="oo" name="oo" alt="食物挂起海洋风"> </a>
            <a href="#" target="_blank"><img src="2.6.png" title="oo" name="oo" alt="信手拈来的排毒好物"> </a>
        </div>
        <ul id="banner_choose">
            <li class="on"><a>1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
            <li><a>6</a></li>
        </ul>
    
    </div>
      <style>
            #banner {
                width: 990px;
                height: 400px;
                border: 1px solid #ffaf0f;
            }
    
            #banner_list {
                width: 990px;
                height: 360px;
            }
    
            #banner_choose {
                width: 950px;
                height: 40px;
                border: 1px solid #6f4f67;
                position: relative;
                top: -18px;
                background: #000000;
                filter: Alpha(Opacity=40);
                opacity: 0.2
            }
    
            #banner_choose li {
                list-style: none;
                float: left;
                text-align: center;
                margin: 10px 5px;
                border: 1px solid #ffaf0f;
                width: 20px
            }
    
            #banner_choose li a {
                line-height: 20px;
                color: white
            }
    
            .on {
                background-color: #528CE0
            }
        </style>
    推荐一部javascript的书《javascrip权威指南》很重基础 ,很多不懂得看他会觉得很明了,有代码的讲解等等
    另一种形式:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                background: #fff;
            }
    
            .box {
                 1000px;
                height: 400px;
                margin: 100px auto
            }
    
            .imgBox {
                border: 1px solid #3CF;
                 990px;
                height: 400px;
                position: relative
            }
    
            .imgBox img {
                border: none
            }
    
            .imgBox .all {
                display: none
            }
    
            /*图片隐藏*/
            .imgBox a.cur_img {
                display: inline-block
            }
    
            /*第一张图片显现*/
            .title_bg {
                 990px;
                height: 40px;
                position: relative;
                bottom: 40px;
                left: 0px;
                background-color: #000;
                filter: Alpha(Opacity=80);
                opacity: 0.4
            }
    
            .imgId {
                 990px;
                height: 40px;
                position: relative;
                bottom: 110px;
                left: 10px;
            }
    
            .imgId ul {
                height: 40px;
                 980px;
            }
    
            .imgId li {
                display: inline;
                z-index: 9999;
                list-style: none;
                 20px;
                height: 20px;
                color: #fff;
            }
    
            .imgId ul li a {
                display: inline-block;
                 20px;
                height: 20px;
                border: 1px solid #6f4f67;
                background: #999;
                color: #FFFFFF;
                font-weight: bold;
                text-decoration: none;
                text-align: center;
            }
    
            .imgId .cur_id {
                background: #ffaf0f;
            }
    
            .imgId li a:hover {
                color: #FFF;
            }
    
            #title {
                display: block;
                height: 40px;
                line-height: 40px;
                text-decoration: none;
            }
    
            #title:visited {
                color: #fff;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="imgBox">
            <a href="" title="" class="cur_img  all"><img src="2.1.png"></a>
            <a href="" title="" class="all"><img src="2.2.png"></a>
            <a href="" title="" class="all"><img src="2.3.png"></a>
            <a href="" title="" class="all"><img src="2.4.png"></a>
            <a href="" title="" class="all"><img src="2.5.png"></a>
            <a href="" title="" class="all"><img src="2.6.png"></a>
        </div>
        <div class="title_bg"></div>
        <div class="img_title"><a href="" id="title">这是题目</a></div>
        <div class="imgId">
            <ul>
                <li><a href="javaxriopt:void(0);" class="cur_id">1</a></li>
                <li><a href="javaxriopt:void(0);">2</a></li>
                <li><a href="javaxriopt:void(0);">3</a></li>
                <li><a href="javaxriopt:void(0);">4</a></li>
                <li><a href="javaxriopt:void(0);">5</a></li>
                <li><a href="javaxriopt:void(0);">6</a></li>
            </ul>
        </div>
    </div>
    
    </body>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var time = 2000;
            var curImgId = 0;
            var intervalId = setInterval(imgToggle, time);
            $(".img_title a").text($(".cur_img").attr("tittle"));
            $(".img_title a").attr("title", $(".cur_img").attr("title"));
            $(".img_title a").attr("href", $(".cur_img").attr("href"));
            $(".imgId a").click(function () {
                clearInterval(intervalId);
                $(".cur_img").css({display: "none"});
                $(".cur_img").removeClass("cur_img");
                $(".imgBox a").eq($(".imgBox a").index($(this))).fadeIn("slow");
                $(".imgBox a").eq($(".imgId a")).index($(this)).addClass("cur_img");
                $(".cur_id").removeClass("cur_id");
                $(this).addClass("cur_id");
                change();
                intervalId = setInterval(imgToggle, time);
            });
            $(".img_title a").click(function () {
                alert($(this).attr("href"));
            });
            $(".imgBox img").click(function () {
                alert($(this).parent().attr("href"));
            });
            function imgToggle() {
                curImgId = $(".imgId a").index($(".cur_id"));
                $(".imgBox .all").css({display: "none"});
                $(".cur_img").removeClass("cur_img");
                if (curImgId == $(".imgId a").length - 1) {
                    curImgId = 0;
                } else {
                    curImgId += 1;
                }
                $(".imgBox a").eq(curImgId).fadeIn("slow");
                $(".imgBox a").eq(curImgId).addClass("cur_img");
                $(".cur_id").removeClass("cur_id");
                $(".imgId a").eq(curImgId).addClass("cur_id");
                change();
            }
    
            function change() {
                $(".img_title a").attr("title", $(".cur_img").attr("title"));
                $(".img_title a").text($(".cur_img").attr("title"));
                $(".img_title a").attr("href", $(".cur_img").attr("href"));
            }
        });
    </script>
    </html>
    
    
    

      

     
  • 相关阅读:
    怎么查看京东店铺的品牌ID
    PPT编辑的时候很卡,放映的时候不卡,咋回事?
    codevs 1702素数判定2
    codevs 2530大质数
    codevs 1488GangGang的烦恼
    codevs 2851 菜菜买气球
    hdu 5653 Bomber Man wants to bomb an Array
    poj 3661 Running
    poj 1651 Multiplication Puzzle
    hdu 2476 String Painter
  • 原文地址:https://www.cnblogs.com/html-css-js/p/6637048.html
Copyright © 2011-2022 走看看