Skocz do zawartości

Interesujący Slider

Sharki93

Przez Sharki93
w HTML i CSS

Rekomendowane odpowiedzi

Sharki93 Newbie

Sharki93

Opublikowano
Opublikowano

Witam serdecznie,

chciałbym na mojej stronie stworzyć coś w rodzaju slider'a

chodzi mi konkretnie o taki jak na stronie:

https://webd.pl/

po prawej strony nad facebookiem mają reklamę - po najechaniu myszką powiększa się

czy dysponuje ktoś takim skryptem i mógłby mi go udostępnić? :)

Pozdrawiam i z góry dziękuję

Bugno

Odnośnik do komentarza
Udostępnij na innych stronach
Sharki93 Newbie

Sharki93

Opublikowano
  • Autor
Opublikowano

ok

tylko mi chodzi o konkretny kod w którym tylko uzupełnie adres do obrazka i link :)

po prostu jestem zielony a chciałbym to mieć

dasz rade mi coś takiego tu wkleić? :)

tak żeby to się trzymało lewej strony strony :P


PS. do tego to jeździ razem ze stroną w dół :) nie stoi w miejscu tylko się przesuwa ...

Bugno

Odnośnik do komentarza
Udostępnij na innych stronach
rotel10 Newbie

rotel10

Opublikowano
Opublikowano

HTML

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>Projekt komputery</title>
<link rel="Stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/box.js" type="text/javascript"></script>

<script type="text/javascript"> 

var wlff = 1;

 </script>
 
</head>
<body>




<!-- WYSUWANY BOX Z PRAWEJ STRONY -->			
<div class="box" style="display: none">
	<div id="fimg" style="position:absolute; right: -66px; z-index:4">
		<img src="images/img/1.jpg" alt="Oscommerce" class="lcp" id="fixm" />
		<img src="images/imgbig/1.jpg" alt="Oscommerce" class="lcp" id="fixb" style="display: none" />
	</div>
</div>





</body>
</html>

CSS

html, body {
background: #454a4b;  

}




/* ===========================
 ========= BOX ==========
 =========================== */


.box{
    position: fixed;
    margin-top: 250px;
    left: 0px;
    width: 66px;
}

.lcp{ cursor: hand; cursor: pointer; }

JS

var lastid = 1;

var pinf = 0;

var intv = 0;

var myf = ["1", "2", "3", "4", "5"];  /*---  NAZWA ZDJĘCIA  ---*/



function playv(){ pinf++; if(pinf > 4) pinf = 0;
 $('#fixm').attr('src', 'images/img/' + myf[pinf] + '.jpg');/*-- LOKALIZACJA ZDJĘCIA JPG --*/
 $('#fixb').attr('src', 'images/imgbig/' + myf[pinf] + '.jpg'); }/*-- LOKALIZACJA ZDJĘCIA JPG --*/

$( document ).ready(function() {
    $('#adlcheckall2').click(function () {
        $('.dll2').find(':checkbox').prop('checked', this.checked);
    });
    var dh = $(window).height();
    $("#zwin1").click(function() {
        $('#hdiv2').hide();
        $('#sel1').removeClass('sel');
    });



    


    var t = setTimeout("SetLPBG()", 2000);

    if(wlff == 1){    
        $(".box").show();
        var pinf = 0;
        var topv1 = (dh/2) - 180;     
        var topv2 = (dh/2) - 126;        
        var topv11 = (dh/2) - 320;             
        $(".box").css({ top: topv2 + "px" });         
        $("#fimg").animate({"left": "+=66px"}, "slow");        
                
        $('#fixb').click(function() { document.location.href = '/pinf/' + myf[pinf]; });    
        $("#fimg").mouseover(function() {
            window.clearInterval(intv);
            $("#fixm").hide();
            $(".box").css({ top: topv1 + "px", left: '-16px' });
            $("#fixb").show();        
          }).mouseout(function(){
            intv = window.setInterval("playv()",4000);
            $("#fixb").hide();
            $(".box").css({ top: topv2 + "px", left: '-0px' });
            $("#fixm").show();
          });      

          intv = window.setInterval("playv()",4000);    
    }
    
});

rozmiar zdjęc 67x134 małe

duże zdjęcia 255x441

Odnośnik do komentarza
Udostępnij na innych stronach
rotel10 Newbie

rotel10

Opublikowano
Opublikowano

a jquery wstawiłeś do folderu js

<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>

albo wstaw tak

zamien to w plik , kodzie html

<script src="h t t p://code.jquery.com/jquery-1.9.1.js"></script>

powyższy link nie działa

usuń odstępy http bo jakis limit mam czy co tam wymyslili

Odnośnik do komentarza
Udostępnij na innych stronach
rotel10 Newbie

rotel10

Opublikowano
Opublikowano

zmien w html'u

<div id="fimg" style="position:absolute; left: -66px; z-index:4">

w css

left:0px;

a tu poprawiony js

var lastid = 1;

var pinf = 0;



var myf = ["1", "2", "3", "4", "5"]; 


function playv(){ pinf++; if(pinf > 4) pinf = 0;
 $('#fixm').attr('src', 'images/img/' + myf[pinf] + '.jpg');
 $('#fixb').attr('src', 'images/imgbig/' + myf[pinf] + '.jpg'); }

$( document ).ready(function() {

	var dh = $(window).height();

	if(wlff == 1){	
		$(".box").show(); 
		var topv1 = (dh/2) - 180; 	
		var topv2 = (dh/2) - 126;		
		var topv11 = (dh/2) - 320; 			
		$(".box").css({ top: topv2 + "px" }); 		
		$("#fimg").animate({"left": "+=66px"}, "slow");	
		$("#fimg").mouseover(function() {
		
			 
			$("#fixm").hide(); 
			$(".box").css({ top: topv1 + "px", right: '-16px' }); 
			$("#fixb").show();
		  }).mouseout(function(){
			$("#fixb").hide(); 
			$(".box").css({ top: topv2 + "px", right: '-0px' }); 
			$("#fixm").show();

		  });	  

		  intv = window.setInterval("playv()",4000);	
	}
	
});
Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności