轮播图默认轮播点击原点显示图片
前端  /  管理员 发布于 5年前   526
<div id="sb_yd"> <div class="lbt"> <div class="lbt_a"><a href=""><img src="xxx1.jpg" alt=""></a></div> <div class="lbt_a"><a href=""><img src="xxx2.jpg" alt=""></a></div> </div> <ul> <li class="dj_yd" style="position: absolute;width: 5px;height: 5px;z-index: 999; background: #666;top: 10px;left:48%;padding: 5px 5px;"></li> <li class="dj_yd" style="position: absolute;width: 5px;height: 5px;z-index: 999; background: #666;top: 10px;left:50%;padding: 5px 5px;"></li> </ul> </div> <script type="text/javascript"> //轮播图 var num=0; function run(){ $(".lbt_a").eq(num).fadeIn().siblings().fadeOut(); $(".dj_yd").eq(num).css("background","red").siblings().css("background","#fff"); num++; if (num==$(".lbt_a").length) { num=0; } } time = setInterval(run,3000); //选中圆点 $(".dj_yd").stop().click(function(event){ num=$(this).index(); run(); clearInterval(time); }); //移进/出图片 $('#sb_yd').stop().hover(function() { clearInterval(time); }, function() { time = setInterval(run,3000); } ); </script>
效果图就不贴了;
最近在做一个手机版公益网站,现在在写前端模版跟效果,blog更新这类的功能案例比较多
路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试,免费ssr是没那么稳..mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了,youtobe无法打开网页,是怎么回事..张伟 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q!有用,不过免费节点隔天就要去git上复制新的导进去..博主 在
科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了,告知大家,免的老有老铁问我!..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号