Tekil Mesaj gösterimi - javascript ile slider otomatik geçiş?(ücretli-ücretsiz)

Konu javascript ile slider otomatik geçiş?(ücretli-ücretsiz)

14-07-2014, 16:29:16

meraba arkadaşlar bi projemde google mapsı slider olarak göstermem gerek
herşey tamam fakat slider otomatik geçiş yaptıramadım

normalde mouseenter kısmı(satır 27) yani üstüne gelince mapsde değişmesini istiyo bende istiyorumki li taglarına hover classı eklendiğinde mapdede değişim olsun yani ücretiyle çözerim diyen ücreti pm atsın.

<!DOCTYPE html>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
	<title>Google Map Slider</title>
	<link rel='stylesheet' type='text/css' href='css/style.css' />
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
	<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
	<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
	<script type='text/javascript'>
  
   $(function() {
    
      var chicago = new google.maps.LatLng(41.924832, -87.697456),
          pointToMoveTo, 
          first = true,
          curMarker = new google.maps.Marker({}),
          $el;
      
      var myOptions = {
          zoom: 10,
          center: chicago,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      
      var map = new google.maps.Map($("#map_canvas")[0], myOptions);
    
      $("#locations li").mouseenter(function() {
      
        $el = $(this);
                
        if (!$el.hasClass("hover")) {
        
          $("#locations li").removeClass("hover");
          $el.addClass("hover");
        
          if (!first) { 
            
            // Clear current marker
            curMarker.setMap(); 
            
            // Set zoom back to Chicago level
            // map.setZoom(10);
          }
          
          // Move (pan) map to new location
          pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
          map.panTo(pointToMoveTo);
          
          // Add new marker
          curMarker = new google.maps.Marker({
              position: pointToMoveTo,
              map: map,
              icon: "images/marker.png"
          });
          
          // On click, zoom map
          google.maps.event.addListener(curMarker, 'click', function() {
             map.setZoom(14);
          });
          
        
          first = false; 
        }
        
      });
      
      $("#locations li:first").trigger("mouseenter");
      

	
	
	});
function animasyon(){
i = parseInt($('#xx').html());
$("#locations li").removeClass("hover");
$("#locations li:eq("+i+")").addClass("hover"); 
//zz();
i ++;
if(i>3){
i = 0;
}

$('#xx').html(i);

setTimeout("animasyon();", 2000); 
}
setTimeout("animasyon();", 2000); 	

	</script>
	<script language="javascript" type="text/javascript">
	window.onresize = function (e){
		var myWidth = 0, myHeight = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			myWidth = window.innerWidth;
			myHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			myWidth = document.documentElement.clientWidth;
			myHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			myWidth = document.body.clientWidth;
			myHeight = document.body.clientHeight;
		}
		$("#map_canvas").css("width",myWidth);
		$("#map_canvas").css("height",myHeight);
	}
	</script>
<!--<script>

function animasyon(){
i = parseInt($('#xx').html());
$("#locations li").removeClass("hover");
$("#locations li:eq("+i+")").addClass("hover"); 
//zz();
i ++;
if(i>3){
i = 0;
}
zz();
$('#xx').html(i);

setTimeout("animasyon();", 2000); 
}
setTimeout("animasyon();", 2000); 
</script>-->
</head>

<body>
<div id="xx">0</div>
<div id="page-wrap">
	<ul id="locations">
	   
		<li data-duration="2000" data-geo-lat="41.9786" data-geo-long="-87.9047">
			<h3>O'Hare Airport</h3>
			<p>Flights n' stuff</p>
			
		</li>
        
		<li data-duration="2000" data-geo-lat="41.927118" data-geo-long="-87.697621">
			<h3>Bueno Terra</h3>
			<p>World-class Italian</p>	
		</li>
        
		<li data-duration="2000" data-geo-lat="41.921735" data-geo-long="-87.664688">
			<h3>Pequod's Pizza</h3>
			<p>Unique pan-style pizza</p>
		</li>
        
		<li data-duration="2000" data-geo-lat="41.927568" data-geo-long="-87.705201">
			<h3>The Rocking Horse</h3>
			<p>Nice bar</p>
		</li>  
	</ul>
	<div id="map_div"><div id="map_canvas"></div></div>
	
</div>
	
</body>

</html>