原生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 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
详解如何探测小程序返回到webview页面
May 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
thinkphp框架实现删除和批量删除
2016/06/29 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
javascript中的new使用
2010/03/20 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
JS代码优化的8点建议
2020/02/04 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python文件操作函数用法实例详解
2019/12/24 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python中entry用法讲解
2020/12/04 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
党员干部廉洁自律承诺书
2015/04/28 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
python自动化八大定位元素讲解
2021/07/09 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js