您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要为大家展示了jquery如何实现简单自动轮播图,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
代码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author" content="Jxz"> <title></title> <script src="../jquery-3.1.1.js"></script> <style> ul,li{ margin: 0; padding: 0; list-style: none; } #box{ width: 520px; height: 280px; margin: 100px auto; position: relative; } #box .list li{ position: absolute; top: 0; left: 0; display: none; } #box .list li.current{ display: block; } #box .count{ position: absolute; left: 10px; bottom: 10px; } #box .count li{ float: left; width: 20px; height: 20px; border-radius: 50%; background-color: #fa0; text-align: center; line-height: 20px; margin-left: 10px; color: #fff; opacity: 0.8; cursor: pointer; } #box .count li.current{ background-color: #f60; opacity: 1; } #box .btn{ position: absolute; bottom:10px; right: 15px; } #box .btn li{ width: 50px; height: 50px; background-color: #ccc; float: right; margin-left: 15px; opacity: 0.8; cursor: pointer; text-align: center; line-height: 50px; } </style> </head> <body> <div id="box"> <ul class="list"> <li class="current"><img src="img/01.jpg" alt=""></li> <li><img src="img/02.jpg" alt=""></li> <li><img src="img/03.jpg" alt=""></li> <li><img src="img/04.jpg" alt=""></li> <li><img src="img/05.jpg" alt=""></li> </ul> <ul class="count"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="btn"> <li class="right">></li> <li class="left"><</li> </ul> </div> </body> </html> <script> // var aLi=$('.list li'); // var aNum=$('.count li'); // 记录当前显示的图片的索引 var current=0; // 保存定时器 var timer=null; timer=setInterval(autoPlay,1000) // 自动播放 function autoPlay(){ current<$('.count li').length-1?current++:current=0; show() } function show(){ // aLi.hide() $('.list li').hide() .eq(current).show(); // aNum.removeClass() // .eq(current).addClass('current') $('.count li').eq(current).toggleClass('current').siblings().removeClass('current'); } // 手动 $('.count li').mouseenter(function(){ current=$(this).index() show() }) // 按钮控制选图 $('#box .left').click(function(){ current>0?current--:current=4; show() }) $('#box .right').click(function(){ current<$('.count li').length-1?current++:current=0; show() }) // 鼠标进图自动暂停 $('#box').hover(function(){ clearInterval(timer); },function(){ timer = setInterval(autoPlay,1000); }) </script>
以上就是关于jquery如何实现简单自动轮播图的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。