您的位置：首页 > Web前端 > JavaScript

js制作简单的轮播图

2017-06-21 09:30 211 查看

实现原理

首先定义一个div，设置width和height，然后在这个div里面再定义一个div2，该div的宽度为父div的宽度的n倍，其中n表示图片的张数，在这个div2里面放置需要进行轮播的所有图片，设置每张图片的宽度为一个最外层父类div的宽度，高度都是相同的

然后使用js定义一个轮播的函数，每指定时间执行一次轮播函数，通过使用js提供的时间片来实现。轮播函数的思路为：在js外部定义一个全局变量remain，初始化值为0，即表示当前的图片的索引，然后在轮播函数里面对remain变量进行自增，再通过remain来设置要到达的图片的left偏移量，在这里需要对remain进行溢出判断

最后在最外层div元素里面再次定义一个与div2同级的div21，用于定义点击的圆形按钮。并设置点击事件，为了点击方便，在每个圆形按钮标签中定义一个data-index属性，指定所点击对应的图片的索引位置。在这里，圆心按钮标签我们使用span标签，然后通过设置它的border和border-radius来画出圆形按钮，在按钮事件函数中，同样是通过remain来设置要到达的图片的left偏移量，不过不是自增，而是修改成对应的data-index的值，同时需要注意的是：在按钮点击事件中，我们应该要清除自动轮播的时间片，以防止发生碰撞，影响视觉体验和效果

代码实现

页面布局

<div class="carousel">
<div class="list">
<img src="images/carousel/car1.jpg" />
<img src="images/carousel/car2.jpg" />
<img src="images/carousel/car3.jpg" />
<img src="images/carousel/car4.jpg" />
</div>
<div id="buttons">
<span data-index="0" class="on"></span>
<span data-index="1"></span>
<span data-index="2"></span>
<span data-index="3"></span>
</div>
</div>

css样式设置

.carousel{
position: relative;
top: 51.4px;
width: 1348px;
height: 500px;
overflow: hidden;
opacity: 0;
transition: opacity .7s linear;
}
.carousel .list{
width: 5392px;
height: 500px;
position: absolute;
left: 0px;
transition: all .5s ease-out;
}
.carousel .list img{
float: left;
width: 1348px;
height: 500px;
}
#buttons {
position: absolute;
left: 660px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}
#buttons span {
float: left;
margin-right: 5px;
width: 15px;
height: 15px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons .on {
background: orangered;
}

js核心代码

$(function(){

/**
* 指定点击进入对应图片轮播页面
*/
$.fn.clickpic = function(){
window.clearInterval(lunbo);
var index = $(this).data("index");
curindex = index;
var curleft = curindex * -1345;
$(".list").css("left",curleft+"px");
lunbo = window.setInterval($.fn.carousel, 2500);
$(".carousel div#buttons span.on").removeClass("on");
$(this).addClass("on");
};
$(document).on("click",".carousel div#buttons span",$.fn.clickpic);

/**
* 每三秒轮播一次
*/
var curindex = 0;
$.fn.carousel = function(){
curindex++;
if(curindex == 4){
curindex = 0;
}
var curleft = curindex * -1345;
$(".carousel div#buttons span.on").removeClass("on");
$(".carousel div#buttons span[data-index='"+curindex+"']").addClass("on");
$(".list").css("left",curleft+"px");
};
var lunbo = window.setInterval($.fn.carousel, 2500);
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航