网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 使用原生js写的一个简单slider
内容
    代码如下:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body,div,ul,li {
    margin: 0;
    padding: 0;
    }
    ul,li {
    list-style: none;
    }
    a img {
    border: none;
    }
    .wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    }
    .wrap .prev,
    .wrap .next {
    height: 320px;
    position: absolute;
    left: -50%;
    top: 0;
    background-color: #999;
    opacity: 0.7;
    width: 100%;
    }
    .wrap .next {
    left: auto;
    right: -50%;
    }
    .wrap .prev:hover,
    .wrap .next:hover {
    opacity: 0.5;
    }
    .container {
    width: 100%;
    height: 320px;
    }
    .container ul {
    height: 100%;
    }
    .container li {
    width: 1000px;
    height: 100%;
    float: left;
    }
    .container li a,
    .container li img {
    display: block;
    width: 100%;
    height: 100%;
    }
    .page {
    position: absolute;
    left: 50%;
    bottom: 10px;
    display:none;
    }
    .page span {
    float: left;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
    background: #999;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    }
    .page .select {
    background: #f00;
    }
    </style>
    </head>
    <body>
    <div>
    <div id="container">
    <ul>
    <li><a href="1"><img src="http://www.***.com/uploadfile/2013/1031/20131031084228263.jpg"></a> </li>
    <li><a href="2"><img src="http://www.***.com/uploadfile/2014/0315/20140315023711196.jpg"></a></li>
    <li><a href="3"><img src="http://www.***.com/uploadfile/2014/0228/20140228091207797.jpg"></a></li>
    <li><a href="4"><img src="http://www.***.com/statics/images/new_img/ksss.jpg"></a></li>
    </ul>
    </div>
    <div id="prev"></div>
    <div id="next"></div>
    <div id="page"></div>
    </div>
    <script type="text/javascript">
    /*
    * Slider constructor
    * @param {Node} ele 容器节点
    * @param {Int} index 默认显示第几张
    */
    var Slider = function(ele){
    this.ele = ele;
    this.oList = ele.children[0];
    this.items = this.oList.getElementsByTagName("li");
    this.itemWidth = parseInt(this.items[0].offsetWidth, 10);
    this.page = document.getElementById("page");
    this.prevBtn = document.getElementById("prev");
    this.nextBtn = document.getElementById("next");
    this.init();
    }
    Slider.prototype = {
    constructor: Slider,
    init: function(){
    this.oList.style.position = 'absolute';
    this.oList.style.top = 0;
    this.oList.style.left = 0;
    this.going = 0;
    this.current = 1;
    this.speed = 100;
    this.timer = null;
    this.wrapWidth = parseInt(this.ele.offsetWidth, 10);
    this.pageCircles = null;
    this.prevBtn.style.marginLeft = -this.itemWidth/2 + 'px';
    this.nextBtn.style.marginRight = -this.itemWidth/2 + 'px';
    if(this.items.length > 2) {
    this.setUp();
    } else {
    this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 + 'px';
    this.prevBtn.style.display = "none";
    this.nextBtn.style.display = "none";
    }
    this.oList.style.width = this.itemWidth * this.items.length + 'px';
    },
    setUp:function(){
    var first1 = this.items[0].cloneNode();
    first1.innerHTML = this.items[0].innerHTML;
    first2 = this.items[1].cloneNode();
    first2.innerHTML = this.items[1].innerHTML;
    last1 = this.items[this.items.length-1].cloneNode();
    last1.innerHTML = this.items[this.items.length-1].innerHTML;
    last2 = this.items[this.items.length-2].cloneNode();
    last2.innerHTML = this.items[this.items.length-2].innerHTML;
    this.oList.appendChild(first1);
    this.oList.appendChild(first2);
    this.oList.insertBefore(last1, this.items[0]);
    this.oList.insertBefore(last2, this.items[0]);
    this.buildPage();
    this.bindEvent();
    this.slientGoTo();
    },
    buildPage:function(){
    for(var i = 0,len = this.items.length - 4; i<len; i++) {
    var circle = document.createElement('span');
    circle.innerHTML = i + 1;
    this.page.appendChild(circle);
    }
    this.pageCircles = this.page.getElementsByTagName('span');
    this.addEvent(this.page, 'click', 'gotoIndex');
    this.page.style.display = 'block';
    },
    bindEvent:function(){
    this.addEvent(this.prevBtn, 'click', 'prev');
    this.addEvent(this.nextBtn, 'click', 'next');
    },
    addEvent:function(ele, type, fn, context) {
    context = context || this;
    var innerFun = function(event) {
    var evt = event || window.event;
    if(typeof fn === 'string'){
    context[fn].call(context, this, evt);
    } else {
    fn.call(context, this, evt);
    }
    }
    if(window.addEventListener) {
    ele.addEventListener(type, innerFun, false);
    } else {
    ele.attachEvent('on'+type, innerFun);
    }
    },
    index:function(ele){
    var parentNode = ele.parentNode;
    var eles = parentNode.getElementsByTagName(ele.tagName);
    for(var i = 0, len = eles.length; i<len; i++){
    if(eles[i] == ele) {
    return i;
    }
    }
    },
    hasClass: function(obj, cls) {
    return !!obj.className && obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    },
    addClass: function(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    },
    removeClass:function (obj, cls) {
    if (this.hasClass(obj, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    obj.className = obj.className.replace(reg, ' ');
    }
    },
    gotoIndex:function(eleContext, evt){
    var ele = evt.target || evt.srcElement;
    var index = this.index(ele);
    if(this.current === this.items.length-4 && index === 0) {
    this.current = 0;
    this.slientGoTo();
    } else if(this.current === 1 && index ===this.items.length-5) {
    this.current = this.items.length-3;
    this.slientGoTo();
    }
    this.current = index + 1;
    this.doAnimate();
    },
    prev:function(eleContext, evt){
    this.current--;
    this.doAnimate();
    },
    next:function(eleContext, evt){
    this.current++;
    this.doAnimate();
    },
    doAnimate:function(){
    this.distance = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 - parseInt(this.oList.style.left, 10);
    if(this.distance < 0){
    this.speed = -Math.abs(this.speed);
    } else {
    this.speed = Math.abs(this.speed);
    }
    this.distance = Math.abs(this.distance);
    this.animate();
    },
    animate:function(){
    var that = this;
    this.timer = setTimeout(function() {
    var left = parseInt(that.oList.style.left, 10) || 0;
    if (that.going+Math.abs(that.speed) >= that.distance) {
    if (that.speed > 0) {
    that.oList.style.left = left + that.distance - that.going + 'px';
    } else {
    that.oList.style.left = left - that.distance + that.going + 'px';
    }
    clearTimeout(that.timer);
    that.going = 0;
    that.onceEnd();
    } else {
    that.going += Math.abs(that.speed);
    that.oList.style.left = left + that.speed + 'px';
    that.animate();
    }
    }, 25);
    },
    slientGoTo:function(){
    console.log(this.current);
    this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 + 'px';
    },
    setCircleSelect:function(){
    for(var i=0,len = this.pageCircles.length; i<len; i++) {
    var ele= this.pageCircles[i];
    if(this.hasClass(ele, 'select')) {
    this.removeClass(ele, 'select');
    }
    }
    this.addClass(this.pageCircles[this.current-1], 'select');
    },
    correctCurrent:function(){
    if(this.current === 0) {
    this.current = this.items.length - 4;
    } else if(this.current === this.items.length - 3) {
    this.current = 1;
    } else {
    return false;
    }
    this.slientGoTo();
    },
    onceEnd:function(){
    this.correctCurrent();
    this.setCircleSelect();
    }
    }
    var con = document.getElementById("container");
    var s = new Slider(con);
    </script>
    </body>
    </html>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/16 23:17:00