简单实现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插件制作 自增长输入框实现代码
Aug 17 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery操作css样式
May 15 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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 curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP中使用curl入门教程
2015/07/02 PHP
Symfony核心类概述
2016/03/17 PHP
PHP中overload与override的区别
2017/02/13 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python二分查找算法的递归实现方法
2016/05/12 Python
Python中with及contextlib的用法详解
2017/06/08 Python
kali中python版本的切换方法
2019/07/11 Python
如何基于python生成list的所有的子集
2019/11/11 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
中专生职业生涯规划书范文
2014/01/10 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
上班看电影检讨书
2014/02/12 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
节能环保标语
2014/06/12 职场文书
2014年中秋寄语
2014/08/11 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
python实现剪贴板的操作
2021/07/01 Python