基于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 数值型和字符串型之间的转换
Jul 25 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
requireJS使用指南
Apr 27 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
ionic实现底部分享功能
May 11 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
PHP4中session登录页面的应用
2008/07/25 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php中JSON的使用方法
2015/04/30 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JS实现瀑布流布局
2017/10/21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
详解Puppeteer 入门教程
2018/05/09 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python 显示数组全部元素的方法
2018/04/19 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python实现简单俄罗斯方块
2020/03/13 Python
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
企业安全生产责任书范本
2014/07/28 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
社区党务工作总结2015
2015/05/19 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
pytorch 使用半精度模型部署的操作
2021/05/24 Python