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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 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的FTP学习(三)
2006/10/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python中count函数简单用法
2020/01/05 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
开业庆典主持词
2014/03/21 职场文书
社区班子对照检查材料
2014/08/27 职场文书
民事和解协议书格式
2014/11/29 职场文书
个人自荐书范文
2015/03/09 职场文书
年终工作总结范文
2019/06/20 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技