原生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 命名规则 变量命名规则
Feb 25 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP文件操作详解
2016/12/30 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
Python中方法链的使用方法
2016/02/23 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
在Python中实现字典反转案例
2020/12/05 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
一道输出判断型Java面试题
2014/10/01 面试题
国贸专业的职业规划书
2014/03/15 职场文书
新年爱情寄语
2014/04/08 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
内勤岗位职责
2015/02/10 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
python基础入门之普通操作与函数(三)
2021/06/13 Python