素材牛VIP会员

简单的纯JS焦点轮播图效果

 所属分类:网页特效-焦点图/幻灯片

 浏览:1292次  评论:0次  更新时间:2016-10-11
牛币素材VIP可免积分下载
简单的纯JS焦点轮播图效果兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:简单的纯JS焦点图和轮播图,代码注释非常全,很实用

详细介绍

使用方法:

引用CSS样式

.all{ width: 500px; height: 200px; padding: 7px; border: 1px solid #2D2D2D; margin: 100px auto; position: relative; }
.screen{width:500px;height:200px;overflow:hidden; position:relative;}
.screen li{ width:500px; height:200px; overflow:hidden; float:left;}
.screen ul{ position:absolute; left:0; top:0px; width:3000px;}
.all ol{ position:absolute; right:10px; bottom:10px; line-height:20px; text-align:center;}
.all ol li{ float: left; width: 15px; height: 15px; background: #fff;  margin-left: 5px; cursor: pointer; font-size: 10px; font-family: Verdana; line-height: 15px; border-radius: 15px; }
.all ol li.current{ background:yellow;}

引用JS

window.onload= function() {
    var box  = document.getElementById("all");  //   获得大盒子
    var ul = box.children[0].children[0];  // 获取ul
    var ulLis = ul.children;  //  ul 里面的所有  li
    // 复习:  cloneNode()     克隆节点       追加a.appendChild(b)  把b 放到a 的最后面
    //1.  ulLis[0].cloneNode(true)  克隆  节点
    ul.appendChild(ulLis[0].cloneNode(true));   // ul 是 a   ulLis[0].cloneNode(true) 是b
    //2. 插入 ol 里面的li
    var ol = box.children[1];  // 获得ol
    // 因为 我们要创建很多个 ol 里面的li 所以需要用到for 循环哦
    for(var i=0;i<ulLis.length-1;i++) {   // ul 里面的li  长度 要减去 1  因为我们克隆一个
        // 创建节点 li
        var li = document.createElement("li");
        li.innerHTML = i + 1;   //  存在加1 的关系
        // a.appendChild(b);
        ol.appendChild(li);
    }
    var olLis = ol.children;  // 找到 ol 里面的li
    olLis[0].className = 'current';
    // 3. 动画部分  遍历小li ol
    for(var i=0;i<olLis.length;i++) {
        olLis[i].index = i;  // 赋予索引号
        olLis[i].onmouseover = function() {
            // 清除所有人
            for(var j=0;j<olLis.length;j++) {
                olLis[j].className = "";
            }
            this.className = 'current';
            animate(ul,-this.index*ulLis[0].offsetWidth);
            key = square = this.index; // 鼠标经过 key square 要等于 当前的索引号
        }
    }
   // 4. 定时器部分  难点
    var timer = null;  // 定时器
    var key = 0; // 用来控制图片的播放的
    var square = 0;  // 用来控制小方块的
    timer = setInterval(autoplay,3000);   // 每隔3s 调用一次 autoplay
    function autoplay() {
        key++;   // key == 1  先 ++
        console.log(key); //  不能超过5
        if(key > ulLis.length - 1)
        {
           // alert('停下');
            ul.style.left = 0;
            key = 1;  // 因为第6张就是第一张,我们已经播放完毕了, 下一次播放第2张
            // 第2张的索引号是1
        }
        animate(ul,-key*ulLis[0].offsetWidth);
        // 小方块的做法
        square++;  // 小方块自加1
        square = square>olLis.length-1 ? 0 : square;
        /// 清除所有人
        for(var i=0;i<olLis.length;i++) {
            olLis[i].className = "";
        }
        olLis[square].className = "current";   // 留下当前自己的
    }
    // 鼠标经过和停止定时器
    box.onmouseover = function() {
        clearInterval(timer);
    }
    box.onmouseout = function() {
        timer = setInterval(autoplay,3000);  // 一定这么开
    }
    //  基本封装
    function animate(obj,target) {
        clearInterval(obj.timer);  // 要开启定时器,先清除以前定时器
        // 有2个参数 第一个 对象谁做动画  第二 距离 到哪里
        // 如果 offsetLeft 大于了  target 目标位置就应该反方向
        var speed = obj.offsetLeft < target ? 15 : -15;
        obj.timer = setInterval(function() {
            var result = target - obj.offsetLeft;  //  他们的值 等于 0 说明完全相等
            // 动画的原理
            obj.style.left = obj.offsetLeft + speed  + "px";
            if(Math.abs(result) <= 15) {
                obj.style.left = target + "px";   //抖动问题
                clearInterval(obj.timer);
            }
        },10);
    }
}

HTML结构

<div class="all" id='all'>
	<div class="screen">
        <ul>
            <li><img src="images/1.jpg" width="500" height="200" /></li>
            <li><img src="images/2.jpg" width="500" height="200" /></li>
            <li><img src="images/3.jpg" width="500" height="200" /></li>
            <li><img src="images/4.jpg" width="500" height="200" /></li>
            <li><img src="images/5.jpg" width="500" height="200" /></li>
        </ul>
    </div>
    <ol>
    </ol>
</div>

相关素材 - 焦点图/幻灯片

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)