jQuery商城焦点图广告轮播

1、新建html文档。

3、书写hmtl代艨位雅剖码。<div id="slider"> <ul 艘早祓胂class="slider_list"> <li><a href="#"><img src="img/59e5df51Na34c52da.jpg"></a></li> <li><a href="#"><img src="img/59e6f772Nde97ca5e.jpg"></a></li> <li><a href="#"><img src="img/59e8ab7dN48b529e7.jpg"></a></li> <li><a href="#"><img src="img/59e89be7N0031c258.jpg"></a></li> <li><a href="#"><img src="img/59e980a2Nc4314079.jpg"></a></li> <li><a href="#"><img src="img/59ed6dd8Ncaee86ed.jpg"></a></li> <li><a href="#"><img src="img/59e99072N4baea8f3.jpg"></a></li> <li><a href="#"><img src="img/598abe52Nb1c8cfe4.jpg"></a></li> </ul> <div class="slider_icon"> <i class="btn btn_act"></i> <i class="btn"></i> <i class="btn"></i> <i class="btn"></i> <i class="btn"></i> <i class="btn"></i> <i class="btn"></i> <i class="btn"></i> </div> <a href="javascript:;" class="arrow prve"> <span class="slider_left"></span> </a> <a href="javascript:;" class="arrow next"> <span class="slider_right"></span> </a></div>

5、书写并添加js代码。<script src="js/jquery-1.11.3.min.js"></script><script>$(function(){ var count = 0; var $li = $("#slider>ul>li"); $(".next").click(function(){ count++; if(count == $li.length){ count =0; } $li.eq(count).fadeIn().siblings().fadeOut(); $(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act'); console.log(count); });</script>

7、查看效果。