javascript如何实现自动左滑的轮播图-创新互联
这篇文章主要介绍了javascript如何实现自动左滑的轮播图,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
创新互联是一家专业提供下陆企业网站建设,专注与成都网站制作、网站建设、HTML5建站、小程序制作等业务。10年已为下陆众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。最近做项目总是只会调用别人做好的各种插件效果,想起很久没来自己写点小插件,久了会忘记的,就赶紧来补一下,前端程序员必备,实现一个js轮播图。
html代码:
此次的小demo样例用了4张图片,由于要实现无缝衔接,即最后一张顺畅地跳转到第一张,故在写html的时候,再重复了最后一张图片,然后通过直接定位,在轮播到最后一张图片的时候,将整个ul定位到第一张,由于第一张和最后一张是一样的,故效果看起来则顺畅自然的轮播。
css代码:
*{ margin: 0; padding: 0; } .slide{ position: relative; width: 1000px; height: 500px; margin: 40px auto; overflow: hidden; } .img ul{ position: absolute; left: -1000px; width: 5000px; } .img li{ list-style-type: none; float: left; } img{ width: 1000px; height: 500px; } #num li{ list-style-type: none; background-color: white; border: 1px solid red; border-radius: 100px; float: left; width: 10px; height: 10px; margin: 10px; cursor: pointer; } #num { position: absolute; top: 450px; left: 800px; } .btn{ font-size: 30px; color: gray; } #left{ position: absolute; top: 230px; left: 40px; cursor: pointer; } #right{ position: absolute; top: 230px; right: 40px; cursor: pointer; }
css中需要注意的是定位的时候,整个外部的p是相对定位,而里面的内容ul则相对于外部p进行绝对定位,通过left,top等来设置位置
js代码:
$(document).ready(function () { initRadius(); }); var number = 1; //设置为全局变量 //轮播图图片主体 function startSlide() { dealRadius(number); if(number == 4) { number = 0; $('#slide_img').css({left: '0px'}); //处理无缝衔接图 dealRadius(0); // 处理无缝衔接小圆点的跳转 } number++; var imageLeft = -1000 * number; $('#slide_img').animate({left: imageLeft}); } var timer = setInterval(startSlide,3000); //小圆点的轮播实现 function dealRadius(num) { var lis = $('#num li'); lis.eq(num).css('background-color', 'red'); for(var i = 0; i < num; i++) { lis.eq(i).css('background-color','white'); } for(var i = num + 1; i < 4; i++) { lis.eq(i).css('background-color','white'); } } //初始化小圆点 function initRadius() { var lis = $('#num li'); lis.eq(0).css('background-color', 'red'); } //左右按钮的实现 $('#left').mousedown (function() { clearInterval(timer); if(number == 0) { $('#slide_img').css({left: '-4000px'}); number = 4; } var imageLeft = -1000 * (number-1); $('#slide_img').animate({left: imageLeft}); number--; if(number == 0) { dealRadius(3); } else { dealRadius(number-1); } }); $('#left').mouseup(function() { timer = setInterval(startSlide,3000); }); $('#right').mousedown (function() { clearInterval(timer); if(number == 4) { number = 0; $('#slide_img').css({left: '0px'}); //处理无缝衔接图 } var imageLeft = -1000 * (number+1); $('#slide_img').animate({left: imageLeft}); dealRadius(number); number++; }); $('#right').mouseup(function() { timer = setInterval(startSlide,3000); }); //小圆点的点击实现 $('#num').on('click','li',function(){ clearInterval(timer); var _number = $(this).index() + 1; number = _number dealRadius(number-1); var imageLeft = -1000 * number; $('#slide_img').animate({left: imageLeft}); timer = setInterval(startSlide,3000); });
js代码中,首先要知道关于定时器的使用,其中,关于dom的使用,好久没用啊,感觉很不熟悉。。自己得多来加强。。
感谢你能够认真阅读完这篇文章,希望小编分享javascript如何实现自动左滑的轮播图内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站标题:javascript如何实现自动左滑的轮播图-创新互联
文章转载:http://pwwzsj.com/article/doiesd.html