четверг, 18 июня 2026 г.

CSS3 Image Slider

1 2 3 4 5

 

 Вставляем в шаблон блога:

<script src='https://foglia2008.narod.ru/slaid_shou/Shadowbox.js' type='text/javascript'/>
    <script type='text/javascript'>
Shadowbox.init();
</script>
    
    <style type='text/css'>
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:&quot;HelveticaNeue-Light&quot;,&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLVNr2Qo7RobaiBu1AMqqxS9fLutc80PSaurShMbJnZmj4BB39QKUYTS5VW_FEeOUjRMJ7cS2E7FJuXloM0jw0Xc0-URcOwk_FIkdk2UeQhCvoigZSX41PBf0kPEw1LdeZUf6/s1600/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAshPWM9Dtpb7bT0ecym_7mn5L9K-Rhc8Mu97lgKq9eN3VNfN1vIFKpzYJnDCGxQDSQVyffkf1VnO1pvpgSyoQ_O8PH1Y_SxBQdFZhgTON-ExchCcmB1PoeITMkVXtFLMJ57z9/s1600/close.p);}
#sb-nav-next{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg52IVziW_T7FFwuvr3-tRUDLuIeiePb_b_gRSiB9ZeS_inNtZA85J8102xqbg8bMyI-VgFQhBNmGIDaRWGiWcFBdWdKItf_4o0QXd7Dbe2FKZHAAATkWiwmhx6TGNv6mQkgtKH/s1600/next.png);}
#sb-nav-previous{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG64Rr4ErwFta3XNWv3rN2mHfPngbE_2pSpsZZ-xtna8fN2prwtW5Xoj6kmGgLumGW31TwVv1UwHCNzgTv-17PXLjcp_UJW6yYbQOOM1H_tdvni8SV5kKGXsvXt2sLTT8DiUEB/s1600/previous.png);}
#sb-nav-play{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMgblJfPQNTt0VfbTNwy2ICJvbzTXb2tXYQ11fjNT_Htk3D2q-nlVb_S9mlYTWRISOItJeLEERP7OeV3NkXkzl5WC3GJrh_w6WHxAhpVVI0YCBibA_95U3BV-i18mNWPWbY4i/s1600/play.png);}
#sb-nav-pause{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWQDbDrw2UFfiPQi9TLl8RRsgkkmU5MOD_7APbGjITOBUUFrRhi7G7S8Cc5ofbanJMRfeuo2yG2fPtok8GK_K8zDHodjYjzRsgqX-spSUbpNWzPtVxn0Vj8MM0aAWAvIX_fBd/s1600/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
</style>

 

Вставляем в поле сообщения:

<style>
body {
    font: 13px/18px Arial,Verdana,Helvetica,sans-serif;
}
#images {
    width: 800px;
    margin: 20px auto;
    text-align: center;
}
header {
    margin-bottom: 20px;
}
h1 {
    color: #3E4415;
    font-size: 20px;
    font-weight: normal;
}
footer {
    margin-top: 30px;
    clear: both;
    display: block;
}
#images {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
    
    margin: 20px auto;
}
#images img {
    width: 600px;
    height: 400px;
    
    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;
    
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
    opacity: 1;
}
#slider1 a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider1 a:hover {
    background: #C6E4F2;
}
</style>

<section>
        <div id="images">
            <img id="image1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAj_jtegMPKk-0QqLIeoSilO_WUUJFoMcIQ50BwAjXke9QphLBbdQ2u0XAcgWW8oCRN4wCudJG1rIKZQLTQXRw_3sE6Q7xfTYcZIOKMnde094NMzOCmmKnd7KFkCiKz-fH4Q8_pWoKks5-QNp9tt5uzea-OKd8UWlMUL23Z1yQ_gQ3RpSH8E5V8Ei1ok/w640-h427/_DSC7251_22.jpg" />
            <img id="image2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbndvNuJdavm2Bvvz1RCeDtc8jHISAe4WKjQKsIZ_A0Zmh5xFdOHbg89KqphXzdlgVDN22VtwKQN_VmZL-SGaf7Et6LTxgtY1LIrGtiE8dvWZCDa3ZGGO94DCVq2xeDU572_vdza3cNm5bDx323rm_KWNtI8t-tCRTw2qezS4-bmNIWgRhsTOrkTarQr0/w640-h426/_DSC6753_15.jpg" />
            <img id="image3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGisBkpI3lnlTTxLLHdvdwVAWvcPb0CO9ISssj6_uo2XBZQhWTDveESLrNaf31bds1Nc_p2gsuyxkUhqp8mMRy2DME8uNL1E8YCteH8W_nYsWznYp2c2Exf-hgBj_S0POk3raAXpdjjCqSJICeEymXf5JdUU2cA8dKQHtZ5supak64WFumoQH9r2LG6aw/w640-h480/_DSC3922_20.jpg" />
            <img id="image4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TcIxLJwCmTgpd0UzwQChLZZ6vaL4qqXEaYnYoML8hnmNz9Qbl4sBGkTBJW3br3AMoYeDmefIIHAhiiNvIXF4WpylcMfFgl7r82gEmQeVA25zpF2OUodKGj7I-ZChIg4e1fqUXwHamys7qi6AjRShU8gHbrgo0NStjjTnpZ7rP4pfRhGhQtg-oWT64Lg/w640-h452/_DSC4760_20.jpg" />
            <img id="image5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1GM2NUJWEVGHSpuNWv965dTyNifZ4eUAtnDAHxxTcuAxuo8P92olfczNQPM-D9XHBGmr1jRcVySaS_5CvpCx4rlrkKemRNh36hdHTGzWZCmq_2SKW5PBrFgtwZ4UeCYJAwmCqwIy7fOZHZwRRxqs2ImCOhrbapGI1xU1c8Lwyjr-l1D5gGa1rZ1gj9g/w640-h428/_DSC8039_20.jpg" />
        </div>
        <div id="slider1">
            <a href="#image1">1</a>
            <a href="#image2">2</a>
            <a href="#image3">3</a>
            <a href="#image4">4</a>
            <a href="#image5">5</a>
        </div>
    <section></section></section><p>


Комментариев нет:

Отправить комментарий