xml地图|网站地图|网站标签 [设为首页] [加入收藏]

无缝滚动,jQuery插件之路

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:63 发布时间:2019-05-08
摘要:CSS部分代码 jQuery插件之路(贰)——轮播,jquery插件之路 还记得在此以前刚接触前端的时候,浏览各大网址,繁多都少不了的有个轮播的法力,这年本人是二个原原本本的小白,想着那么

CSS 部分代码

jQuery插件之路(贰)——轮播,jquery插件之路

还记得在此以前刚接触前端的时候,浏览各大网址,繁多都少不了的有个轮播的法力,这年本人是二个原原本本的小白,想着那么些图片滚动起来还真是有趣,是怎么让这一个图片在贰个大方向上海市总是的轮转呢。后来逐级的接触多了,感到这一个也是so easy的嘛,于是为了深化对js、jQuery的接头以及索求网址上各样成效的兑现方式,就有了jQuery插件之路那样叁个各个,当然为了纪念当初对轮播的执念,于是就从轮播初叶写了3个微小插件,那只是一个始发,随着后边的垂询的越多,也会写一些一发灿烂的DEMO。源代码在此地:点本身赢得代码,有乐趣的爱侣能够去看下吧。好了废话不多说了,下边附上代码。

HTML部分:

 

    <div class="slider">
        <div class="ul-box">
            <ul>
                <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/6.jpg"/></a></li>
            </ul>
        </div>
        <div class="mask"></div>
        <div class="prev"><img src="img/btn_l.png"/></div>
        <div class="next"><img src="img/btn_r.png"/></div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/slider.js"></script>
    <script>
        $('.slider').slider({
            width : 640,  
            height : 270,   
            during : 2000, //动画执行间隔
            speed : 500,   //动画速度
            btnSize : 20,  //底部遮罩层的按钮大小
            btnSpace : 10, //底部的按钮间隙
            direction : 1  //轮播方向默认为1,图片向左移动
        });
    </script>

 

CSS部分:

图片 1*{ margin: 0; padding: 0; box-sizing: border-box; } .slider{ position: relative; overflow: hidden; } .slider ul{ list-style: none; float: left; } .slider ul li{ float: left; } .slider .mask{ position: absolute; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, .3); } .slider .mask .sliderBtn{ position: absolute; border-radius: 50%; background-color: #fff; cursor: pointer; background: radial-gradient(white 20%, transparent 50%); } .slider .prev, .slider .next{ position: absolute; width: 45px; height: 100%; background-color: rgba(0, 0, 0, .2); cursor: pointer; top: 0; display: none; } .slider .prev{ left: 0; } .slider .next{ right: 0; } .slider .prev img, .slider .next img{ position: absolute; top: 50%; left: 50%; margin-top: -22.5px; margin-left: -22.5px; } View Code

JS部分:

图片 2(function ($) { $.fn.slider = function (setting) { //给jQuery的实例对象绑定2个slider方法 var defaultSetting = { width : 640, height : 270, during : 三千, speed : 500, btnSize : 30, btnSpace : 十, direction : 1 } setting = $.extend(true, {}, defaultSetting, setting); //用传入的参数替换掉暗许的装置 return this.each(function (i, item) { var _setInterval = window.setInterval; window.setInterval = function (callback, timer, param) { //重写setInterval函数,让其得以传参 var args = Array.prototype.slice.call(arguments, 二); var _fn = function () { callback.apply(null, args); } return _setInterval(_fn, timer); } var _this = $(this), ulBox = $('.ul-box', this), ul = $('ul', this), li = $('li', ul), img = $('img', li), len = li.size(), mask = $('.mask', this), index = 0, //用来支配按键的下标 flag = true, //标记动画是或不是实施到位 gap, //试行动画的按键下标和当下按键的下标的差 timer; //坚持计时器 _this.width(setting.width).height(setting.height); ulBox.width(setting.width * 3 * len).height(setting.height).css({ marginLeft: -setting.width * len }); ul.width(setting.width * len).height(setting.height); img.width(setting.width).height(setting.height); mask.height(setting.btnSize 2 * setting.btnSpace); //添加btn for(var i = 0, str = ''; i < len; i ){ str = '<div class="sliderBtn"></div>'; } mask.html(str); var ulFir = ul.clone(true); var ulSec = ul.clone(true); var sliderBtn = $('.sliderBtn', '.mask'); ulBox.append(ulFir); ulBox.append(ulSec); sliderBtn.each(function (i, item) { $(item).css({ width : setting.btnSize, height : setting.btnSize, top : setting.btnSpace, left : parseInt(setting.width - (setting.btnSize setting.btnSpace *2) *len, 10) /2 setting.btnSize * i setting.btnSpace * i * 贰 setting.btnSpace }); $(item).mouseenter(function () { gap = Math.abs(i - index); i > index ? (flag && ani(一, gap)) : (flag && ani(0, gap)); }) }); btnAni(0); //按键样式变化 function btnAni (index) { $('.sliderBtn').css('background', 'radial-gradient(white 1/5, transparent 二分一)'); $('.sliderBtn').eq(index).css('background', 'radial-gradient(white 百分之十, transparent 3/拾, white 百分之七十)'); } //动画 function ani (direction, num) { if(flag){ //暗许一向左运动,0向右运动 flag = false; var ulfir = $('ul', ulBox).eq(0); var left = parseInt(ulfir.css('margin-left'), 10); if(direction){ index = num; index = index % len; left = left - num * setting.width; ulfir.animate({ marginLeft: left }, setting.speed, function () { if(left <= -len * setting.width){ ulfir = ulfir.remove(); ulfir.css('margin-left', 0); ulBox.append(ulfir); } flag = true; }); }else{ index -= num; index = index <= -1 ? len - 1 : index; left = left num * setting.width; ulfir.animate({ marginLeft: left }, setting.speed, function () { if(left >= len * setting.width){ var ulLast = $('ul', ulBox).eq(2).remove(); ulLast.css('margin-left', 0); ulBox.prepend(ulLast); ulfir.css('margin-left', 0); } flag = true }) } btnAni(index) } } //定时器 timer = setInterval(ani, setting.during, setting.direction, 1); _this.hover(function () { $('.prev', this).css('display', 'block'); $('.next', this).css('display', 'block'); clearInterval(timer); }, function () { $('.prev', this).css('display', 'none'); $('.next', this).css('display', 'none'); timer = setInterval(ani, setting.during, setting.direction, 1); }) $('.next').click(function () { flag && ani(1, 1); }) $('.prev').click(function () { flag && ani(0, 1); }) }) } })(jQuery) View Code

如上就是大半全部的代码了,一些相比较主要的地方早就用注释好了,这里就不再叙述。假使有何倒霉的地点,万望告知,不胜感激。前些天就先写到这里了,小编敲键盘码字也不易于,假如您认为您对本文还可以提得上来那么一小点乐趣的话,请稍微活动下您的左侧,帮点下赞,谢谢^_^。下边附上一张效果图

图片 3

 

还记得在此之前刚接触前端的时候,浏览各大网址,多数都少不了的有个轮播的遵守,那年自身...

图片 4

<style type="text/css">
     ul{
       padding:0;
       margin:0;
       list-style:none;
     }
     img{
       vertical-align:top;
     }
      .slider{
         width:490px;
         height:170px;
         margin:100px auto;
         border:1px solid red;
         padding:5px;
         position:relative;
      }
      .box{

       width:100%;
       height:100%;
       position:relative;
       overflow:hidden;
      }
      .box ul{
         width:900%;
         height:100%;
         position:absolute;
         left:-490px;
         top:0;

      }
      .box ul li{
        float:left;
      }

    .slider .circles{
      position:absolute;
      left:50%;
      margin-left:-70px;
      bottom:10px;

    }
    .slider .circles ul li{
       width:18px;
       height:18px;
       background:#ff6600;
       text-align:center;
       line-height:18px;
       float:left;
       margin-right:10px;
       cursor:pointer;
    }
    .oldColor{

      background:#ff6600!important;

    }

    .newColor{
       background:#ff0000!important;
    }

    .slider a{
       text-decoration:none;
       font-size:20px;
       height:30px;
       width:30px;
       position:absolute;
       top:50%;
       margin-top:-15px;
       background:rgba(0,0,0,0.3);
       line-height:30px;
       text-align:center;
       color:#eee;

    }
    .slider a:hover{
       background:rgba(0,0,0,0.7);
    }

    .slider .next{
     right:5px;
    }

    .slider .prev{
     left:5px;
    }

图片 5

HTML部分

 

<body>
  <div class="slider">
        <div class="box">
           <ul>
              <li><img src="images/05.jpg" alt="图片 6" /></li>
              <li><img src="images/01.jpg" alt="图片 7" /></li>
              <li><img src="images/02.jpg" alt="图片 8" /></li>
              <li><img src="images/03.jpg" alt="图片 9" /></li>
              <li><img src="images/04.jpg" alt="图片 10" /></li>
              <li><img src="images/05.jpg" alt="图片 11" /></li>
            <li><img src="images/01.jpg" alt="图片 12" /></li>
           </ul>
       </div>
      <div  class="circles">
            <ul>
                <li class="newColor">1</li>
                <li>2</li>
                <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
        </div>
         <a href="javascript:;" class="prev">&lt;</a>
         <a href="javascript:;" class="next">&gt;</a>
      </div>

 对于js部分:

JS部分

<script>

/*
@1 图片移动时间
@二 图片大小
@3 节点指标{
属性名不可能改! 属性值能够改!
"circles":".circles ul li", //全部小圆点

window.onload=function(){

"slider":".slider", //轮播图盒子
"imgBox":".box ul", //包罗全部图片的盒子
"prev":".prev", //左切换开关
"next":".next" //右切换按钮
}
*/

}

function slider(imgMoveTime,imgWidth,objDom)
{

var all=document.getElementById("all");
var screen=document.getElementById("screen");
var imgWidth=screen.offsetWidth;
var ul=document.getElementById("ul");
var ulLiArr=ul.children;
var ol=screen.children[1];
var arr=screen.children[2];
var left=document.getElementById("left");
var right=document.getElementById("right");

function $$(name){
return document.querySelectorAll(name);
}
function $(name){
return document.querySelector(name);
}

//copy
ul.appendChild(ulLiArr[0].cloneNode(true));
//ol内容填充
for (var i=0;i<ulLiArr.length-1;i ){
var newli=document.createElement("li");
newli.innerHTML=i 1;
ol.appendChild(newli);
}

function getCss(ele,style){
return window.getComputedStyle?getComputedStyle(ele)[style]:obj.CurrentStyle(style);
}

//点亮样式
var olLiArr=ol.children;
olLiArr[0].className="current";

/*
Dom节点
*/

//绑定动画
for (var i=0;i<olLiArr.length;i ){
olLiArr[i].onmouseover=function(){
for(var j=0;j<olLiArr.length;j ){
olLiArr[j].className="";
}
this.className="current";
animate(ul,-imgWidth*(this.innerHTML-1));
key=square=this.innerHTML-1;

var circles=$$(objDom["circles"]); //全部小圆点
var slider=$(objDom["slider"]); //轮播图盒子
var imgBox=$(objDom["imgBox"]); //包罗全数图片的盒子
var prev=$(objDom["prev"]); //左切换开关
var next=$(objDom["next"]); //右切换开关
var sign=true; //一张切换好了技能再切换 sign作为标记是或不是切换实现
var len=circles.length;
var circleLen=circles.length;
var boundLeft=imgWidth*-1*(circleLen 一);//轮播图满意左边界的值在运动后转手变到钦定地方

}
}
//右侧开关事件
var key=0;
var square=0;
right.onclick=auto;
//左侧按键事件
left.onclick=auto1;

/*日子运动函数*/
function offset(distance)
{
var S=distance;
var T=imgMoveTime;
var oldT=new Date().getTime();
var s=0;
var t=0;
var newT=0;
var timer=null;
clearInterval(timer);
var position=imgBox.offsetLeft;
timer=setInterval(function(){
newT=new Date().getTime();
t=newT-oldT;

//定时器
var timer=setInterval(auto,1000);

s=S*t/T;
if(t/T>=1){

all.onmousemove=function(){
arr.style.display="block";
clearInterval(timer);
}
all.onmouseout=function(){
arr.style.display="none";
timer=setInterval(auto,1000);
}
//左侧按键的包裹
function auto(){
key ;
if (key===6){
ul.style.left=0;
key=1;
}
square ;
if (square===5){
square=0;
}
for(var j=0;j<olLiArr.length;j ){
olLiArr[j].className="";
}
olLiArr[square].className="current";
animate(ul,-imgWidth*key);
}
//左侧按钮的包裹
function auto1(){
key--;
if (key===-1){
ul.style.left=-imgWidth*5 "px";
key=4;
}
square--;
if (square===-1){
square=4;
}
for(var j=0;j<olLiArr.length;j ){
olLiArr[j].className="";
}
olLiArr[square].className="current";
animate(ul,-imgWidth*key);
}
}
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var sep=target>ele.offsetLeft?10:-10;
ele.style.left=ele.offsetLeft sep "px";
if (Math.abs(target-ele.offsetLeft)<=Math.abs(sep)){
ele.style.left=target "px";
clearInterval(ele.timer);
}
},10);
}

imgBox.style.left=position S "px";
/*
实现Infiniti循环
当满意条件刹那间变到钦命地点
欺骗性
*/

</script>

if(imgBox.offsetLeft<=boundLeft){

imgBox.style.left=imgWidth*-1 "px";
}
else if(imgBox.offsetLeft>=0){

imgBox.style.left=imgWidth*-1*circleLen "px";
}
/*
标识属性 上一张图纸切换好了 本领发轫上马下2次切换
*/
sign=true;
clearInterval(timer);

}
else{
sign=false;

imgBox.style.left=position s "px";
}
},1000/60);

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:无缝滚动,jQuery插件之路

关键词: 68399皇家赌场

上一篇:最齐全的上传图片方法

下一篇:没有了

频道精选

最火资讯