jQuery图片轮播

Html

Css

#slider_box ul{ padding: 0px; margin: 0px; list-style-type: none; }
#slider_box { width: 500px; float: left; }
#slider { width:500px; height: 300px; margin-top: 10px; position: relative; overflow: hidden; }
#slider #imgs { position: absolute; top: 0; left: 0; }
#slider #imgs li { float: left; z-index: 0; }
#slider  #indexs { position: absolute; bottom: 15px; right: 30px; }
#slider #indexs  li { width: 22px; height: 22px; line-height: 22px; display: inline-block; background: #3e3e3e; color: #fff; border-radius: 50%; text-align: center; cursor: pointer; margin-left: 10px; }
#slider #indexs li.hover { background: #b61b1f; }

/*封装$*/
window.$ = HTMLElement.prototype.$ = function(selector) {
    var elems = (this == window ? document: this).querySelectorAll(selector);
    return elems == null ? null: elems.length == 1 ? elems[0] : elems;
}
/*广告图片数组*/
var imgs = [{
    "i": 0,
    "img": "http://www.jq22.com/img/cs/500x300.png"
},
{
    "i": 1,
    "img": "http://www.jq22.com/img/cs/500x300.png"
},
{
    "i": 2,
    "img": "http://www.jq22.com/img/cs/500x300.png"
},
{
    "i": 3,
    "img": "http://www.jq22.com/img/cs/500x300.png"
},
{
    "i": 4,
    "img": "http://www.jq22.com/img/cs/500x300.png"
},
];
var adv = {
    LIWIDTH: 500,
    DURATION: 300,
    //手动移动的动画总时长
    WAIT: 3000,
    //自动轮播之间等待的时长
    STEPS: 100,
    //动画移动的总步数
    timer: null,
    //保存当前正在播放的定时器的序号
    canAuto: true,
    //设置是否可以自动轮播
    init: function() {
        var self = this;
        self.updateView();

$("#slider").addEventListener("mouseover",
        function() {
            self.canAuto = false;
        },
        false);
        $("#slider").addEventListener("mouseout",
        function() {
            self.canAuto = true;
        },
        false);
        self.automove(); //初始化时，就启动自动轮播
        //找到id为indexs的ul，绑定鼠标进入事件，
        //	获得目标元素target
        //	如果target是LI，且target.innerHTML-1!=imgs第一个元素的i元素
        //		获取id为indexs下的class为hover的li对象，清除样式类
        //		将target的className重新设置为“hover”
        //		计算移动个数target的内容-1-imgs数组中第一个元素的i属性，保存在变量n
        //		调用move方法启动手动移动，传入n
        $("#indexs").addEventListener("mouseover",
        function() {
            var e = window.event || arguments[0];
            var target = e.target || e.srcElement;
            if (target.nodeName == "LI" && target.innerHTML - 1 != imgs[0].i) {
                $("#indexs>.hover").className = "";
                target.className = "hover";
                var n = target.innerHTML - 1 - imgs[0].i;
                self.move(n);
            }
        },
        false);
    },
    updateView: function() { //在移动前后，将imgs刷新到页面
        $("#imgs").style.width = this.LIWIDTH * imgs.length + "px";
        //遍历imgs中每个img对象，同时声明lis空数组
        //	在lis中当前位置添加新元素：<li data-i="当前对象的i"><img src="当前对象的img"></li>
        //	在idxs中当前位置添加新元素，<li>i+l</li>
        //(遍历结束后)
        //设置id为imgs的ul的内容为lis无缝拼接后的结果
        //设置id为indexs的ul的内容为idxs无缝拼接后的结果
        for (var i = 0,
        lis = [], idxs = []; i < imgs.length; i++) {
            lis[i] = "<li data-i='" + imgs[i].i + "'><img src='" + imgs[i].img + "'></li>";
            idxs[i] = "<li>" + (i + 1) + "</li>";
        }
        $("#imgs").innerHTML = lis.join("");
        $("#indexs").innerHTML = idxs.join("");
        //找到#indexs下的class为hover的li，清除class
        //找到#indexs下所有li中下标和imgs数组中第一个对象的i属性相同的li，设置class为hover、
        $("#indexs>.hover").className = "";
        $("#indexs>li")[imgs[0].i].className = "hover";
    },

automove: function() {
        //留住this
        //启动一次性定时器,传入匿名函数封装的moveStep方法调用，在moveStep方法中写死参数1，设置时间间隔为WAIT
        var self = this;
        self.timer = setTimeout(function() {
            if (self.canAuto) {
                self.moveStep(1)
            } else {
                self.automove();
            }
        },
        self.WAIT);
    },

//移动任一个li的方法
    move: function(n) { //n表示要移动的li个数，左移为正
        //停止当前正在运行的timer动画
        //将timer释放
        //调用moveStep方法传入n
        clearTimeout(this.timer);
        this.timer = null;
        //如果右移
        //	将数组结尾n个元素删除后，拼接到imgs数组开头，在保存到imgs
        //	调用updateView方法刷新页面
        //	设置id为imgs的ul的left为n*LIWIDTH
        if (n < 0) {
            imgs = imgs.splice(imgs.length + n, -n).concat(imgs);
            this.updateView();
            $("#imgs").style.left = n * this.LIWIDTH + "px";
        }
        this.moveStep(n);
    },

//将ul移动一次
    moveStep: function(n) { //n表示要移动的li个数，左移为正
        //留住this
        //计算步长，LIWIDTH*n/STEPS,保存在变量step
        //获得id为imgs的ul的计算后的样式，保存在变量style
        //计算新left值：style中的left-step
        //将新left值设置到id为imgs的ul元素的left属性上
        //如果n>0,且新left值>-LIWIDTH*n或n<0,且新left值<0
        //	启动下一次定时器，传入匿名函数封装moveStep方法调用,同时传入DURATION/STEPS作为时间间隔
        //否则（说明移动完成）
        //	将id为imgs的ul的left属性重置为0px
        //再次调用automove方法，启动自动轮播
        //	如果n>0，（说明左移）
        //		从0位置开始删除原imgs数组中n个元素，删除结果直接concat拼接到imgs上，在保存回imgs中，
        //		调用updateView方法，更新页面
        var self = this;
        var step = self.LIWIDTH * n / self.STEPS;
        var style = getComputedStyle($("#imgs"));
        var left = parseFloat(style.left) - step;
        $("#imgs").style.left = left + "px";
        if (n > 0 && left > -self.LIWIDTH * n || n < 0 && left < 0) {
            self.timer = setTimeout(function() {
                self.moveStep(n)
            },
            self.DURATION / self.STEPS);
        } else {
            $("#imgs").style.left = "0px";
            self.automove();
            if (n > 0) {
                imgs = imgs.concat(imgs.splice(0, n));
                self.updateView();
            }
        }
    }
}
adv.init();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

jQuery图片轮播



代码描述：jQuery图片轮播

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

旋木

相关代码

jQuery图片轮播

最新