2020-10-5服装商城首页轮播图，收缩菜单，左右切换，滚动

这次学习的还是服装商城的效果图，展示 轮播图，点击切换的效果：

$(function(){ $(".num li").bind("click onmouseover",function () { var index=$(this).index(); $(".slider").animate({ "top":(-150) * index+"px" }); $(this).addClass("on").siblings().removeClass("on"); }) }) <div class="ad"> <ul class="slider"> <li><img src="images/ads/1.gif" /></li> <li><img src="images/ads/2.gif" /></li> <li><img src="images/ads/3.gif" /></li> <li><img src="images/ads/4.gif" /></li> <li><img src="images/ads/5.gif" /></li> </ul> <ul class="num"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>

滚动图展示：

$(function(){ setInterval(function(){ $(".scrollNews li:first").remove().appendTo($(".scrollNews ul")); },1000) })

左右切换展示：

$(function () { var page = 1; var i = 4; var len = $(".prolist_content ul li").length; var page_count = Math.ceil(len / i); var none_unit_width = $(".prolist").width(); var $parent = $(".prolist_content"); //右按钮 $(".goRight").click(function () { if (!$parent.is(":animated")) { if (page == page_count) { $parent.animate({ left: 0 }, 800); page = 1; } else { $parent.animate({ left: '-=' + none_unit_width }, 800); page++; } } }); //左按钮 $(".goLeft").click(function () { if (!$parent.is(":animated")) { if (page == 1) { $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); page = page_count; } else { $parent.animate({ left: '+=' + none_unit_width }, 800); page--; } } }); });

效果图： 标签点击收放

//衬衫卫衣裤子 $(function () { $(".m-treeview > li").click(function () { var c=$(this).attr("class"); if(c=="m-collapsed") $(this).attr("class","m-expanded"); else if(c=="m-expanded") $(this).attr("class","m-collapsed"); }) })

div里

<ul class="m-treeview"> <li class="m-expanded"> <span>衬衫</span> <ul> <li><span>短袖衬衫</span></li> <li><span>长袖衬衫</span></li> </ul> </li> <li class="m-expanded"> <span>卫衣</span> <ul> <li><span>开襟卫衣</span></li> <li><span>套头卫衣</span></li> </ul> </li> <li class="m-expanded"> <span>裤子</span> <ul> <li><span>休闲裤</span></li> <li><span>免烫卡其裤</span></li> <li><span>牛仔裤</span></li> <li><span>短裤</span></li> </ul> </li> </ul>

效果图： 完了学习了这么多！