简单实现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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Smarty保留变量用法分析
2016/05/23 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
js变量以及其作用域详解
2020/07/18 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python -v 报错问题的解决方法
2020/09/15 Python
用Python制作音乐海报
2021/01/26 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
什么是接口(Interface)?
2013/02/01 面试题
自考生自我鉴定范文
2013/10/01 职场文书
自我评价是什么
2014/01/04 职场文书
毕业生自荐书
2014/02/03 职场文书
导购员的岗位职责
2014/02/08 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
大学学风建设方案
2014/05/04 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
消防演习通知
2015/04/25 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2016中秋节问候语
2015/11/11 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript