简单实现jQuery轮播效果


Posted in jQuery onAugust 18, 2017

本文实例为大家分享了jQuery轮播效果展示的具体代码,供大家参考,具体内容如下

jQ代码:

在写jQuery代码之前一定要先导库,此处我用的是3.0的库

<script src="jquery-3.0.0.js"></script>
  <script type="text/javascript">
      var timer;
      $(function() {
        //设置图片向左移
        imgshow();
        //点击暂停按钮事件
        $(".pause").click(function () {
          clearInterval(timer);
        });
        //点击播放按钮事件
        $(".play").click(function () {
          imgshow();
        });
        //点击左按钮
        $(".prev").click(function () {
          imganimation("left");
        });
        //点击右按钮
        $(".next").click(function () {
          imganimation("right");
        });
        function imganimation(res) {
          //图片向左走的轮播
          if(res=="right"){
            //animate()动画第一个li向左移动20%
            $(".lilist:first").animate({
              "marginLeft": "-20%"
            }, 700, "linear", function () {
              //这个li回到原来的位置
              $(this).css("marginLeft", "0px");
              //将它追加到ul的最后的位置
              $(this).appendTo($(".ullist"));
            });
            //设置小框的图片轮播,原理与大框图片轮播一致
            $(".s_lilist:first").animate({
              "marginLeft": "-20%"
            }, 650, "linear", function () {
              $(this).css("marginLeft", "0px");
              $(this).appendTo($(".s_ullist"));
            });
          }else {
            //图片向右走,与向左的原理相同
            $(".lilist:first").animate({
              "marginLeft": "20%"
            }, 700, "linear", function () {
              $(this).css("marginLeft", "0px");
              $(".lilist:last").prependTo($(".ullist"));
            });
            $(".s_lilist:first").animate({
              "marginLeft": "20%"
            }, 650, "linear", function () {
              $(this).css("marginLeft", "0px");
              $(".s_lilist:last").prependTo($(".s_ullist"));
            });
          };
        };
        //默认图片自动向左走
        function imgshow() {
          timer = setInterval(function (){
                imganimation("right");
              } , 2000);
        };
      });
    </script>

 css样式:

* {
        margin: 0;
        padding: 0;
      }

      .divbg {
        width: 100%;
        height: 350px;
        /*overflow: hidden;*/
        position: relative;
      }

      .mb {
        width: 30%;
        height: 350px;
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
      }

      .mb:first-child {
        left: 0px;
      }

      .mb:nth-child(2) {
        right: 0px;
      }

      .ullist {
        width: 200%;
        height: 350px;
        margin-left: -50%;
      }

      .lilist {
        width: 20%;
        height: 350px;
        list-style: none;
        float: left;
      }

      .imglist {
        width: 100%;
        height: 100%;
      }
      .divblock{
        width: 20%;
        height: 70%;
        border: 4px solid rgba(255, 255, 255, 0.32);
        position: absolute;
        z-index: 5;
        left: 46%;
        top: 15%;
        overflow: hidden;
      }
      .s_mb{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        z-index: 10;
      }
      .s_ullist{
        width: 500%;
        height: 100%;
        margin-left: -200%;
      }
      .s_lilist{
        width: 20%;
        height: 100%;
        list-style: none;
        float: left;
      }
      .s_imglist{
        height: 100%;
        width: 100%;
      }
      .s_mb img{
        margin-left: 16%;
        margin-top: 65%;
        cursor: pointer;
      }

html样式:

<div class="divbg">
    <div class="divblock">
       <div class="s_mb">
         <img class="prev" src="./img2/btn_prev.png" />
         <img class="pause" src="./img2/btn_pause.png" />
         <img class="play" src="./img2/btn_play.png" />
         <img class="next" src="./img2/btn_next.png" />
       </div>
       <ul class="s_ullist">
         <li class="s_lilist">
          <img class="s_imglist" src="img2/2121.jpg" />
         </li>
         <li class="s_lilist">
          <img class="s_imglist" src="img2/2122.jpg" />
         </li>
         <li class="s_lilist">
          <img class="s_imglist" src="img2/2123.jpg" />
         </li>
         <li class="s_lilist">
          <img class="s_imglist" src="img2/2124.jpg" />
         </li>
         <li class="s_lilist">
          <img class="s_imglist" src="img2/2123.jpg" />
         </li>
       </ul>
    </div>
    <div class="mb"></div>
    <div class="mb"></div>
    <ul class="ullist">
      <li class="lilist">
        <img class="imglist" src="img2/2121.jpg" />
      </li>
      <li class="lilist">
        <img class="imglist" src="img2/2122.jpg" />
      </li>
      <li class="lilist">
        <img class="imglist" src="img2/2123.jpg" />
      </li>
      <li class="lilist">
        <img class="imglist" src="img2/2124.jpg" />
      </li>
      <li class="lilist">
        <img class="imglist" src="img2/2123.jpg" />
      </li>
    </ul>
  </div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
简单实现jQuery手风琴效果
Aug 18 #jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 #jQuery
You might like
php中mkdir函数用法实例分析
2014/11/15 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python中如何获取类属性的列表
2016/12/26 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python 识别图片中的文字信息方法
2018/05/10 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
关于VPN
2012/06/10 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
毕业生应聘求职信
2014/07/10 职场文书
委托证明范本
2014/11/25 职场文书
学生逃课检讨书
2015/02/17 职场文书
工作简报格式范文
2015/07/21 职场文书
标准发言稿结尾
2019/07/18 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫