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

本文实例讲述了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>

运行效果:

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

(0)

相关推荐

  • 在vue项目中使用Jquery-contextmenu插件的步骤讲解

    使用步骤: 1.安装: npm i jquery-contextmenu --save-dev 2.在main.js文件中引包 import Jquery_contextmenu from 'jquery-contextmenu' Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/dist/jquery.contextMenu.css' 注意: 在引入样式时可以点击进去jquery-contextmenu的安装目录中查找对应的css文件

  • 详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面.Ajax使我们的项目更小.更快,更友好,在前端开发有很高的地位,也是面试题的热点.本次测试是在localhost本地环境. 1.原生ajax (1)html前端代码get请求方式创建一个ajax实例xhr

  • Jquery实现无缝向上循环滚动列表的特效

    效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1</span> <span>title2</span> <span>title3</span> </div> <div class="slide-container"><!--css设置时,注意高度是显示

  • jQuery.parseJSON()函数详解

    jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象. 所谓"格式完好",就是要求指定的字符串必须符合严格的JSON格式,例如:属性名称必须加双引号.字符串值也必须用双引号. 如果传入一个格式不"完好"的JSON字符串将抛出一个JS异常,例如:以下字符串均符合JSON格式,但它们不是格式完好的JSON字符串(因此会抛出异常): // 以下均是字符串值,省略了两侧的引号,以便于展现内容 {id: 1} // id

  • Node.js Event Loop各阶段讲解

    Event Loop阶段描述图 timers timer阶段处理setTimeout于setInterval回调,开始处理的时机与poll阶段有关联. pending callbacks 该阶段执行某些系统操作的回调,比如TCP套接字在连接时收到ECONNREFUSED. 网上有一些将该阶段称为I/O callbacks的文章都是过时错误的,具体可以移步Node.js官方库下面的这个issue: #1118. idle, prepare 内部使用,忽略. poll poll是一个核心阶段,等新I

  • Jquery的autocomplete插件用法及参数讲解

    var emails = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi", to: "live@japan.jp" }, { name: "Master <em>Sync</em&g

  • 零基础之Node.js搭建API服务器的详解

    零基础之Node.js搭建API服务器 这篇文章写给那些Node.js零基础,但希望自己动手实现服务器API的前端开发者,尝试帮大家打开一扇门. HTTP服务器实现原理 HTTP服务器之所以能提供前端使用的API,其实现原理是服务器保持监听计算机的某个端口(通常是80),等待客户端请求,当请求到达并经过一系列处理后,服务器发送响应数据给到前端. 平时大家通过Ajax调用API,即是发起一次请求,经过服务器处理后,得到结果,然后再进行前端处理.如今使用高级编程语言,要实现服务器那部分功能已经变得非

  • jquery无缝图片轮播组件封装

    图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接. dom结构 首先是dom结构,将所有内容放入一个大盒子,应用ul标签存放图片列表,圆点定位图片位置. <div id="box"> <ul id="banners"> <li class="banners-img"><img src="img/DSC_1913.JPG" />

  • jQuery each和js forEach用法比较

    本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js和jquery都有类似的方法,js用的是forEach而jquery用的是each,简单举例; var arr = new Array(["b", 2, "a", 4],["c",3,"d",6]); arr.forEach(function(item){ alert(item); //b, 2, a, 4

  • 在Vue项目中引入JQuery-ui插件的讲解

    安装:  npm install jquery-ui-dist -S 引入: import 'jquery-ui-dist/jquery-ui' 更改配置文件: 1.添加jquery:'jquery' resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), jquery:'jquery', } }, // 添加代码 plugins:

随机推荐