13518219792
这篇文章主要介绍了javascript如何实现自动左滑的轮播图，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
最近做项目总是只会调用别人做好的各种插件效果，想起很久没来自己写点小插件，久了会忘记的，就赶紧来补一下，前端程序员必备，实现一个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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
