一个简单的无限轮播图附JS源代码

时间:2020-03-23 21:28:32 来源:cnblogs 作者:清风 点击:
摘要:把所有的源码直接写在了一个HTML文件里面,无额外js引入,非常简单的一个无限轮播图JS源码,适合所有的网页使用,需要自适应可以适当调整css和图片的宽高……

实现过程如下,全部代码写在一个HTML文件里面,可以复制到本地,加上图片地址即可查看运行效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>无限轮播图</title>
    <style media="screen">
      /*样式设置*/
      * {
        margin: 0px;
        padding: 0px;
      }
      #slider_wrap {
        width: 1600px;
        height: 270px;
        margin: 100px auto;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
      }
      #slider_content {
        width: 4800px;
        height: 270px;
        position: absolute;
      }
      #slider_content img {
        width: 400px;
        height: 270px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="slider_wrap">
      <div id="slider_content">
        <img src="img/1.jpg" alt="" />
        <img src="img/2.jpg" alt="" />
        <img src="img/3.jpg" alt="" />
        <img src="img/4.jpg" alt="" />
        <img src="img/5.jpg" alt="" />
        <img src="img/6.jpg" alt="" />
      </div>
    </div>
    <form class="btn_sets" action="index.html" method="post" style="margin-left: 900px">
      <input type="button" name="name" value="下一张" onclick="btnLeft()">
      <input type="button" name="name" value="上一张" onclick="btnRight()">
    </form>
  </body>
  <script type="text/javascript">
    var sliderContent = document.getElementById('slider_content');
    // 定义一个变量x,记录x轴的位置
    var x = 0;
    // 将slider_content中的图片复制一次
    sliderContent.innerHTML += sliderContent.innerHTML;
    // 添加鼠标点击事件
    function btnLeft() {
      if (x == -2400) { //假如图片移动到最后一个时,将x设置为0;
        x = 0;
      }
      x -= 400;  //图片沿x轴方向向左移动400px
      sliderContent.style.left = x + 'px';  //图片左移
    }
    function btnRight() {
      if (x == 0) {
        x = -2400;
      }
      x += 400;
      sliderContent.style.left = x + 'px';
    }
    setInterval('btnLeft()',5000);
  </script>
</html>

上面的轮播图代码运行之后的效果截图:

一个简单的无限轮播图附JS源代码

(责任编辑:陆柏熺)
相关分类: js源码 轮播图源码
评价:
用户名: 验证码: 看不清?点击更换

相关内容推荐



关注站长自媒体 获取更多优质内容

2019-2020 ©巅峰霸主网 京ICP备12023415号-2
返回顶部