首页 > Js/Jquery

jQuery插件开发之boxScroll与marquee

发表于2015-07-14 14:43:29| --次阅读| 来源webkfa| 作者js,javascript

摘要：BoxScroll 常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，下面的Marquee形成环，这个到了尽头得往回跑，看看注释就知道了。 代码如下:HTML简易图片轮播插件 ToLeft ...

BoxScroll

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

      代码如下:

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。

 

Marquee

      模仿IE下面的marquee效果，鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部，用append和prepend模拟数组的push()和shift()。

      代码如下:

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>模拟marquee标签效果的简单实现</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.marquee.js"></script>
</head>

<body>
    <div class="wrap">
        <div class="marquee">
            <ul>
                <li>
                    <a href="" title="">1
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">2
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">3
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">4
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">5
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">6
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">7
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="" title="">8
                        <img src="images/test.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".marquee").marquee();
    });
</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;
}
.marquee{
    margin: 0 auto;
    width: 960px;
    height: 300px;
    overflow: hidden;
}
.marquee ul{
    width: 10000px;
}
.marquee ul li{
    float: left;
    width: 500px;
    text-align: center;
}
.marquee ul li a{

}
.marquee ul li a:hover{
    color: red;
}

 

JavaScript

/*
 * boxScroll 0.1
 * 兼容IE8,FF,Chrome等常见浏览器
 */
 ;(function($,window,document,undefined){
     //定义构造函数
     var BoxObj=function(ele,opt){
         this.$element=ele; //最外层对象
         this.defaults={
             'style': 0 ,//滚动样式选择,默认为普通效果
             'speed': 1 ,//默认为1s
             'direction': 'left'//默认为向左边滚动
         },
     
         this.options=$.extend({},this.defaults,opt );
         //这里可以添加一些通用方法    
     }

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

         commonScroll:function(){
             //接收对象属性
             var obj=this.$element;
             var boxWindow=$(this.$element).children('ul');
             var speed=this.defaults.speed;
             var style=this.defaults.style;
             var direction=(this.defaults.direction=='left')? 1 : -1;
             var lists=$(boxWindow).children('li');
             var len=$(lists).length;
             var boxWidth=$(lists[0]).width();
             var timer;
             var step=(this.defaults.direction=='left')? 0 : boxWidth;

             function move(style,speed,direction){
                 if (style==0) {
                     if (direction==1) {
                         step+=1;
                         if(step>boxWidth){
                             step-=boxWidth;
                             $(boxWindow).append($(boxWindow).children().eq(0));//将第一项放在最后，相当于push(0),shift()
                         }else{
                             $(obj).scrollLeft(step);
                         }
                     }else if (direction== -1) {
                         step-=1;
                         if(step<0){
                             step+=boxWidth;
                             $(boxWindow).prepend($(boxWindow).children().eq(len-1));//将最后一项放在最前，相当于pop(last),unshift()
                         }else{
                             $(obj).scrollLeft(step);
                         }
                     }else{//不执行之外的数值

                     }
                 }else{//留待扩展,多了改switch

                 }
             }

             timer=setInterval(function(){
                 move(style,speed,direction);
             },10*speed); //由于时间取得小，肉眼就看不出来

            $(lists).each(function() {//鼠标移上暂停
                $(this).hover(function() {
                    clearInterval(timer);
                }, function() {
                    clearInterval(timer);
                    timer=setInterval(function(){
                         move(style,speed,direction);
                     },10*speed);
                });
            });
         }
             
     }

     $.fn.marquee=function(options){
         //创建实体
         var boxObj=new BoxObj(this,options);
         //用尾调的形式调用对象方法
         return boxObj.commonScroll();
     }
 })(jQuery,window,document);

 

      详细下载见https://github.com/codetker/myMarquee

相关文章

最新发布

阅读排行

热门文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1