jQuery插件boxScroll实现图片轮播特效

BoxScroll

常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，到了尽头得往回跑，看看注释就知道了。

代码如下:

HTML

<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>简易图片轮播插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.boxScroll.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="scrollBox">
      <div class="picOuterBox boxStyle">
        <div class="arrow arrowLeft">ToLeft</div>
        <div class="arrow arrowRight">ToRight</div>
        <ul class="picInnerBox boxStyle">
          <li>
            <a href="" title="">
              <img src="images/test.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="" title="">
              <img src="images/test.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="" title="">
              <img src="images/test.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="" title="">
              <img src="images/test.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="" title="">
              <img src="images/test.jpg" alt="">
            </a>
          </li>
        </ul>
      </div>
      <div class="picControl">
        <ul>
          <li class="liSelected">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
    </div>
  </div>
<script type="text/javascript">
  $(document).ready(function(){
    $(".scrollBox").boxScroll();
  });
</script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body{
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
}
.wrap{
  font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
  font-size:14px;
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
  overflow:hidden;
}
.boxStyle{/*照片大小*/
  width: 500px;
  height: 256px;
}
.scrollBox{
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.picInnerBox{
  width: 10000px;/*足够大能放下即可,如果需要上下滚动，改height*/
  overflow: hidden;
}
.picInnerBox li{
  cursor: pointer;
  float: left;
}
.picOuterBox{
  overflow: hidden;

}
.arrow{
  position: absolute;
  top: 45%;
  height: 40px;
  cursor: pointer;
  z-index: 99;
}
.arrow:hover{
  color: #fff;
}
.arrowLeft{
  float: left;
  left: 5%;
}
.arrowRight{
  float: right;
  right: 5%;
}
.picControl{
  overflow: auto;
  width: 100px;
  margin: 0 auto;
}
.picControl ul li{
  cursor: pointer;
  float: left;
  width: 20px;
  height: 20px;
  text-align: center;
}
.picControl ul li:hover{
  color:red;
}
.liSelected{
  color: red;
}

JavaScript

/*
 * boxScroll 0.1
 * 兼容等常见浏览器
 */
 ;(function($,window,document,undefined){
   //定义构造函数
   var BoxObj=function(ele,opt){
     this.$element=ele; //最外层对象
     this.defaults={
       'style': 0 ,//滚动样式选择,默认为普通效果
       'speed': 1 ,//默认为1s
       'direction': 'left',//默认为向左边滚动
       'toLeft':$(ele).children('.picOuterBox').children('.arrowLeft'),//默认格式下重要位置
       'toRight':$(ele).children('.picOuterBox').children('.arrowRight'),
       'ControlUl':$(ele).children('.picControl').children('ul')
     },

     this.options=$.extend({},this.defaults,opt );
     //这里可以添加一些通用方法
   }

   //给构造函数添加方法
   BoxObj.prototype={

       commonScroll:function(){
       //接收对象属性
       var boxWindow=$(this.$element).children('.picOuterBox').children('.picInnerBox');
       var speed=this.defaults.speed;
       var style=this.defaults.style;
       var direction=(this.defaults.direction=='left')? 1 : -1;
       var toLeft=this.defaults.toLeft;
       var toRight=this.defaults.toRight;
       var Control=this.defaults.ControlUl;

       var boxWidth=$(boxWindow).children('li').width();
       var imgIndexMax=$(boxWindow).children('li').length;
       var imgIndex;
       function getImgIndex(){//判断当前图片的位置
         imgIndex=Math.round(parseInt($(boxWindow).css("margin-left"))*(-1)/boxWidth);
       }

       var timer;//必须在外面定义保证全局针对这一功能只有这一个计时器
       timer=setInterval(function(){
         boxScroll(imgIndex,direction);
       },5000);

       function rest(){
         clearInterval(timer);
        timer=setInterval(function(){
           boxScroll(imgIndex,direction);
         },5000);
       }

       //绑定点击按钮
       $(Control).delegate('li', 'click', function() {
         boxScroll($(this).index(),0);
         rest();
       });

       //绑定左右按钮
       $(toLeft).click(function() {
         boxScroll(0,-1);
         rest();
       });
       $(toRight).click(function() {
         boxScroll(0,1);
         rest();
       });

       function boxScroll(index,dir){
         if (!$(boxWindow).is(':animated')) {//当ul窗口没有在动时
           if(!dir){//响应ul li control操作
             //此时dir=0，则依靠传入的imgIndex
             imgIndex=index;
             //其它时候dir!=0,则依靠dir
           }else{//响应toLeft和toRight
             if(dir==1){//向右动
               getImgIndex();
               if (imgIndex==(imgIndexMax-1)) {
                 imgIndex=0;

               }else{
                 imgIndex+=1;
               }
             }else{//向左动
               getImgIndex();
               if (imgIndex==0) {
                 imgIndex=(imgIndexMax-1);
               }else{
                 imgIndex-=1;
               }
             }
           }
           $(Control).children('li').eq(imgIndex).addClass('liSelected');
           $(Control).children('li').eq(imgIndex).siblings().removeClass('liSelected');
           $(boxWindow).animate({
               "margin-left":imgIndex*boxWidth*(-1)+'px'
             }, 1000*speed);
         }
       }
     }
   }

   //在插件中使用windowObj对象的方法，0为vertical，1为horizontal
   $.fn.boxScroll=function(options){
     //创建实体
     var boxObj=new BoxObj(this,options);
     //用尾调的形式调用对象方法
     return boxObj.commonScroll();
   }
 })(jQuery,window,document);

详细下载参见https://github.com/codetker/myBoxScroll。

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • jQuery简单自定义图片轮播插件及用法示例

    jQuery简单自定义图片轮播插件及用法示例

    本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

  • jQuery创建自己的插件(自定义插件)的方法

    jQuery创建自己的插件(自定义插件)的方法

    但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一

  • jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果

    jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. 下载源码 Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入jquery库文件

  • jQuery插件实现图片轮播特效

    jQuery插件实现图片轮播特效

    好了废话不多说了,先看看效果图. HTML部分: <div class="slider"> <div class="ul-box"> <ul> <li><a href="javascript:;"><img src="img/1.jpg"/></a></li> <li><a href="javascrip

  • jQuery的图片轮播插件PgwSlideshow使用详解

    jQuery的图片轮播插件PgwSlideshow使用详解

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides

  • jQuery图片轮播插件——前端开发必看

    jQuery图片轮播插件——前端开发必看

    还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js.jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个小小的插件,这只是一个开始,随着后面的了解的更多,也会写一些更加绚丽的DEMO.有兴趣的朋友可以去看

  • jQuery插件slicebox实现3D动画图片轮播切换特效

    jQuery插件slicebox实现3D动画图片轮播切换特效

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度.autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码. 使用方法: 1.加载插件和jQuery <link type="text/css" rel="stylesheet&

  • jQuery插件实现带圆点的焦点图片轮播切换

    这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

    本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片

    jquery图片轮播插件仿支付宝2013版全屏图片幻灯片

    jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果,在自己的页面里一定要引入jquery 复制代码 代码如下: <div class="flexslider">    <ul class="slides">        <li style="background:url(images/img1.jpg) 50% 0 no-repeat;"></li>        <l

随机推荐