使用JS实现轮播图的效果

其中的一些css样式代码就省略了，下面只把结构层html、行为层js的代码展示出来 ，看代码说事。

一、简单的轮播图

<div class="box" id="box">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>
<script>
    //获得要操作的对象
    var box = document.getElementById("box");
    var inner = box.children[0];
    var ul = inner.children[0];
    var square = inner.children[1];
    var spans = square.children;     //所有的字级元素
    var imgWidth = inner.offsetWidth;

    //循环遍历span标签
    for(var i=0;i<spans.length;i++){
        spans[i].index = i;
        spans[i].onmouseover = function(){
            for(var j=0;j<spans.length;j++){
                spans[j].className = "";
            }
            this.className = "current";
            var target = -imgWidth*this.index;
            sports(ul,target);
        }
    }

    //运动函数的封装
    function sports(obj,target){
        clearInterval(obj.timeId);  //，每次点击时先清空计时器
        obj.timeId =  setInterval(function(){
            var step =10;
            var leader = obj.offsetLeft;  //先获得当前的距离左侧的位置
//
            step = leader<target?step:-step;

            if(Math.abs(leader-target) > Math.abs(step)){
                leader = leader+step;
                obj.style.left = leader + "px";
            }else{
                clearInterval(obj.timeId);  //清除计时器
                obj.style.left = target+"px";
            }
        },10);
    }
</script>

二、左右焦点轮播图

<div id="box" class="all">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" alt=""/></li>
            <li><img src="images/2.jpg" alt=""/></li>
            <li><img src="images/3.jpg" alt=""/></li>
            <li><img src="images/4.jpg" alt=""/></li>
            <li><img src="images/5.jpg" alt=""/></li>
        </ul>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>
<script>
    //获取要操作对象
    var box = document.getElementById("box");
    var ad  = box.children[0];
    var ul = document.getElementById("imgs");
    var arr = document.getElementById("arr");
    var arrLeft = document.getElementById("left");
    var arrRight = document.getElementById("right");
    var imgWidth = ad.offsetWidth;
    var lis = ul.children;

    //鼠标移入大盒子时显示按钮
    box.onmouseover = function(){
        arr.style.display ="block";
    }
    box.onmouseout = function(){
        arr.style.display = "none";  //鼠标离开大盒子时隐藏按钮
    }

    //给左右按钮注册单击事件
    var pic=0;  //重新定义一个变量，来标识图片的个数或索引
    arrRight.onclick = function(){
        if(pic<lis.length-1){
            pic++;
        }
        var target = -imgWidth*pic;
        sports(ul,target);
    }
    arrLeft.onclick =function(){
        if(pic>0){
            pic--;
        }
        var target = -imgWidth*pic;
        sports(ul,target);
    }

    //运动函数的封装
    function sports(obj,target){
        clearInterval(obj.timeId);  //，每次点击时先清空计时器
        obj.timeId =  setInterval(function(){
            var step =10;
            var leader = obj.offsetLeft;  //先获得当前的距离左侧的位置
//
            step = leader<target?step:-step;

            if(Math.abs(leader-target) > Math.abs(step)){
                leader = leader+step;
                obj.style.left = leader + "px";
            }else{
                clearInterval(obj.timeId);  //清除计时器
                obj.style.left = target+"px";
            }
        },10);
    }
</script>

三、无缝滚动原理轮播图

<div class="box" id="screen">
    <ul>
        <li><img src="images/01.jpg" alt=""/></li>
        <li><img src="images/02.jpg" alt=""/></li>
        <li><img src="images/03.jpg" alt=""/></li>
        <li><img src="images/04.jpg" alt=""/></li>
        <li><img src="images/01.jpg" alt=""/></li>
    </ul>
</div>
<script>
    //获得要操作的对象
    var box = document.getElementById("screen");
    var ul = box.children[0];
    var lis = ul.children;
    var imgWidth = ul.offsetWidth;
    var timeId =null;

//    timeId = setInterval(function(){
//        var leader = ul.offsetLeft;
//        var step = -10;
//        if(leader>-1200){
//            leader = leader + step;
//            ul.style.left = leader + ‘px‘;
//        }else{
//            ul.style.left = "0px";
//        }
//    },60)
    timeId = setInterval(play,60);

    //鼠标移入大盒子时，清除计时器
    box.onmouseover = function(){
        clearInterval(timeId);
    }
    //鼠标离开大盒子时，重新开启计时器
    box.onmouseout = function(){
//        timeId = setInterval(function(){
//            var leader = ul.offsetLeft;
//            var step = -10;
//            leader = leader + step;
//            ul.style.left = leader + ‘px‘;
//        },60)
        timeId = setInterval(play,60);
    }

    //封装函数
    function play(){
        var leader = ul.offsetLeft;
        var step = -10;
        if(leader>-1200){
            leader= leader + step;
            ul.style.left = leader + ‘px‘;
        }else{
            ul.style.left = "0px";
        }
    }

</script>

四、完整的轮播图

<div id="box" class="all" >
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/2.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/3.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/4.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
            <li><img src="images/5.jpg" width=‘500‘ height=‘200‘ alt=""/></li>
        </ul>
        <ol></ol>
    </div>
    <div id="arr">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>
/**
 * Created by Administrator on 2016/8/25.
 */
/**
 * 封装了一个匀速运动函数
 * @param obj
 * @param target
 */
function animate(obj,target){
    clearInterval(obj.timerId);
    obj.timerId = setInterval(function(){
        var leader = obj.offsetLeft;
        var step = 10;
        step = leader<target?step:-step;
        if(Math.abs(leader-target) > Math.abs(step)){
            leader = leader + step;
            obj.style.left = leader + ‘px‘;
        }else{
            clearInterval(obj.timerId);
            obj.style.left = target + ‘px‘;
        }
    },15)
}

/**
 * 封装了一个滚动函数
 */
function play(){
    var leader = ul.offsetLeft;
    var step = -10;
    if(leader>=-1200){
        leader = leader + step;
        ul.style.left = leader + ‘px‘;
    }else{
        ul.style.left = "0px";
    }
}
<script src="common.js"></script>
<script>
    // 1. 先获取要操作的对象
    var box = document.getElementById("box");
    var ad = box.children[0];
    var ul = document.getElementById("imgs");
    var lis = ul.children;
    var ol = ad.children[1];
    var arr = document.getElementById("arr");
    var arrLeft = document.getElementById("left");
    var arrRight = document.getElementById("right");
    var imgWidth = ad.offsetWidth;

    var timerId = null;
    // 2. 根据图片的个数动态的生成小按钮
    for(var i=0;i<lis.length;i++){
        var li = document.createElement("li");
        li.innerHTML = i+1;
        ol.appendChild(li);
    }

    // 3. 获得所有的ol下的li，然后让第一个变成黄色
    var olLis = ol.children;
    olLis[0].className = "current";

    // 4. 当鼠标移入的时候，对应的小方块显示出来
    for(var j=0;j<olLis.length;j++){
        olLis[j].index = j;
        olLis[j].onmouseover = function(){
            for(var k=0; k<olLis.length;k++){
                olLis[k].className = "";
            }
            this.className = "current";
            var target = -imgWidth*this.index;// 5. 让图片移动对应的小方块索引的图片宽度的距离  如果小方块的索引为0，则让ul移动0个图片的距离
            animate(ul,target);                //如果小方块的索引为1，就让ul移动1个图片宽度的距离
            //让三者的显示状态同步或是统一起来
            pic = square=this.index;   //让三者的索引值统一起来
        }
    }

    // 6. 鼠标移入的时候，显示左右按钮并注册点击事件
    box.onmouseover = function(){
        arr.style.display = "block";
        clearInterval(timerId);   //清除定时器
    }
    box.onmouseout = function(){
        arr.style.display = "";
        timerId = setInterval(playNext,1000);
    }

    // 8. 动态添加第一张图片到最后的位置
    var imgFirst = lis[0].cloneNode(true);
    ul.appendChild(imgFirst);

    // 7. 给左右按钮注册点击事件
    var pic=0;   //定义一个变量来表示移动的图片个数 也相当于索引
    var square =0;   //默认显示的小方块的索引
    arrRight.onclick = function(){
//        if(pic==lis.length-1){
//            pic=0;   //迅速的让索引编号 等于0
//            ul.style.left = "0px";  // 让ul快速的恢复成原来的位置
//        }
//        pic++;
//        var target = -imgWidth*pic;
//        sports(ul,target);
//
//        if(square<olLis.length-1){
//            square++;
//        }else{
//            square=0;
//        }
//        for(var i=0;i<olLis.length;i++){
//            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
//        }
//        olLis[square].className = "current";
        playNext();
    }

    arrLeft.onclick =function(){
        if(pic==0){
            pic=lis.length-1;
            ul.style.left = -imgWidth*pic + "px";
        }
        pic--;
        var target = -imgWidth*pic;
        animate(ul,target);
        if(square>0){
            square--;
        }else{
            square = olLis.length-1
        }
        for(var i=0;i<olLis.length;i++){
            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
        }
        olLis[square].className = "current";
    }

    //添加自动轮播功能
    timerId = setInterval(playNext,1000);

    function playNext(){
        if(pic==lis.length-1){
            pic=0;   //迅速的让索引编号 等于0
            ul.style.left = "0px";  // 让ul快速的恢复成原来的位置
        }
        pic++;
        var target = -imgWidth*pic;
        animate(ul,target);
        if(square<olLis.length-1){
            square++;
        }else{
            square=0;
        }
        for(var i=0;i<olLis.length;i++){
            olLis[i].className = ""; //将ol下的其它的小方块的颜色全部清除
        }
        olLis[square].className = "current";
    }

</script>
时间： 2024-10-10 11:06:06

使用JS实现轮播图的效果的相关文章

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js网站轮播图怎么做如何做？鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

使用原生js实现轮播图效果

知乎原文 我的博客 微信公众号这几天在逛网站的时候,发现很多网站都有轮播图这个效果,所以我就仿照小米的官网用原生js写了一个轮播图效果,希望大家喜欢.这是我发布在github上的最后实现的效果:https://heternally.github.io/... 下面我简单跟大家说一下我实现该效果的过程,如果有什么错误的地方,欢迎大家说出来,以方便大家互相学习. 我相信前面简单的html+css大家应该都会,我这里就不说了,简单给大家展示一下代码: HTML部分 <div id="wrap&q

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

轮播图的效果实现小米商城和京东商城

案例一: 效果如下:类似小米商城的轮播图 自动切换的:左右的 路径结构: 代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            padd

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

js实现轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol