<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript" src="script/jquery-1.2.6.js"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg"]; $(".clickButton a").attr("href","javascript:return false;"); var times = 1; function changeImage(){ if (times == 6) { times = 1; } $(".clickButton a").removeClass("active"); $(".clickButton a:nth-child(" + times + ")").addClass("active"); $(".imgs img").attr("src",arryImgs[times-1]); times++; } var interval = window.setInterval(function(){ changeImage(); }, 1500); $(".clickButton a").each(function(index){ $(this).hover( function(){ $(".clickButton a").removeClass("active"); $(this).addClass("active"); clearInterval(interval); $(".imgs img").attr("src",arryImgs[index]); times = index+1; }, function(){ interval = window.setInterval(function(){ changeImage(); }, 1500); }); }); }) </script> <style type="text/css"> <!-- div,a{margin:0;padding:0;}img{border:0px;} .imgsBox{overflow:hidden;width:282px;height:176px;} .imgs a{display:block;width:282px;height:164px;} .clickButton{background-color:#888888;width:282px;height:12px;position:relative;top:-1px;_top:-5px;} .clickButton div{float:right;} .clickButton a{background-color:#666;border-left:#ccc 1px solid;line-height:12px;height:12px;font-size:10px;float:left;padding:0 7px;text-decoration:none;color:#fff;} .clickButton a.active,.clickButton a:hover{background-color:#d34600;} --> </style> </head> <body> <div class="imgsBox"> <div class="imgs"> <a href="#"> <img id="pic" src="images/01.jpg" width="282" height="164" /> </a> </div> <div class="clickButton"> <div> <a class="active" href="">1</a> <a class="" href="">2</a> <a class="" href="">3</a> <a class="" href="">4</a> <a class="" href="">5</a> </div> </div> </div> </body> </html>
图片轮换效果
猜你喜欢
转载自wf42988.iteye.com/blog/646077
今日推荐
周排行