下一個上一個預覽滑塊導航

Question

我有平面設計，我希望編寫HTML和jquery代碼。 當我將鼠標懸停在下一個箭頭以顯示上一張幻燈片或上一張箭頭以顯示上一張幻燈片時，我需要為導航箭頭上的滑塊編碼，如何在HTML和java腳本或jquery方面進行更多信息請查看圖像在我的設計上。

這是我嘗試過的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>


        .prev, .next{
            background-color: #000000;
            padding: 12px;
            width: 60px;
            float: left;
            cursor: pointer;
        }
        .prev-content{
            background-color: beige;
            padding-left: 8px;
            width: 200px;
            float: left;
            height: 92px;
            display: none;
            font-family: sans-serif;
        }

        .next-content{
            background-color: beige;
            padding-left: 8px;
            width: 200px;
            float: left;
            height: 92px;
            margin-top: -37px;
/*            display: none;*/
            font-family: sans-serif;
        }

        .con{
            position: absolute;
            left: 0px;
            top:40%;
        }

        .con-next, .next-content{
            position: absolute;
            right: 0px;
            top:40%;
        }
        .prev-content img, .next-content img{
            float: left;
            margin-right: 7px;
        }


    </style>

    <title>Siyandza ELP</title>
</head>

<body>
    <div class="con">
        <div class="prev">
            <img src="images/left-arrow.png" />
        </div>
        <div class="prev-content">
            <p><img src="images/image.png" width="40"/> Previous<br />Learning Object Title<br />PDF</p>
        </div>        
    </div><!-- end prev prev -->

    <!-- SCRIPTS **********************-->
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>

    <script type="application/javascript">

        $(".prev").hover(function(){
            $('.prev-content').show();
            },function(){
                $('.prev-content').hide();
            });


    </script>
<!--    <script src="js/sandile.js" type="text/javascript"></script>-->
</body>

</html>

謝謝

Answer 1

你真的不必使用任何JavaScript來實現這個目標。 只需在你的css標簽之間添加它。

.con:hover .prev-content{ display:block}

箭頭和內容都保留在同一個容器中。 因此，無論何時將鼠標懸停在該容器上，都會顯示.prev-content。

使用CSS進行這類交互可以極大地提高網站的性能。 您使用的腳本越多，您的網站就越重。

Answer 2

這里是使用純javascript的基本功能

  function setScr (){ imageLeft.setAttribute("src",imageArray[i-1]); sliderWrapper.style.backgroundImage = 'url(' + imageArray[i] + ')'; imageRight.setAttribute("src",imageArray[i+1]); } var i=0, main = document.querySelector("main"), imageArray =["http://placekitten.com/500/200","http://placekitten.com/501/200","http://placekitten.com/500/201","http://placekitten.com/499/200","http://placekitten.com/400/600"], sliderWrapper= document.createElement("figure"), sliderArrowLeft = document.createElement("div"), sliderArrowRight = document.createElement("div"), imageArrayLength = imageArray.length, imageLeft = document.createElement("img"), imageRight= document.createElement("img"), figureLeft = document.createElement("figure"), figureRight= document.createElement("figure"); sliderWrapper.classList.add("slider-wrapper"); sliderArrowLeft.classList.add("sliderArrowLeft","arrow"); sliderArrowRight.classList.add("sliderArrowRight","arrow"); imageLeft.setAttribute("src","undefined"); imageRight.setAttribute("src",imageArray[i+1]); figureLeft.appendChild(imageLeft); figureRight.appendChild(imageRight); sliderArrowLeft.appendChild(figureLeft); sliderArrowRight.appendChild(figureRight); sliderWrapper.appendChild(sliderArrowLeft); sliderWrapper.appendChild(sliderArrowRight); main.appendChild(sliderWrapper); sliderWrapper.style.backgroundImage = 'url(' + imageArray[i] + ')'; document.querySelectorAll(".arrow").forEach(function(e){ e.addEventListener("click", function(){ console.log(imageArray[i-1],i,imageArray[i+1]); if(this.classList.contains("sliderArrowLeft") && i > 0){ i--;setScr () }if(this.classList.contains("sliderArrowRight") && i < imageArrayLength -1){ i++;setScr () }else{return false} }, false); });

 *{box-sizing:border-box;padding: 0; margin: 0;} .slider-wrapper{ width: 650px; height: 320px; margin: 20px auto; position: relative; background: #ebebeb; background-size:cover; border: 2px solid brown } .arrow img[src="undefined"]{ opacity:0 } .sliderArrowRight{ right: 0; } .sliderArrowLeft, .sliderArrowRight{ position: absolute; width: 80px; height: 100px; top: 50%; margin-top: -50px; background: black; background-size:cover; cursor:pointer; transition: all .3s ease; overflow:hidden } .sliderArrowLeft figure, .sliderArrowRight figure, .sliderArrowLeft:hover, .sliderArrowRight:hover{ width: 250px; } .sliderArrowLeft figure, .sliderArrowRight figure{ position: relative; top:0; display: block; height: 100% } .sliderArrowLeft figure{ float: left } .sliderArrowRight figure{ float: right } .sliderArrowLeft img, .sliderArrowRight img{ position: relative; width: 120px; height: 80px; } .sliderArrowLeft img{ margin: 10px 0 0 116px; } .sliderArrowRight img{ margin: 10px 0 0 12px; }

 <main></main>

現在你可以玩溢出：隱藏

下一個上一個預覽滑塊導航

問題描述

2 個解決方案

解決方案1
0 2016-06-13 13:17:26

解決方案2
0 已采納 2016-06-13 16:20:09

下一個上一個預覽滑塊導航

問題描述

2 個解決方案

解決方案1 0 2016-06-13 13:17:26

解決方案2 0 已采納 2016-06-13 16:20:09

解決方案1
0 2016-06-13 13:17:26

解決方案2
0 已采納 2016-06-13 16:20:09