在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例网页布局 → 基于jQuery实现简单图片轮播

基于jQuery实现简单图片轮播

网页布局

下载此实例
  • 开发语言:CSS
  • 实例大小:0.13M
  • 下载次数:37
  • 浏览次数:774
  • 发布时间:2017-12-13
  • 实例类别:网页布局
  • 发 布 人:chenhui
  • 文件格式:.zip
  • 所需积分:2
 相关标签: jQuery 图片 图片轮播 轮播 JQ

实例介绍

【实例简介】

不论大型企业网站还是个人博客网站,现今基本都会有主页轮播的这个效果。在这里我就来简单介绍一种基于jQuery实现简单图片轮播的方法。
实现思想主要是通过判断设定index值的大小变化来判断图片左移还是右移;通过控制图片的left值,加个定时器来达到一个轮播的效果。

【实例截图】

图片.png

图片.png

图片.png

【核心代码】

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>轮播demo---更多资源www.chenhui.shop</title>
 </head>
 <!--在线引入jquery-3.2.1.min.js,当然你也可以下载到本地,然后本地引入,这里为了更好的演示,
 方便大家直接下载到本地了应用,采用了在线引入jquery-3.2.1.min.js库-->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--CSS样式,为了显示方便,直接在HTML代码中,没有另外写css文件-->
  <style type="text/css">
          .banner {
            margin: 0 auto;
            border: 4px dashed black;
            width: 50%;
            height: 300px;
            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: 50%;
            top: 90%;
            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 {
            top:42%;
            left: 0px
          }

          .banner .next {
            top:42%;
            right: 0px
          }

  </style>
 <body>
 <!--轮播模块-->  
  <div class="banner">
   <!-- 这里为上一页下一页点击按钮 -->
   <span class="pre"> < </span>
   <span class="next"> > </span>
   <!-- 此处为轮播主体,图片。-->
   <a href="###" class="first"><img src="images/1.jpg"/></a>
   <a href="###" ><img src="images/2.jpg"/></a>
   <a href="###" ><img src="images/3.jpg"/></a>
   <!-- 此处为轮播部分下方小点选择-->
   <div class="choose">
    <span class="red"></span>
    <span></span>
    <span></span>
   </div>
  </div>
  <!--Js轮播实现代码 -->
  <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>2){
     $index=0
    }
    $(".choose span").eq($index).addClass("red").siblings().
      removeClass("red");
    next();
    return $exdex=$index;
   });
   //上一页的点击事件
   $(".pre").click(function(){
    $index--;
    if($index<0){
     $index=2
    };
    $(".choose span").eq($index).addClass("red").siblings().
     removeClass("red");
    pre();
    return $exdex=$index;
   });
   //加个定时器3000ms也就是3秒轮播,正常轮播
   var atime=setInterval(function(){
    $(".next").click();   
   },3000);
   //这里为右移和左移的事件函数。
   //右移基本原理就是先让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实现简单图片轮播

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警