原生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中filter(),not(),split()使用方法
Jul 06 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
javascript实现下拉菜单效果
Feb 09 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
php 远程关机操作的代码
2008/12/05 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php实现网页端验证码功能
2017/07/11 PHP
php swoft框架实例用法
2020/12/22 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python分支结构(switch)操作简介
2018/01/17 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python提取频域特征知识点浅析
2019/03/04 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python常用数据重复项处理方法
2019/11/22 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
热能动力工程毕业生自荐信
2013/11/07 职场文书
入股协议书范本
2014/04/14 职场文书
新品发布会策划方案
2014/06/08 职场文书
运动会宣传稿100字
2015/07/23 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL