欧洲杯买球下注盘口基于JavaScript实现轮播图原理及示例_javascript技巧_脚本之家

网上有很多的例子介绍,在这里我所做的无缝滚动就是
通过改变元素的left值让图片呈现左右滚动的效果。

 js-完整轮播图

我们首先看一下 div+css 的结构样式:

今天写一个完整的轮播图,首先它需要实现三个功能:1.鼠标放在小圆点上实现轮播。2.点击焦点按钮实现轮播。3.无缝自动轮播。

    *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } /*消除图片底部3像素距离*/ img{ vertical-align: top; } .scroll{ width: 500px; height: 200px; margin: 100px auto; border: 1px solid #ccc; padding: 7px; overflow: hidden; position: relative; } .box{ width: 500px; height: 200px; overflow: hidden; position: relative; } .box ul{ width: 600%; position: absolute; left: 0; top: 0; } .box ul li{ float: left; } .scroll ol{ position: absolute; right: 10px; bottom: 10px; } .scroll ol li{ float: left; width: 20px; height: 20px; background: pink; text-align: center; line-height: 20px; border-radius: 50%; background-color: pink; margin-left:10px ; cursor: pointer; } .scroll ol li.current{ background-color: purple; }              1 2 3 4 5    

轮播图的原理:

接下来js代码,再此之前我们要明白,小圆点 1 2 3 并不是写死的,它是根据ul
li中的图片张数来决定的 ,所以我们要先把div中ol li中的代码去掉。

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片。

要实现无缝滚动就需要多一张图片才行
,即克隆第一张图片,放到最后面。此时css布局保留,div中只剩下:

欧洲杯买球下注盘口 1

此时我们用js代码生成小圆点

html布局:

var scroll = document.getElementById; // 获得大盒子var ul = document.getElementById; // 获得ulvar ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度 // 操作元素 // 因为要做无缝滚动,所以要克隆第一张,放到最后一张后面 // 1. 克隆元素 ul.appendChild(ul.children[0].cloneNode; // 2.创建ol 和li vaar ol = document.createElement;//创建ol元素 scroll.appendChild;// 把ol放到scroll盒子里面去 for (var i=0;i此时ol li元素即小圆点创建完毕 我们接着用js做动画 1.鼠标经过第几个小圆点,就要展示第几张图片,并且小圆点的颜色也发生变化 2.图片自动轮播, 3.鼠标经过图片,图片停止自动播放 4.鼠标离开图片,图片继续自动轮播  这里我们封装了一个animate()动画函数// 动画函数 第一个参数,代表谁动 第二个参数 动多少// 让图片做匀速运动,匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed function animate{ // 首先清除掉定时器 clearInterval; // 用来判断 是+ 还是 - 即说明向左走还是向右走 var speed = obj.offsetLeft < target ? 15 : -15; obj.timer = setInterval{ var result = target - obj.offsetLeft;//它们的差值不会超过speed obj.style.left = obj.offsetLeft + speed + "px"; // 有可能有小数的存在,所以在这里要做个判断 if  <= Math.abs { clearInterval; obj.style.left = target + "px"; } },10); }

var timer = null; // 轮播图的定时器 var key = 0;// 控制播放的张数 var circle = 0;// 控制小圆点 timer = setInterval;// 自动轮播 function autoplay(){ /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1, 就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/ key++; // 先++ if{// 后判断 ul.style.left = 0; // 迅速调回 key = 1; // 因为第6张是第一张,所以播放的时候是从第2张开始播放 } // 动画部分 animate; // 小圆点circle 当显示第几张图片是,对应的小圆点的颜色也发生变化 /*同理,对小圆点也要有一个判断*/ circle++; if (circle > olLis.length-1) { circle = 0; } // 小圆点颜色发生变化 for (var i = 0 ; i < olLis.length;i++) { // 先清除掉所用的小圆点类名 olLis[i].className = ""; } // 给当前的小圆点 添加一个类名 olLis[circle].className = "current"; }
<div id="box" class="all">
   <div class="inner">   <!-- 相框-->
        <ul>
            <li><a href="#"><img src="images/18.jpg" width="550" height="320" alt="欧洲杯买球下注盘口 2"></a></li>
            <li><a href="#"><img src="images/19.jpg" width="550" height="320" alt="欧洲杯买球下注盘口 3"></a></li>
            <li><a href="#"><img src="images/14.jpg" width="550" height="320" alt="欧洲杯买球下注盘口 4"></a></li>
            <li><a href="#"><img src="images/17.jpg" width="550" height="320" alt="欧洲杯买球下注盘口 5"></a></li>

        </ul>
       <ol>  <!--里面存放小圆点-->

        </ol>
    </div>
    <div class="focusD" id="arr">
        &lt
        &gt
    </div>
</div>

好啦,这里我们展示了主要代码,具体代码,查看这里下载js实现轮播效果

css样式:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

 * {
            margin: 0;
            padding: 0;
        }
        /*<--清除底部三像素距离-->*/
        img {
            vertical-align: top;
        }

        .all {
            width: 550px;
            height: 320px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
            position: relative;
        }

        .inner {
            position: relative;
            width: 550px;
            height: 320px;
            background-color: pink;
            overflow: hidden;
        }

        .inner ul {
            width: 1000%;
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        .inner ul li {
            float: left;
        }

        .focusD {
            position: absolute;
            left: 0;
            top: 50%;
            width: 550px;
            padding: 0 10px;
            height: 30px;
            box-sizing: border-box;
         display: none;
        }

        .inner ol {
            position: absolute;
            right: 30px;
            bottom: 10px;
        }

        .inner ol li {
            width: 15px;
            display: inline-block;
            height: 15px;
            margin: 0 3px;
            cursor: pointer;
            line-height: 15px;
            text-align: center;
            background-color: #fff;
        }
        /*当前的高亮的小圆点*/
        .inner ol .current {
            background-color: orange;
            color: #fff;
        }

        .focusD span {
            display: inline-block;
            width: 25px;
            font-size: 24px;
            height: 30px;
            color: #ccc;
            line-height: 30px;
            text-align: center;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
        }

        #left {
            float: left;
        }

        #right {
            float: right;
        }

欧洲杯买球下注盘口 ,显示效果:

欧洲杯买球下注盘口 6

js部分:

 接下来我们要写js 代码
,首先我们先获取我们需要的所有元素 。注:my$(“id”)即document.getElementById,为了简便即建的方法。

 var index=0;
    //获取最外面的div
    var box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取去相框的宽度
    var imgWidth = inner.offsetWidth;
    // 获取ul
    var ulObj = inner.children[0];
    //获取ul中所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = inner.children[1];
    //获取焦点
    var arr = my$("arr");

然后我们需要给它创建小按钮即小圆点并注册鼠标进入事件,再此之前
我们要明白,小圆点 1 2 3 并不是写死的,它是根据ul li中的图片张数来决定的
,所以
我们要先在js中给div中的ol中的添加li(即小圆点),并且给ul中的图片几li添加索引值以便下一步的操作。

  //创建小按钮-----根据ul中li的个数
    for (var i = 0; i < list.length; i++) {
        var liObjs = document.createElement("li");
        olObj.appendChild(liObjs);
        liObjs.innerHTML = (i + 1);
        //在ol中每个li中增加自定义属性,添加索引值
        liObjs.setAttribute("index", i);
        //注册鼠标进入事件
        liObjs.onmouseover = function () {
            //先干掉所有背景颜色
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class");
            }
            //设置当前鼠标进来的类样式
            this.className = "current";
            //获取ol中li的索引值
             index = this.getAttribute("index");
            //移动ul
            animate(ulObj, -index * imgWidth);  //移动动画函数
        };
    }
    //设置第一个ol中li的背景颜色
    olObj.children[0].className = "current";

要实现无缝滚动 就需要多一张图片才行
,即克隆第一张图片,放到最后面。

 

 //克隆ol中第一个li放到最后一个
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

下一步就要实现点击左右的按钮实现轮播

  //点击右边按钮
        my$("right").onclick=clickHandle;
        function clickHandle() {
            if (index==ulObj.children.length-1){
                ulObj.style.left=0+"px";
                index=0;
            }
            index++;
            animate(ulObj,-index*imgWidth);
            if (index==list.length-1){
                olObj.children[0].className="current";
                olObj.children[olObj.children.length-1].className="";
            }else {
                for (var i=0;i<olObj.children.length;i++){
                    olObj.children[i].className="";
                }
                olObj.children[index].className="current";
            }
        };
        //点击左边按钮
        my$("left").onclick=function () {
            if (index==0){
                index=list.length-1;
                ulObj.style.left=-index*imgWidth+"px";
            }
            index--;
            animate(ulObj,-index*imgWidth);
            for (var i=0;i<olObj.children.length;i++){
                olObj.children[i].className="";
            }
            olObj.children[index].className="current";
        };

最后一步就是自动轮播,即可以创建一个定时器,每隔一段时间就调用左右按钮的点击事件,相当于点按钮,但是要注意的是当鼠标放进相框的时候要清除定时器,不然在你点击的时候它还是会自动轮播。

完整js代码:

<script>
    var index=0;
    //获取最外面的div
    var box = my$("box");
    //获取相框
    var inner = box.children[0];
    //获取去相框的宽度
    var imgWidth = inner.offsetWidth;
    // 获取ul
    var ulObj = inner.children[0];
    //获取ul中所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = inner.children[1];
    //获取焦点
    var arr = my$("arr");

    //创建小按钮-----根据ul中li的个数
    for (var i = 0; i < list.length; i++) {
        var liObjs = document.createElement("li");
        olObj.appendChild(liObjs);
        liObjs.innerHTML = (i + 1);
        //在ol中每个li中增加自定义属性,添加索引值
        liObjs.setAttribute("index", i);
        //注册鼠标进入事件
        liObjs.onmouseover = function () {
            //先干掉所有背景颜色
            for (var j = 0; j < olObj.children.length; j++) {
                olObj.children[j].removeAttribute("class");
            }
            //设置当前鼠标进来的类样式
            this.className = "current";
            //获取ol中li的索引值
             index = this.getAttribute("index");
            //移动ul
            animate(ulObj, -index * imgWidth);  //移动动画函数
        };
    }
    //设置第一个ol中li的背景颜色
    olObj.children[0].className = "current";
    //克隆ol中第一个li放到最后一个
    ulObj.appendChild(ulObj.children[0].cloneNode(true));


    var timeId=setInterval(clickHandle,3000);

    my$("box").onmouseover=function(){
      arr.style.display="block";
      clearInterval(timeId);
    };
        //点击右边按钮
        my$("right").onclick=clickHandle;
        function clickHandle() {
            if (index==ulObj.children.length-1){
                ulObj.style.left=0+"px";
                index=0;
            }
            index++;
            animate(ulObj,-index*imgWidth);
            if (index==list.length-1){
                olObj.children[0].className="current";
                olObj.children[olObj.children.length-1].className="";
            }else {
                for (var i=0;i<olObj.children.length;i++){
                    olObj.children[i].className="";
                }
                olObj.children[index].className="current";
            }
        };
        //点击左边按钮
        my$("left").onclick=function () {
            if (index==0){
                index=list.length-1;
                ulObj.style.left=-index*imgWidth+"px";
            }
            index--;
            animate(ulObj,-index*imgWidth);
            for (var i=0;i<olObj.children.length;i++){
                olObj.children[i].className="";
            }
            olObj.children[index].className="current";
        };

    my$("box").onmouseout=function(){
        arr.style.display="none";
        timeId=setInterval(clickHandle,3000);
    };




    // 设置一个元素,移动到指定位置
    function animate(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            var current = element.offsetLeft;
            var step = 9;
            step = current > target ? -step : step;
            current += step;
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10);
    }

  function my$(id) {
      return document.getElementById(id);
    }

</script>

 

相关文章