HTML
<!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> <link rel="stylesheet" type="text/css" href="master.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <div class="container"> <div class="ad"> <ul class="img"> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> </ul> <ul class="spot"> <li class="native"></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> <html>
CSS
body,ul,li{margin: 0px;padding: 0px} .container{position: relative;width: 100%;padding-top: 20px;} .ad{position: relative;} .img{position: relative; z-index:1; width: 368px;height: 368px;margin: auto;border: 1px solid #ccc;} .img li{position: absolute;display: block;} .spot{position: absolute; z-index: 3; bottom: 20px; width:100%; text-align: center; border: none;} .spot li{position: relative; display: inline-block; margin: 0 15px; width: 10px; height: 10px; border: 1px solid #ccc; border-radius: 5px; list-style: none;} .spot .native{background-color: red} p{text-align: center;}
Js
$(document).ready(function(){ (function(){ var imgLi=$('.img').find('li'); var spotLi=$('.spot').find('li'); var iNow=0; var timer=null; autoPlay(); spotLi.hover(function(){ clearInterval(timer); iNow=$(this).index(); fnFade(); },function(){ autoPlay(); }); function autoPlay(){ timer=setInterval(function(){ iNow++; iNow %= 4; fnFade(); },2000); } function fnFade(){ imgLi.each(function(i){ if(i!=iNow){ imgLi.eq(i).stop().fadeOut().css('z-index','1'); spotLi.eq(i).removeClass('native'); }else{ imgLi.eq(i).stop().fadeIn().css('z-index','2'); spotLi.eq(i).addClass('native'); } }); } })(); });