简单实现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.validate表单验证插件使用详解
Jun 21 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
html中两种获取标签内的值的方法
Jun 16 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中函数内引用全局变量的方法
2008/10/20 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
javascript实用小函数使用介绍
2013/11/11 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python QQBot库的QQ聊天机器人
2019/06/19 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
初学者学习Python好还是Java好
2020/05/26 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
李宁官方网店:中国运动品牌
2017/11/02 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
网络书店创业计划书
2014/02/07 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
怎样写观后感
2015/06/19 职场文书
2015年暑假生活总结
2015/07/13 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技