原生JS实现图片轮播效果


Posted in Javascript onDecember 26, 2016

之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉。后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 #Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 #Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 #Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 #Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 #Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 #Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
You might like
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python flask安装和命令详解
2019/04/02 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
Django如何重置migration的几种情景
2021/02/24 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
实习自荐信
2013/10/13 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
设备售后服务承诺书
2014/05/30 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
Python Matplotlib库实现画局部图
2021/11/17 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB