js-完整轮播图金沙官网线上

 * {
            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;
        }
// 动画函数 第一个参数,代表谁动 第二个参数 动多少
// 让图片做匀速运动,匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed

 function animate(obj,target){
  // 首先清除掉定时器
  clearInterval(obj.timer);
  // 用来判断 是+ 还是 - 即说明向左走还是向右走
  var speed = obj.offsetLeft < target ? 15 : -15;
  obj.timer = setInterval(function(){
  var result = target - obj.offsetLeft;//它们的差值不会超过speed
  obj.style.left = obj.offsetLeft + speed + "px";
  // 有可能有小数的存在,所以在这里要做个判断  
  if (Math.abs(result) <= Math.abs(speed)) {
   clearInterval(obj.timer);
   obj.style.left = target + "px";
  }
  },10);
 }
  //创建小按钮-----根据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";

展示效果如图:

显示效果:

金沙官网线上 1

<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>
var timer = null; // 轮播图的定时器
 var key = 0;// 控制播放的张数
 var circle = 0;// 控制小圆点

 timer = setInterval(autoplay,1000);// 自动轮播
 function autoplay(){
  /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,
  就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/
  key++; // 先++
  if(key > ulLis.length-1){// 后判断

  ul.style.left = 0; // 迅速调回
  key = 1; // 因为第6张是第一张,所以播放的时候是从第2张开始播放
  }
  // 动画部分
  animate(ul,-key*liWidth);
  // 小圆点circle 当显示第几张图片是,对应的小圆点的颜色也发生变化

  /*同理,对小圆点也要有一个判断*/
  circle++;
  if (circle > olLis.length-1) {
  circle = 0;
  }
  // 小圆点颜色发生变化
  for (var i = 0 ; i < olLis.length;i++) {
  // 先清除掉所用的小圆点类名
  olLis[i].className = ""; 
  }
  // 给当前的小圆点 添加一个类名
  olLis[circle].className = "current";

 }

金沙官网线上 6

动画部分包括:

css样式:

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

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

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

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

您可能感兴趣的文章:

 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");

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

<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>

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

 js-完整轮播图

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

 

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

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

金沙官网线上 7

本文由金沙官网线上发布于Web前端,转载请注明出处:js-完整轮播图金沙官网线上

您可能还会对下面的文章感兴趣: