原生JS实现图片轮播效果

2019-11-19 18:16:16

字体：大中小

来源：转载

供稿：网友

之前页面需要图片轮播的时候，都是直接在网上找一个插件，然后自己动手改一下，把图片的路径改成自己图片的路径，然后万事大吉。后来觉得这样并不能提高自己的前端水平，于是乎，自己动手写了一个图片轮播的小demo，用的是jquery，小弟前端小白一个，各位前端大神看了之后，望批评指正。

我的思路是这样的，定义两个变量，一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小，如果$index大于$exdex,说明是朝左翻页，反之，就是朝右翻页。如果是朝左翻页，就把当前页朝左偏移100%的宽度，让下一页同样朝左偏移100%宽度。以下是代码部分：

<html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style>    .banner{      width:300px;      height:250px;      position: relative;      z-index: 100;      background: skyblue;      margin:100px auto;      overflow:hidden ;    }    .banner .first{      left:0;    }    .banner a{      width: 100%;      height: 100%;      position: absolute;      display:block;      top:0;      left:100%;    }    .banner a img{      width: 100%;      height: 100%;    }    .banner .pre{      position: absolute;      left:0;      top:120px;      background: gray;      width:30px;      height:30px;      border-radius: 30px;      line-height: 30px;      text-align: center;      opacity: 0.4;      z-index: 1000;      cursor: pointer;    }    .banner .next{      position: absolute;      right:0;      top:120px;      background: gray;      width:30px;      height:30px;      border-radius: 30px;      line-height: 30px;      text-align: center;      opacity: 0.4;      z-index: 1000;      cursor: pointer;    }    .choose{      position: absolute;      width:100px;      height:20px;      bottom:10px;      left:90px;      z-index: 1000;    }    .choose span{      display: block;      float: left;      margin-left:15px;      width:10px;      height:10px;      border-radius: 10px;      background: blue;      cursor: pointer;    }    .choose .red{      background: red;    }  </style></head><body>  <div class="banner">    <span class="pre"><=</span>    <span class="next">=></span>    <a href="#" class="first"><img src="./1.jpg" alt=""/></a>    <a href="#"><img src="./2.jpg" alt=""/></a>    <a href="#"><img src="./3.jpg" alt=""/></a>    <a href="#"><img src="./4.jpg" alt=""/></a>    <div class="choose">      <span class="red"></span>      <span></span>      <span></span>      <span></span>    </div>  </div></body><script src="./jquery.min.js"></script><script>  var $index = 0;  var $exdex = 0;  $('.choose span').mouseover(function(){    $index = $(this).index();    $('.choose span').eq($index).addClass("red").siblings().removeClass("red");    if($index > $exdex) {      next();    } else {      pre();    }    return $exdex = $index;  });  function next() {    $('.banner a').eq($index).stop(true,true).css('left',"100%").animate({"left":0});    $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"-100%"});  }  function pre() {    $('.banner a').eq($index).stop(true,true).css('left',"-100%").animate({"left":"0"});    $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"100%"});  }</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS中append字符串包含onclick无效传递参数失败的解决方案

下一篇：输入框点击时边框变色效果的实现方法