原生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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Angular CLI发布路径的配置项浅析
Mar 29 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
用libTemplate实现静态网页的生成
2006/10/09 PHP
我的论坛源代码(二)
2006/10/09 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
php实现简易计算器
2020/08/28 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python循环结构的应用场景详解
2019/07/11 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
大学生英语演讲稿
2014/04/24 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技