简单实现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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery实现简单拖拽效果
Jul 20 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+mysql分页代码详解
2008/03/27 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
python3个性签名设计实现代码
2018/06/19 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
电焊工岗位工作职责
2014/07/09 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
党课主持词大全
2015/06/30 职场文书
四十年同学聚会致辞
2015/07/28 职场文书