基于jQuery实现左右图片轮播(原理通用)


Posted in Javascript onDecember 24, 2015

本文为大家分享了jQuery实现左右图片轮播代码,供大家参考,具体实现内容如下

运行效果图:

基于jQuery实现左右图片轮播(原理通用)

重点!!!

实现原理:

通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值,来达到一个轮播的效果。

具体代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <script src="js/jquery.min.js"></script>
 <style>
  .banner{
   margin:0 auto;
   border: 4px dashed black;
   width:400px;
   height:200px;
   position: relative;
   overflow:hidden;
  }
  .banner a{
   z-index: 100;
   display: block;
   width:100%;
   height: 100%;
   position: absolute;
   left:100%;
   top:0;
  }
  .banner .first{
   left:0;
  }
  .banner a img{
   width:100%;
   height: 100%;
  }
  .choose{
   z-index: 1000;
   position: absolute;
   left:150px;
   top:180px;
   width:100px;
   height: 10px;
  }
  .choose span{
   margin-right: 15px;
   float: left;
   display:block;
   background: blue;
   width:10px;
   height: 10px;
   border-radius: 10px;
  }
  .choose span:hover{
   background: red;
  }
  .choose .red{
   background: red;
  }
  .banner .pre,.next{
   cursor:pointer;
   text-align:center;
   border-radius:20px;
   display:block;
   background:#cccccc;
   opacity:0.4;
   text-decoration: none;
   z-index: 200;
   display:block;
   width:40px;
   height: 40px;
   font-size: 40px;
   color:red;
   position: absolute;
   top:80px;
  }
  .banner .pre{
   left:0px
  }
  .banner .next{
   right: 0px;
  }
 </style>
 <body>
  
  <div class="banner">
   <!--
    这里为上一页下一页点击按钮
   -->
   <span class="pre">-</span>
   <span class="next">+</span>
   <!--
    此处为轮播主体,颜色块代替。图片自加
   -->
   <a href="###" class="first" style="background: pink;"></a>
   <a href="###" style="background: blue;"><img src="images/banner1.jpg"/></a>
   <a href="###" style="background: greenyellow;"><img src="images/banner2.jpg"/></a>
   <a href="###" style="background: deepskyblue;"><img src="images/banner3.jpg"/></a>
   <!--
    此处为轮播部分下方小点选择
   -->
   <div class="choose">
    <span class="red"></span>
    <span></span>
    <span></span>
    <span></span>
   </div>
  </div>
  
  <script>
   /*定义两个变量,保存当前页码和上一页页码*/
   var $index=0;
   var $exdex=0;
   /*小点的鼠标移入事件,触发图片左移还是右移*/
   $(".choose span").mouseover(function(){
    //获取当前移入的index值
    $index=$(this).index();  
    //首先让点的颜色变化,表示选中
    $(".choose span").eq($index).addClass("red").siblings().
      removeClass("red");
    //判断如果index变小,证明图片要往左移动。变大则为右移
    if($index>$exdex){
     next();
    }else if($index<$exdex){
     pre();
    }
    //移动完毕将当前index值替换了前页index
    return $exdex=$index;
   });
   //下一页的点击事件。在右移基础上加了最大index判断
   $(".next").click(function(){
    $index++;
    if($index>3){
     $index=0
    }
    $(".choose span").eq($index).addClass("red").siblings().
      removeClass("red");
    next();
    return $exdex=$index;
   });
   //上一页的点击事件
   $(".pre").click(function(){
    $index--;
    if($index<0){
     $index=3
    };
    $(".choose span").eq($index).addClass("red").siblings().
     removeClass("red");
    pre();
    return $exdex=$index;
   });
   //加个定时器,正常轮播
   var atime=setInterval(function(){
    $(".next").click();   
   },1000);
   //这里为右移和左移的事件函数。
   //右移基本原理就是先让exdex定位的left左移百分百,而选中的当前页从屏幕右边移入,left变为0
   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>
 </body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,帮助大家实现一个简单大方的图片轮播效果。

Javascript 相关文章推荐
javascript 浏览器检测代码精简版
Mar 04 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 #Javascript
jquery遍历函数siblings()用法实例
Dec 24 #Javascript
jQuery中的siblings用法实例分析
Dec 24 #Javascript
JQuery标签页效果实例详解
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 #Javascript
JQuery实现Ajax加载图片的方法
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 #Javascript
You might like
解决GD中文乱码问题
2007/02/14 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
js表达式与运算符简单操作示例
2020/02/15 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python之re操作方法(详解)
2017/06/14 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
竞聘演讲稿
2014/04/24 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
遗失说明具结保证书
2015/02/26 职场文书
个人廉洁自律总结
2015/03/06 职场文书
党员转正申请报告
2015/05/15 职场文书
中学教师读书笔记
2015/07/01 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
MySQL中varchar和char类型的区别
2021/11/17 MySQL