jQuery实现的网站banner图片无缝轮播效果完整实例


Posted in jQuery onJanuary 28, 2019

本文实例讲述了jQuery实现的网站banner图片无缝轮播效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片轮播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel=" rel="external nofollow" stylesheet">
<style type="text/css">
  html,body{
    padding: 0;
    margin: 0;
  }
  ul,ul li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .box{
  }
  #banner{
    position: relative;
    height:auto;
    overflow: hidden;
  }
  #banner ul{
    position:absolute;
  }
  #banner ul li{
    float: left;
  }
  #banner ul li img{
    width: 100%;
    height: 100%;
  }
  #banner #prevBtn,#banner #nextBtn{
    height:80px;
    width:30px;
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:50%;
    margin-top:-40px;
    font-size:30px;
    line-height:80px;
    text-align:center;
    text-decoration:none;
    color:white;
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  #banner #prevBtn{
    left:0;
  }
  #banner #nextBtn{
    right:0;
  }
  #banner:hover #prevBtn,#banner:hover #nextBtn{
    opacity: 1;
  }
  .dot{
    height:10px;
    width:10px;
    border-radius:10px;
    background:#2196f3;
    display:inline-block;
    margin:5px;
  }
  .on{
    background: #009688;
  }
</style>
</head>
<body>
  <div class="box">
    <div id="banner">
      <ul id="banner-wrap">
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img1.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img2.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img3.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img4.jpg">
        </li>
        <li>
          <img src="http://www.zxhuan.com/wp-content/uploads/2016/02/img5.jpg">
        </li>
      </ul>
    </div>
  </div>
  <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
  <script type="text/javascript">
    (function($,window,document,undefinen){
      $.fn.bannerSwiper=function(option){
        this.default={
          boxWrap:null,//必填
          nextBtn:false,//是否往下启动按钮
          prevBtn:false,//是否往上启动按钮
          autoPlay:false,//是否启动自动播放
          times:3000,//自动轮播的时间间隔,
          speed:600,//点击按钮是切换的速度
          circle:false,//是否启动小圆点
          circleAlign:"center",//小圆点的对其方式
          circleClick:false//小圆点是否可以点击
        }
        var self=this;
        this.time=null;
        this.options=$.extend({},this.default,option);
        self.flag=true;
        // 插件入口
        this.init=function(){
          this.bulid();
        }
        this.bulid=function(){
          var self=this;
          var wrap=self.options.boxWrap;
          self.num=1;
          self.nowTime=+new Date();
          self.width=$(window).width();
          var firstImg=$(wrap).find('li').first();
          var lastImg=$(wrap).find('li').last();
          $(wrap).append(firstImg.clone());
          $(wrap).prepend(lastImg.clone());
          self.length=$(wrap).find('li').length;
          $(wrap).width(self.width*self.length);
          $(wrap).find('li').width(self.width)
          $(wrap).parent().height(480);
          $(wrap).parent().width(self.width);
          $(wrap).css({'left':-self.width*self.num})
          // 是否启动自动轮播
          if(self.options.autoPlay){
            self.plays();
          }
          // 是否启动按钮
          if(self.options.nextBtn){
            self.NextBtn();
          }
          // 是否启动按钮
          if(self.options.prevBtn){
            self.prevBtn();
          }
          // 是否启动小圆点
          if(self.options.circle){
            self.circle()
          }
          if(self.options.circleClick){
            self.clickCircle();
          }
        }
        // // 鼠标移入时
        self.on('mouseenter',function(){
          self.stops();
        })
        // 鼠标移出时
        self.on('mouseleave',function(){
          self.plays(1);
        })
        // 开始计时器,自动轮播
        this.plays=function(){
          var self=this;
          // self.stops();
          console.log('play')
          this.time=setInterval(function(){
            self.go(-self.width)
          },self.options.times);
        }
        // 停止计时器
        this.stops=function(){
          console.log('stop');
          clearInterval(self.time)
        }
        // 手动创建按钮元素
        this.prevBtn=function(){
          var self=this;
          var ele=$("<a href='javascript:;' id='prevBtn'><</a>");
          self.append(ele);
          $('#prevBtn').bind("click",function(){
            self.go(self.width);
          })
        }
        // 手动创建按钮元素
        this.NextBtn=function(){
          var self=this;
          var ele=$("<a href='javascript:;' id='nextBtn'>></a>");
          self.append(ele)
          $('#nextBtn').bind("click",function(){
            self.go(-self.width);
          })
        }
        // 手动创建小圆点
        this.circle=function(){
          var self=this;
          var ele=$('<div id="circle-wrap"></div>');
          for(var i=0;i<self.length-2;i++){
            $('<a class="dot" href="javascript:;" rel="external nofollow" ></a>').appendTo(ele)
          }
          ele.css({
            "position":"absolute",
            'bottom':'0',
            'right':'0',
            'left':'0',
            'height':'20px',
            "padding":"0 10px",
            'text-align':self.options.circleAlign
          });
          self.append(ele);
          self.playCircle(this.num-1);
        }
        //小圆点指定当前项
        this.playCircle=function(num){
          $('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
        }
        // 点击小圆点
        this.clickCircle=function(){
          var self=this;
          $('#circle-wrap').find('.dot').on('click',function(){
            self.num=$(this).index()+1;
            self.circlePlay()
          })
        }
        // 点击小圆点,图片切换
        this.circlePlay=function(){
          self.flag=true;
          if(self.flag){
            self.flag=false;
            $(self.options.boxWrap).stop().animate({
              'left':-self.num*self.width
            },self.options.speed,function(){
              self.flag=true;
            });
          }
          self.playCircle(this.num-1);
        }
        // 点击按钮,进行轮播,以及自动轮播
        this.go=function(offset){
          var self=this;
          if(self.flag){
            self.flag=false;
             if(offset<0){
               self.num++;
               if(self.num>self.length-2){
                 self.num=1;
               }
             }
             if(offset>0){
               self.num--;
               if(self.num<=0){
                self.num=self.length-2
               }
             }
             if(Math.ceil($(self.options.boxWrap).position().left)<-(self.length-2)*self.width){
              $(self.options.boxWrap).css({
                'left':-self.width
              });
            }
            if(Math.ceil($(self.options.boxWrap).position().left)>-self.length){
              $(self.options.boxWrap).css({
                'left':-self.width*(self.length-2)
              })
            }
            self.playCircle(this.num-1);
            $(self.options.boxWrap).stop().animate({
              'left':$(self.options.boxWrap).position().left+offset
            },self.options.speed,function(){
              self.flag=true;
            });
          }
        }
        this.init();
      }
    })(jQuery,window,document)
    $('#banner').bannerSwiper({
      boxWrap:"#banner-wrap",
      nextBtn:true,
      prevBtn:true,
      autoPlay:true,
      circle:true,
      circleClick:true
    })
  </script>
</body>
</html>

运行效果:

jQuery实现的网站banner图片无缝轮播效果完整实例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 #jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
You might like
Yii2框架中一些折磨人的坑
2019/12/15 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
Javascript的闭包
2009/12/31 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
浅谈js原生拖放
2016/11/21 Javascript
jquery编写日期选择器
2017/03/16 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
详解vue 命名视图
2019/08/14 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python操作excel的方法
2018/08/16 Python
python3安装speech语音模块的方法
2018/12/24 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python版中国省市经纬度
2020/02/11 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Python descriptor(描述符)的实现
2020/11/15 Python
2014教师个人自我评价范文
2014/09/13 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
永远是春天观后感
2015/06/12 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android