jQuery plug-in boxScroll implements image carousel effects

jQuery plug-in boxScroll implements image carousel effects_jquery

WBOY

Release： 2016-05-16 15:50:22

Original

1396 people have browsed it

BoxScroll

Simple implementation of common image carousel effects. It can be controlled by digital list or left and right buttons. The logic is very simple, you have to run back when you reach the end, just look at the comments.

The code is as follows:

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>

Copy after login

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;
}

Copy after login

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')&#63; 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);

Copy after login

For detailed download, please see https://github.com/codetker/myBoxScroll.

The above is the entire content of this article, I hope you all like it.