輪播圖-(jQuery方法)
阿新 • • 發佈:2018-11-10
<!DOCTYPE html> <html> <head> <title>notebook</title> <meta charset="utf-8"> <style type="text/css"> *{ margin:0; padding:0; list-style: none; } .v_show li{ float:left; } .content{ width: 480px; height: 300px; position:absolute; overflow: hidden; } .v_show{ width:1920px; position: absolute; } img{ width: 480px; height: 300px; } .radiu{ position: absolute; z-index: 100; top:260px; left:180px; } .radiu > span{ display: inline-block; width: 10px; height:10px; background-color: blue; margin:0 10px; border-radius: 10px; background-color: #fff; text-indent: -99999px; } .radiu >span.current{ background-color:green; width:40px; } button{opacity:0.7;width: 0px;height: 0px; border-radius:40px;border:40px solid black; } </style> <script type="text/javascript" src="jquery-1.4.2.js"></script> </head> <body> <div class="content"> <div class="v_show"> <ul> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> </div> <div class="radiu"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <button type="button" style="position:absolute;top:110px;left:-40px;" id="left_btn"></button> <button type="button" style="position: absolute;top:110px;left:440px;" id="right_btn"></button> </div> </body> <script> var $content=$(".content") $content.offset({top:(innerHeight-$content.height())/2,left:(innerWidth-$content.width())/2}); var $radiu=$(".radiu"); var $span= $radiu.find("span"); var page=2; var key=true; var timer; var $v_show=$(".v_show"); var v_show_width=$v_show.width(); function change(){ $span.eq(page-1).addClass("current").siblings().removeClass("current"); $v_show.stop(true,false) .animate({left:"-"+(page-1)*$content.width()},200,function(){ if(key){clearTimeout(timer); timer=setTimeout(function(){page++;if(page==5)page=1;change();},3000);} } ); } $span.hover(function(){ clearTimeout(timer); page=parseInt(this.innerHTML); key=false; change(); },function(){key=true;change();}); $("#left_btn").click(function(event){ clearTimeout(timer); if(page==1)page=4; else page--; key=false; change(); event.stopPropagation(); event.preventDefault(); }).hover(function(){ clearTimeout(timer); },function(){key=true;change();}); $("#right_btn").click(function(){ clearTimeout(timer); if(page==4)page=1; else page++; key=false; change(); }).hover(function(){ clearTimeout(timer); },function(){key=true;change()}); </script> </html>