手写图片轮播

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示:

纯JavaScript手写图片轮播代码,javascript手写

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片轮播切换</title>
<style type="text/css">
  .imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
  .imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
  .numStyle{top: 0px;}
  .textStyle{bottom: 0px;}
  .imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
  .imgCon .prev{left: 10px;}
  .imgCon .next{left: 370px;}
  img{width:400px;height: 400px;}
</style>
</head>
<body>
  <div class="imgCon">
    加载中...
    加载中...
    <strong id="prev" class="prev"><</strong>
    <strong id="next" class="next">></strong>
    <img src="" id="imgChange"/>
  </div>
  <script type="text/javascript">
    var numCon = document.getElementById('numCon');
    var textCon = document.getElementById('textCon');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var imgChange = document.getElementById('imgChange');
    var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];
    var imgText = ['第一张','第二张','第三张','第四张'];
    var num = 0;
    //数字 图片变化函数
    function imgTab(){
      numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化
      textCon.innerHTML = imgText[num]; //底部文字内容变化
      imgChange.src = imgArr[num]; //图片变化
    }
    imgTab();
    //下一张 按钮
    next.onclick = function(){
    num++;
    if(num == imgArr.length){
      num = 0;
    }
    imgTab();
    }
    //上一张 按钮
    prev.onclick = function(){
      num--;
    if(num == -1){
      num = imgArr.length-1;
    }
    imgTab();
    }
  </script>
</body>
</html>

以上所述是小编给大家介绍的纯JavaScript手写图片轮播代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下…

为大家分享的JavaScript图片轮播代码如下

图片轮播的场景,在 PC
和手机端都是很常见的。最早的时候,都是用的第三方库,比如
Bootstrap,react
swipe。但是有时候我们的业务很简单,并不需要这些插件自带的很多其它功能。加上之前在微博看到某前端大神在吐槽。

通过改变每个图片的opacity属性:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片轮播切换</title>
<style type="text/css">
  .imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
  .imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
  .numStyle{top: 0px;}
  .textStyle{bottom: 0px;}
  .imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
  .imgCon .prev{left: 10px;}
  .imgCon .next{left: 370px;}
  img{width:400px;height: 400px;}
</style>
</head>
<body>
  <div class="imgCon">
    加载中...
    加载中...
    <strong id="prev" class="prev"><</strong>
    <strong id="next" class="next">></strong>
    <img src="" id="imgChange"/>
  </div>
  <script type="text/javascript">
    var numCon = document.getElementById('numCon');
    var textCon = document.getElementById('textCon');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var imgChange = document.getElementById('imgChange');
    var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg'];
    var imgText = ['第一张','第二张','第三张','第四张'];
    var num = 0;
    //数字 图片变化函数
    function imgTab(){
      numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化
      textCon.innerHTML = imgText[num]; //底部文字内容变化
      imgChange.src = imgArr[num]; //图片变化
    }
    imgTab();
    //下一张 按钮
    next.onclick = function(){
    num++;
    if(num == imgArr.length){
      num = 0;
    }
    imgTab();
    }
    //上一张 按钮
    prev.onclick = function(){
      num--;
    if(num == -1){
      num = imgArr.length-1;
    }
    imgTab();
    }
  </script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<style>

.img-div img{display:none;}

</style>
</head>

<body>

<div class="slide" id="slide">
<div class="img-div">
 <img src="model.jpg" />
 <img src="model2.jpg" />
 <img src="model.jpg" />
 <img src="model2.jpg" />
 <img src="model.jpg" />
</div>

<div class="slide-btn">
<a href="#" class="hover">1</a>
<a href="#" class="hover">2</a>
<a href="#" class="hover">3</a>
<a href="#" class="hover">4</a>
<a href="#" class="hover">5</a>
</div>

</div>

<script type="text/javascript">


var zBase=
{
 $id:function(id){return document.getElementById(id);},
 $tagName:function(tagName,obj){return ((obj?obj:document).getElementsByTagName(tagName));},
 $c:function(clsN,obj)
 {
  var tag=this.$tagName('*'),reg=new RegExp('(^|\\s)'+clsN+'(\\s|$)'),arr=[];

  for(var i=0;i<tag.length;i++)
  {
   if(reg.test(tag[i].className))
   {
    arr.push(tag[i]); 
   } 
  }
  return arr;

 },

 $add:function(obj,clsN)
 {
  var reg=new RegExp('(^|\\s)'+clsN+'(\\s|$)');

  if(!reg.test(obj.className))
  {
   obj.className+=' '+clsN; 
  } 
 },

 $remove:function(obj,clsN)
 {
  var cla=obj.className;
  var reg='/|\\s*'+clsN+'\\b/g';
  obj.className=cla?cla.replace(eval(reg),''):''; 
 },

 css:function(obj,attr,value)
 {
  if(value)
  {
   obj.style[attr]=value; 
  } 
  else
  {
   return typeof window.getComputedStyle!="undefined"?window.getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]; 
  }
 },
 easing:
  {
   liner:function(t,b,c,d){return c*t/d+b},
   easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t-1)+b}
  },

  config:
  {
   index:0,
   auto:true,
   direct:'left' 
  },

  init:function()
  {
   this.slide=this.$id('slide');
   this.img_div=this.$c('img-div')[0];
   this.slide_btn=this.$tagName('a',this.$c('slide-btn')[0]);
   this.img_arr=this.$tagName('img',this.img_div);



   if(this.config.auto){this.play();}
   this.hover();

  },

  animate:function(obj,attr,val)
  {
   var d=1000;

   if(obj[attr+"timer"]){clearInterval(obj[attr+"timer"])};

   var start= parseInt(zBase.css(obj,attr));
   var space=val-start,st=(new Date().getTime()),m=space>0?'cell':'floor';

   obj[attr+'timer']=setInterval(function(){
    var t=(new Date().getTime()-st);
    if(t<d)
    {

     zBase.css(obj,attr,Math[m](zBase.easing["easeOut"](t,start,space,d))+"px");
    }
    else
    {
     clearInterval(obj[attr+'timer']);
     zBase.css(obj,attr,top+space+"px");
    }    
    },20);


  },

  hover:function()
   {
    for(var i=0;i<this.slide_btn.length;i++)
    {
     this.slide_btn[i].index=i;
     this.slide_btn[i].onmouseover=function()
     {
      if(zBase.slide.timer)
      {
       clearInterval(zBase.slide.timer); 
      } 

      zBase.config.index=this.index;


      //console.log(this.slide_btn);

      for(var j=0;j<zBase.slide_btn.length;j++)
      {
       zBase.$remove(zBase.slide_btn[j],'hover');

      }

      zBase.$add(zBase.slide_btn[zBase.config.index],'hover');
      zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*1000);

     }

     this.slide_btn[i].onmouseout=function()
     {
      zBase.play(); 
     }
    }

   },
   play:function(){
    this.slide.timer = setInterval(function(){

     var tags=zBase.$tagName('img',this.img_div);
     //zBase.$tagName('img',this.img_div)[zBase.config.index].style.display="block";


     for(var i =0;i<tags.length;i++)
     {
     if(zBase.config.index==i)
     {
      zBase.$tagName('img',this.img_div)[zBase.config.index].style.display="block";
     } 
     else
     {
      zBase.$tagName('img',this.img_div)[i].style.display="none"; 
     }
     }


      zBase.config.index++;
     if(zBase.config.index>=zBase.img_arr.length) zBase.config.index=0;
     zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500);
     for(var j=0;j<zBase.slide_btn.length;j++){
      zBase.$remove(zBase.slide_btn[j],'hover') ;
     }
     zBase.$add(zBase.slide_btn[zBase.config.index],'hover');
    },3000)
   }

}
   zBase.init();

</script>

 </body>
</html>

来面试前端的,麻烦先把图片轮播实现出来。

素材图片:

以上所述是小编给大家介绍的纯JavaScript手写图片轮播代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

以上就是为大家分享的JavaScript图片轮播代码,希望大家可以喜欢。

虽然看完之后,有种躺枪的感觉,但是自己确实没有仔细想过要怎样实现。所以在某个阳光明媚的早晨,决定动手实现一下,最后发现原来这么简单
:)。下面说下这个过程。

图片 1

您可能感兴趣的文章:

  • 用JS实现图片轮播效果代码(一)
  • 基于javascript数组实现图片轮播
  • 原生JS实现旋转木马式图片轮播插件
  • Javascript实现图片轮播效果(一)让图片跳动起来
  • 图解js图片轮播效果
  • 最简单的JavaScript图片轮播代码(两种方法)
  • 详解js图片轮播效果实现原理
  • js图片轮播效果实现代码
  • js图片轮播手动切换效果

您可能感兴趣的文章:

  • js 图片轮播(5张图片)
  • 原生javascript实现图片轮播效果代码
  • 带左右箭头图片轮播的JS代码
  • 简单的js图片轮换代码(js图片轮播)
  • js图片自动轮播代码分享(js图片轮播)
  • JS实现简易图片轮播效果的方法
  • 原生js和jquery实现图片轮播特效
  • 原生js和jquery实现图片轮播淡入淡出效果
  • js淡入淡出的图片轮播效果代码分享
  • 基于javascript实现样式清新图片轮播特效

先是静态 UI。

图片 2

<style>
    .container {
        position: relative;
        width: 500px;
        margin: 0 auto;
        height: 300px;
    }

    .item {
        height: 100%;
        width: 100%;
        position: absolute;
    }

    #item1 {
        background-color: #FD9827;
    }

    #item2 {
        background-color: #47B784;
    }

    .btn {
        background: rgba(0, 0, 0, 0.28);
        border-radius: 50%;
        display: block;
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        line-height: 40px;
        position: absolute;
        width: 40px;
        text-align: center;
        top: 100px;
    }

    #pre {
        left: 10px;
    }

    #next {
        right: 10px;
    }
</style>

<div class="container">
    <div class="item" id="item1"></div>
    <div class="item" id="item2"></div>

    <
    >
</div>

图片 3

然后给两个按钮加上点击事件,此外还要加上两个显示和隐藏的类,以及修改两个背景图的初始化状态。

图片 4

<style>
    .hide {
        opacity: 0;
    }

    .show {
        opacity: 1;
    }
</style>

<div class="item show" id="item1"></div>
<div class="item hide" id="item2"></div>
<
>

<script>
function getByID(id) {
    return document.getElementById(id)
}

let index = 1
let item1 = getByID('item1')
let item2 = getByID('item2')

function toggle() {
    if (index === 1) {
        item1.className = 'item hide'
        item2.className = 'item show'
        index = 2
    } else {
        item2.className = 'item hide'
        item1.className = 'item show'
        index = 1
    }
}
</script>

图片 5

这样子,基本上就能达到切换图片的效果了。当然,我还想加多点动画效果,让图片能从左边滑进来,从右边滑出去。修改下显示和隐藏两个类,以及给父元素加一个
overflow: hidden

代码一:

<style>
    .container {
        position: relative;
        height: 300px;
        width: 500px;
        margin: 0 auto;
        overflow: hidden;
    }

    .hide {
        animation: fadeRightOut 1s forwards;
    }

    .show {
        animation: fadeLeftIn 1s forwards;
    }

    @keyframes fadeRightOut {
        0% {
            transform: translate(0, 0);
            visibility: visible;
        }
        100% {
            transform: translate(100%, 0);
            visibility: hidden;
        }
    }

    @keyframes fadeLeftIn {
        0% {
            transform: translate(-100%, 0);
            visibility: hidden;
        }
        100% {
            transform: translate(0, 0);
            visibility: visible;
        }
    }
</style>
<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-">
  <title>最简单的轮播广告</title>
  <style>
   body, div, ul, li {
    margin: ;
    padding: ;
   }
   ul {
    list-style-type: none;
   }
   body {
    background: #;
    text-align: center;
    font: px/px Arial;
   }
   #box {
    position: relative;
    width: px;
    height: px;
    background: #fff;
    border-radius: px;
    border: px solid #fff;
    margin: px auto;
   }
   #box .list {
    position: relative;
    width: px;
    height: px;
    overflow: hidden;
    border: px solid #ccc;
   }
   #box .list li {
    position: absolute;
    top: ;
    left: ;
    width: px;
    height: px;
    opacity: ;
    transition: opacity .s linear
   }
   #box .list li.current {
    opacity: ;
   }
   #box .count {
    position: absolute;
    right: ;
    bottom: px;
   }
   #box .count li {
    color: #fff;
    float: left;
    width: px;
    height: px;
    cursor: pointer;
    margin-right: px;
    overflow: hidden;
    background: #F;
    opacity: .;
    border-radius: px;
   }
   #box .count li.current {
    color: #fff;
    opacity: .;
    font-weight: ;
    background: #f
   }
  </style>
 </head>
 <body>
 <div id="box">
  <ul class="list">
   <li class="current" style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
  </ul>
  <ul class="count">
   <li class="current"></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
  </ul>
 </div>
 <script>
  var box=document.getElementById('box');
  var uls=document.getElementsByTagName('ul');
  var imgs=uls[].getElementsByTagName('li');
  var btn=uls[].getElementsByTagName('li');
  var i=index=; //中间量,统一声明;
  var play=null;
  console.log(box,uls,imgs,btn);//获取正确
  //图片切换, 淡入淡出效果我是用(transition: opacity .s linear)做的,不纠结、简单 在css里面
  function show(a){    //方法定义的是当传入一个下标时,按钮和图片做出对的反应
   for(i=;i<btn.length;i++ ){
    btn[i].className='';  //很容易看懂吧?每个按钮都先设置成看不见,然后把当前按钮设置成可见。
    btn[a].className='current';
   }
   for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同
    imgs[i].style.opacity=;
    imgs[a].style.opacity=;
   }
  }
  //切换按钮功能,响应对应图片
  for(i=;i<btn.length;i++){
   btn[i].index=i; //不知道你有没有发现,循环里的方法去调用循环里的变量体i,会出现调到的不是i的变动值的问题。所以我先在循环外保存住
   btn[i].onmouseover=function(){
    show(this.index);
    clearInterval(play); //这就是最后那句话追加的功能
   }
  }
  //自动轮播方法
 function autoPlay(){
    play=setInterval(function(){ //这个paly是为了保存定时器的,变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
    index++;
    index>=imgs.length&&(index=);//可能有优先级问题,所以用了括号,没时间测试了。
    show(index);
   },)
  }
  autoPlay();//马上调用,我试过用window.onload调用这个方法,但是调用之后影响到了其他方法,使用autoPlay所以只能这样调用了
  //div的鼠标移入移出事件
  box.onmouseover=function(){
   clearInterval(play);
  };
  box.onmouseout=function(){
   autoPlay();
  };
  //按钮下标也要加上相同的鼠标事件,不然图片停止了,定时器没停,会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
 </script>
 </body>
 </html>

这样,一个基本的轮播组件就算完成了,然后就可以开始去面试了:)。

代码二:

后记

Github
上面有个库,You-Dont-Need-Javascript,介绍了一些不用
JS 就能实现出来的效果,里面也包含了图片轮播。里面的一些做法,作为加深对
CSS
的理解,开开眼界就好。如果用在了工作的项目当中,无疑加大了代码的维护成本。

首先第一步,下载好一个jquery库的插件,jquery.js
网上很多随处可以下载.下载的插件要放在目录下.然后在html文档中链接好<script
type=”text/javascript” src=”jQuery.js”></script>

第二步,布局好一个DIV,如:

<div id="scroll">
 <p class="subl">上一张<p/>
 <p class="subr">下一张<p/>
 <ul>
 <li style="background:red;display:block;"></li>
 //上面的li要设定为显示,因为是第一张图片.
 <li style="background:green;"></li>
 <li style="background:gray;"></li>
 <li style="background:orange;"></li>
 </ul>
 </div>

由于方便各位网友下载能够清晰明了,我就没有用图片路径了,因为到你们电脑上就看不到了,这里用背景颜色.

第三步,就到了写CSS的时候了.下面的CSS懂基础的人都看得懂.

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的DIV设定属性.
#scroll ul{height:180px; list-style:none;}//DIV下的UL属性.
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//DIV下的UL下的LI属性.注意:display:none;因为要将所有的li隐藏了先.当点击的时候在显示出来.
 .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性.注意一个绝对定位.
 .subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; 
}//下一张按钮的属性.注意一个绝对定位.
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上两个hover是鼠标经过的效果.

第四步,就是jquery代码了!也很简单.先将代码看一遍,你就会用了!

<script type="text/javascript">
/*轮播*/
 $(function(){
 var i=0;
 var len=$("#scroll ul li").length-1;
 $(".subl").click(function(){
 if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
//到这里分开!上面的是上一张点击的效果代码,下面的是下一张点击的效果代码.
 $(".subr").click(function(){//获取类名的点击事件.
 if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
 });
 /*轮播*/
</script>

四步轻松搞定一个简单的轮!

您可能感兴趣的文章:

  • 使用html+js+css
    实现页面轮播图效果(实例讲解)
  • 原生js和css实现图片轮播效果
  • 基于cssSlidy.js插件实现响应式手机图片轮播效果
  • js 图片轮播(5张图片)
  • js图片自动轮播代码分享(js图片轮播)
  • 原生js和jquery实现图片轮播特效
  • JS实现简易图片轮播效果的方法
  • 带左右箭头图片轮播的JS代码
  • js图片轮播效果实现代码
  • JS+HTML+CSS实现轮播效果

相关文章