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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery返回定位插件详解
May 15 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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
随机广告显示(PHP函数)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
跟老齐学Python之永远强大的函数
2014/09/14 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python验证码识别的方法
2015/07/10 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
怎样写好自我鉴定
2013/12/04 职场文书
法人授权委托书范本
2014/04/04 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
JavaScript流程控制(循环)
2021/12/06 Javascript