纯js图片轮播
2018-03-24 13:17
78 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
a{text-decoration: none;}
.container {position: relative; width: 100%;height: 6.25rem; margin:0 auto 0 auto;box-shadow: 0 0 5px green;overflow: auto;}
.container .wrap {position: absolute; height: 6.25rem; z-index: 1;}
.container .wrap img { float: left; height: 6.25rem;}
.container .buttons {position: absolute;right: .3rem;bottom: 1.25rem;width: 9.3rem;height: 10px;z-index: 2;}
.container .buttons span {margin-left: 5px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background-color: green;text-align: center; color:white;cursor: pointer;}
.container .buttons span.on{background-color: red;}
.container .arrow {position: absolute;top: 25%; color: green;padding:0px 14px;border-radius: 50%;font-size: 50px;z-index: 2;display: none;}
.container .arrow_left {left: 10px;}
.container .arrow_right {right: 10px;}
.container:hover .arrow {display: block;}
.container .arrow:hover {background-color: rgba(0,0,0,0.2);}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
</div>
<div class="buttons">
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
var pics = ["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png"];
//获取屏幕宽度
var w_width = $(".container").outerWidth();
//获取图片张数
var img_size = pics.length;
var img_html = '<img src="'+pics[img_size-1]+'" alt="">';
var button_html = "";
if(img_size){
for(i=0 ;i<img_size;i++){
button_html+= '<span >'+(i+1)+'</span>'
img_html+='<img src="'+pics[i]+'" alt="">';
}
img_html+= '<img src="'+pics[0]+'" alt="">';
$(".wrap").append(img_html).css("left",-w_width);
$(".buttons").append(button_html);
$(".wrap").css("width",(img_size+2)*w_width);
$(".wrap img").css("width",w_width);
$(".buttons :first-child").addClass("on");
}
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
next_pic();
}
prev.onclick = function () {
prev_pic();
}
function next_pic () {
index++;
if(index > (img_size-1)){/*不定，图片张数-1*/
index = 0;
}
showCurrentDot();
var newLeft;
if(wrap.style.left === w_width * -(img_size+1)+"px"){/*第一张的距离，continer宽度*图片张数+1*/
newLeft = -(w_width*2);/*第二张的距离，continer宽度 * 2 */
}else{
newLeft = parseInt(wrap.style.left)-w_width;/*continer宽度*/
}
wrap.style.left = newLeft + "px";
}
function prev_pic () {
index--;
if(index < 0){
index = img_size-1;/*不定，图片张数-1*/
}
showCurrentDot();
var newLeft;
if(wrap.style.left === "0px"){
newLeft = -(w_width*(img_size+1));/*倒数第二张的距离，continer宽度*图片张数+1*/
}else{
newLeft = parseInt(wrap.style.left)+w_width;/*continer宽度*/
}
wrap.style.left = newLeft + "px";
}
var timer = null;
function autoPlay () {
timer = setInterval(function () {
next_pic();
},2000);
}
autoPlay();
var container = document.querySelector(".container");
container.onmouseenter = function () {
clearInterval(timer);
}
container.onmouseleave = function () {
autoPlay();
}
var index = 0;
var dots = $(".buttons span")
function showCurrentDot () {
for(var i = 0, len = dots.length; i < len; i++){
dots[i].className = "";
}
dots[index].className = "on";
}
for (var i = 0, len = dots.length; i < len; i++){
(function(i){
dots[i].onclick = function () {
var dis = index - i;
if(index == (img_size-1) && parseInt(wrap.style.left)!==-(img_size * w_width)){/*图片张数 * 宽度*/
dis = dis - img_size; /*张数*/
}
//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
if(index == 0 && parseInt(wrap.style.left)!== -w_width){/*宽度*/
dis = img_size + dis;/*张数*/
}
wrap.style.left = (parseInt(wrap.style.left) + dis * w_width)+"px";/*宽度*/
index = i;
showCurrentDot();
}
})(i);
}
</script>
</body>
</html>
总结：只有五张图片，却使用7张来轮播，这是为了实现无缝轮播。图片只在container中，所以需要限定其宽度和高度并且使用overflow:hidden；将其余的图片隐藏起来，并且我们希望wrap相对于container左右移动，所以设置为relative，我们设置wrap是绝对定位的，所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片，所以width为4200px（每张图片我们设置为600X400）,我们只需让图片左浮动即可实现占满一排了。
，在第一页时，left值为-600，所以我们可以点击一次上一张，但是当再点击一次时，就出现了空白。同样的，下一张点击，到-3600是最后一张，就不能再继续点击了。也就是说，当我们点击下一张到-3600px（这是第一张图片）时，我们需要下次跳转到第二张，即-1200px；这样才能正常跳转；同理，当我们点击上一张到0px（这是第五张图片时），我们希望下次跳转到第四张，即-2400px；
参考网址：http://www.jb51.net/article/106122.htm
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
a{text-decoration: none;}
.container {position: relative; width: 100%;height: 6.25rem; margin:0 auto 0 auto;box-shadow: 0 0 5px green;overflow: auto;}
.container .wrap {position: absolute; height: 6.25rem; z-index: 1;}
.container .wrap img { float: left; height: 6.25rem;}
.container .buttons {position: absolute;right: .3rem;bottom: 1.25rem;width: 9.3rem;height: 10px;z-index: 2;}
.container .buttons span {margin-left: 5px;display: inline-block;width: 20px;height: 20px;border-radius: 50%;background-color: green;text-align: center; color:white;cursor: pointer;}
.container .buttons span.on{background-color: red;}
.container .arrow {position: absolute;top: 25%; color: green;padding:0px 14px;border-radius: 50%;font-size: 50px;z-index: 2;display: none;}
.container .arrow_left {left: 10px;}
.container .arrow_right {right: 10px;}
.container:hover .arrow {display: block;}
.container .arrow:hover {background-color: rgba(0,0,0,0.2);}
</style>
</head>
<body>
<div class="container">
<div class="wrap">
</div>
<div class="buttons">
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
var pics = ["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png"];
//获取屏幕宽度
var w_width = $(".container").outerWidth();
//获取图片张数
var img_size = pics.length;
var img_html = '<img src="'+pics[img_size-1]+'" alt="">';
var button_html = "";
if(img_size){
for(i=0 ;i<img_size;i++){
button_html+= '<span >'+(i+1)+'</span>'
img_html+='<img src="'+pics[i]+'" alt="">';
}
img_html+= '<img src="'+pics[0]+'" alt="">';
$(".wrap").append(img_html).css("left",-w_width);
$(".buttons").append(button_html);
$(".wrap").css("width",(img_size+2)*w_width);
$(".wrap img").css("width",w_width);
$(".buttons :first-child").addClass("on");
}
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
next_pic();
}
prev.onclick = function () {
prev_pic();
}
function next_pic () {
index++;
if(index > (img_size-1)){/*不定，图片张数-1*/
index = 0;
}
showCurrentDot();
var newLeft;
if(wrap.style.left === w_width * -(img_size+1)+"px"){/*第一张的距离，continer宽度*图片张数+1*/
newLeft = -(w_width*2);/*第二张的距离，continer宽度 * 2 */
}else{
newLeft = parseInt(wrap.style.left)-w_width;/*continer宽度*/
}
wrap.style.left = newLeft + "px";
}
function prev_pic () {
index--;
if(index < 0){
index = img_size-1;/*不定，图片张数-1*/
}
showCurrentDot();
var newLeft;
if(wrap.style.left === "0px"){
newLeft = -(w_width*(img_size+1));/*倒数第二张的距离，continer宽度*图片张数+1*/
}else{
newLeft = parseInt(wrap.style.left)+w_width;/*continer宽度*/
}
wrap.style.left = newLeft + "px";
}
var timer = null;
function autoPlay () {
timer = setInterval(function () {
next_pic();
},2000);
}
autoPlay();
var container = document.querySelector(".container");
container.onmouseenter = function () {
clearInterval(timer);
}
container.onmouseleave = function () {
autoPlay();
}
var index = 0;
var dots = $(".buttons span")
function showCurrentDot () {
for(var i = 0, len = dots.length; i < len; i++){
dots[i].className = "";
}
dots[index].className = "on";
}
for (var i = 0, len = dots.length; i < len; i++){
(function(i){
dots[i].onclick = function () {
var dis = index - i;
if(index == (img_size-1) && parseInt(wrap.style.left)!==-(img_size * w_width)){/*图片张数 * 宽度*/
dis = dis - img_size; /*张数*/
}
//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
if(index == 0 && parseInt(wrap.style.left)!== -w_width){/*宽度*/
dis = img_size + dis;/*张数*/
}
wrap.style.left = (parseInt(wrap.style.left) + dis * w_width)+"px";/*宽度*/
index = i;
showCurrentDot();
}
})(i);
}
</script>
</body>
</html>
总结：只有五张图片，却使用7张来轮播，这是为了实现无缝轮播。图片只在container中，所以需要限定其宽度和高度并且使用overflow:hidden；将其余的图片隐藏起来，并且我们希望wrap相对于container左右移动，所以设置为relative，我们设置wrap是绝对定位的，所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片，所以width为4200px（每张图片我们设置为600X400）,我们只需让图片左浮动即可实现占满一排了。
，在第一页时，left值为-600，所以我们可以点击一次上一张，但是当再点击一次时，就出现了空白。同样的，下一张点击，到-3600是最后一张，就不能再继续点击了。也就是说，当我们点击下一张到-3600px（这是第一张图片）时，我们需要下次跳转到第二张，即-1200px；这样才能正常跳转；同理，当我们点击上一张到0px（这是第五张图片时），我们希望下次跳转到第四张，即-2400px；
参考网址：http://www.jb51.net/article/106122.htm
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实例-图片轮播
- 用JS做图片轮播
- JS实现旋转木马式图片轮播效果
- js无隙轮播图片
- 使用JS实现图片轮播的实例(前后首尾相接)
- 实现图片首尾平滑轮播(JS原生方法―节流)
- 流行的广告轮播(图片轮播)JS代码!!
- js实现图片上下轮播效果（二）
- js广告图片轮播
- [js开源组件开发]js轮播图片支持手机滑动切换
- 用js写图片轮播
- JS图片轮播器，从数据库读取图片进行轮播
- 最简单的图片轮播--利用myfocus js焦点图库插件
- js实现图片轮播效果
- JS图片轮播器，从数据库读取图片进行轮播
- css+js实现banner图片轮播
- js实现图片点击左右轮播
- js图片轮播滚动
- 原生JS-实现无限图片轮播
- 简单的js图片轮换代码(js图片轮播)