上班以来看到了,写了很多的轮播图效果,实现方法大致有

1.将图片局对定位,利用z-index和opacity实现图片渐现

2.用css3 的transtion:Xx xx left/right,实现左右方向滑动轮播(淘宝)

3.在图片组的前后,各加一张图片,实现无缝连接

4.通过改变图片组外层的margin或者left值实现

今天我要写的是第四种,现在概观大部分网站,已经几乎没有这种实现方法了,因为逻辑比较复杂,而且比较消耗性能(需要不停的修改数组,然后遍历到页面上),今天写它的目的,只是想要挑战下自己,因为真的很久没有写过了

首先,先明确下实现思路

1.初始状态,如下图

红色是显示区域,需要设置overflow:hidden控制只显示一张

黑色的是四张图片,通过浮动,变成一排

html,css代码如下

        body,div{
padding:;
margin:;
}
.container{
width:560px;
margin:50px auto;
overflow:hidden;
position: relative; }
.after:after{
display: block;
clear:both;
content:'';
}
.img-box{ list-style: none;
padding:;
width:calc(560px*);
margin-left:;
}
.img-box li{
float:left;
}
.dot{
            position: absolute;
            bottom:30px;
            margin:auto;
            left:0;
            right:0;
            padding:0;
        }
        .dot li{
            list-style: none;
            padding:0;
            float:left;
            width:30px;
            height:30px;
            text-align: center;
            line-height:30px;
            border-radius: 50%;
            background:#ccc;
            color:#333;
            margin-left:5px;
            cursor:pointer;
        }
        .dot li:hover{
             background:#666;
            color:#fff;
        }
        .dot li.current{
            background:#666;
            color:#fff;
        }
  <div class='container'>
<ul class='img-box after'>
<li>
<img src="imgs/1.png" alt="">
</li>
<li>
<img src="imgs/2.png" alt="">
</li>
<li>
<img src="imgs/3.png" alt="">
</li>
<li>
<img src="imgs/4.png" alt="">
</li>
</ul>
   <ul class='dot after'>
        <li class='current'>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

2,通过改变ul的margin-left值来实现图片移动,每隔固定的时间改变ul的margin值为图片的宽度

可是当移动到最后一张时,后面没有图片了,就会一片空白。

如果加上判断:移动到最后一张时,再进行移动就默认移入到第一张,虽然可以实现,但是效果很差,不是我想要的效果

利用js的数组可以实现预期的效果:

向左移动:

1.将轮播图的图片地址储存到数组arr中

2.每轮播一次,就将第一张图片放到最后,在数组中对应,将数组中的第一个元素删除,拼接到最后一个,将数组遍历到页面上;

3.重新设置margin-left为0;

如下图:

向右移动(ul向右移动):

向右移动和想左不同:

首先将最后一张图片放到最前面,对应数组就是将数组中最后一个元素删除拼接到arr的最前面,

然而此时ul的margin-left仍然是0;所以要将ul的margin-left改为负的图片宽度,(虽然移动了ul但是只是一瞬间的,而且当前图片没有变化)

最后将ul向右移动至margin-left改变至0;完成向右移动

思路明确后就可以一步一步的向下做了

1.首先实现自动轮播(每次想左轮播一张图片)

2.然后实现点击索引值轮播(想左轮播不止一张图片)

3.点击索引值实现向右轮播

js代码如下:

$(document).ready(function(){
var scroll={
ImgArr:[],//储存图片地址的数组
timer:null,//第一个定时器,表示每隔一段时间,轮播一次
distance:0,//轮播的距离
interval:20,//每段动画的时间
time:2000,//每段轮播的总时间
JG:4000,//每段轮播停留的时间
FIRST:1,
current:1,
timer2:null,//第二个定时器,轮播时的动画
init:function(){
var me=this;
me.calc();//计算下面索引所占的宽度
me.timer=setInterval(function(){//自动轮播
me.change_dot();//改变索引的状态
me.next(1);//每次轮播一张 },me.JG)
$(".dot li").mouseover(function(){//鼠标停留时,停止自动轮播
clearInterval(me.timer);
})
$(".dot li").click(function(){
clearInterval(me.timer);
me.timer=null;
console.log(me.timer2);
var num=$(this).text();
me.current=$(".dot li.current").text();
var step=num-me.current;
if(me.timer2===null){//只有当轮播结束时才能进行第二次轮播,以防止出现bug if(step>0){
me.next(step);
}else if(step<0){
me.prev(step);
} $(".dot li").removeClass("current");
$(this).addClass("current");
} })
},
sort_arr:function(step){//滚动后重新排列数组
var me=this;
for(var n=0;n<$(".container li img"). length;n++){
me.ImgArr[n]=$(".container li img").eq(n).attr("src");
}
var html='';
var slice=me.ImgArr.slice(0,step);
me.ImgArr=me.ImgArr.concat(slice);
me.ImgArr.splice(0,step);
for(var i=0;i<me.ImgArr.length;i++){
html+="<li><img src="+me.ImgArr[i]+"></li>";
}
$(".container .img-box").html("");
$(".container .img-box").append(html);
},
change_dot:function(){
var arr=$(".img-box li img").eq(0).attr("src").split("/");
console.log(arr[arr.length-1].split(".")[0]);
var num=arr[arr.length-1].split(".")[0];
if(num=='4'){
num=0; }
$(".dot li").removeClass("current");
$(".dot li").eq(num).addClass("current"); },
next:function(step){//向左移动
var me=this; me.distance=$(".container li img").eq(0).width(); var times=me.time/me.interval;
var smalldistance=(me.distance*step)/times;
me.timer2=setInterval(function(){
if(me.FIRST<=times){ $(".container .img-box").css("margin-left",'-'+me.FIRST*smalldistance+"px");
me.FIRST++; }else{
clearInterval(me.timer2)
me.timer2=null;
me.FIRST=1;
$(".container .img-box").css("margin-left","0")
me.sort_arr(step); }
},me.interval)
},
prev:function(step){//向右移动
var me=this;
me.distance=$(".container li img").eq(0).width();
var length=$(".container .img-box li").length;
for(var n=0;n<$(".container li img"). length;n++){
me.ImgArr[n]=$(".container li img").eq(n).attr("src");
}
var slice_arr=me.ImgArr.slice(me.ImgArr.length+step);
for(var m=1;m<=-step;m++){
$(".container li").eq(length-m).remove();
}
var html="";
for(var i=0;i<slice_arr.length;i++){
html+="<li><img src="+slice_arr[i]+"></li>";
}
$(".container .img-box").prepend(html);
$(".container .img-box").css("margin-left",step*me.distance+'px'); me.distance=$(".container li img").eq(0).width();
var times=me.time/me.interval;
var smalldistance=(me.distance*step)/times;//每次移动的小段距离
me.timer2=setInterval(function() {
if(me.FIRST<=times){
var px=me.FIRST*smalldistance
$(".container .img-box").css("margin-left",step*me.distance-me.FIRST*smalldistance+"px");
me.FIRST++;
}else{//轮播结束时清楚定时器
clearInterval(me.timer2);
me.timer 2=null;
me.FIRST=1;
$(".container .img-box").css("margin-left","0") } },me.interval) },
calc:function(){
var length=$(".dot li").length;
var every=parseInt($(".dot li").eq(0).width())+parseInt($(".dot li").eq(0).css("margin-left"))
$(".dot").width(every*length);
}
}
scroll.init();
})

用js数组实现最原始的图片轮播实现的更多相关文章

  1. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  2. js文本公告滚动展示,图片轮播....

    1.引入文件 <link rel="stylesheet" href="/css/liMarquee.css"> <script src=&q ...

  3. 实现一个图片轮播-3d播放效果

    前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...

  4. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  5. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  6. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  7. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  9. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. 【译】Using .NET for Apache Spark to Analyze Log Data

    .NET for Spark可用于处理成批数据.实时流.机器学习和ad-hoc查询.在这篇博客文章中,我们将探讨如何使用.NET for Spark执行一个非常流行的大数据任务,即日志分析. 1 什么 ...

  2. 就没有我遇不到的报错!java.lang.NoClassDefFoundError: org/apache/hadoop/hbase/filter/Filter

    本来准备用HBase的Bulkload将HDFS的HFile文件导入到HBase的myuser2表中,用的是yarn jar的命令 yarn jar /export/servers/hbase-1.2 ...

  3. 假如用王者荣耀的方式学习webpack

    英雄介绍 崴博.派克诞生于遥远西方的勇士之地,拥有着高超的机械技艺,善于运用各种工具来实现一些看似不可能完成的事.游历王者大陆时机缘巧合遇到了年轻的墨子,与之成为好友.后协助大宗师墨子建造了大陆第一雄 ...

  4. CodeForces-650B Image Preview 二分+模拟

    CodeForces-650B Image Preview 题意 手机里有n张图片,打开相机出现的是第一张,第一张右滑得到第n张,同理第n张左滑得到第1张,翻页耗费a秒,看照片耗费1s,但是照片有横屏 ...

  5. MySQL安装(linux)

    Centos 安装mysql 安装mariadb yum install mariadb mariadb-server mariadb-devel 安装mysql rpm -qa | grep MyS ...

  6. Mysql 常用函数(13)- right 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html right 的作用 返回字符串 str 中最右边的 ...

  7. python实现简易词频统计-源码

    需求:给瓦尔登湖文章统计单词出现的频率 思路:首先读取文件并以空格分割得到列表,然后利用for循环遍历列表中的元素并把去掉列表元素中的符号,第三步去掉相同的元素,将列表转换为一个字典,最后按照键值对升 ...

  8. Appium自动化(7) - 控件定位工具之Appium 的 Inspector

    如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 上一篇文章介绍了另一块控件定 ...

  9. 字符串 kmp算法 codeforce 625B 题解(模板)

    题解:kmp算法 代码: #include <iostream>#include <algorithm>#include <cstring>#include < ...

  10. SQL——CREATE、ALTER、DROP和VIEW

    CREATE DATABASE - 创建新数据库    语法:CREATE DATABASE database_nameALTER DATABASE - 修改数据库    CREATE TABLE - ...