JS——轮播图简单版

1、小图标版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .scrollImg {
            margin: 150px auto;
            width: 500px;
            height: 200px;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .scrollContent {
            position: relative;
            width: 500px;
            height: 200px;
            overflow: hidden;
        }

        .scrollContent ul {
            width: 500%;
            position: absolute;
        }
        .scrollContent ul li{
            float: left;
        }
        .scrollContent ol {
            position: absolute;
            right: 13px;
            bottom: 8px;

        }

        .scrollContent ol li {
            float: left;
            width: 20px;
            height: 20px;
            font: 500 15px/20px "simsun";
            text-align: center;
            background-color: #fff;
            margin-right: 10px;
            cursor: pointer;
        }

        .scrollContent ol li.current {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="scrollImg">
    <div class="scrollContent" id="scrollContent">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
    <script>
        var scrollContent = document.getElementById("scrollContent");
        var scrollUl = scrollContent.children[0];
        var icon = scrollContent.children[1];
        var iconLiArr = icon.children;
        var imgWidth = scrollContent.offsetWidth;
        //鼠标放在小图标上，对于图表点亮
        for (var i = 0; i < iconLiArr.length; i++) {
            iconLiArr[i].index = i;
            iconLiArr[i].onmouseover = function () {
                for (var j = 0; j < iconLiArr.length; j++) {
                    iconLiArr[j].className = "";
                }
                this.className = "current";
                animate(scrollUl, -this.index * imgWidth);
            }
        }

        //图片移动
        function animate(ele, target) {
            clearInterval(ele.timer);
            var speed = ele.offsetLeft < target ? 15 : -15;
            ele.timer = setInterval(function () {
                ele.style.left = ele.offsetLeft + speed + "px";
                var value = ele.offsetLeft - target;
                if (Math.abs(value) <= Math.abs(speed)) {
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            }, 10);
        }
    </script>
</div>
</body>
</html>

2、小图标版本附有定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .scrollImg {
            margin: 150px auto;
            width: 500px;
            height: 200px;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .scrollContent {
            position: relative;
            width: 500px;
            height: 200px;
            overflow: hidden;
        }

        .scrollContent ul {
            width: 600%;
            position: absolute;
        }

        .scrollContent ul li {
            float: left;
        }

        .scrollContent ol {
            position: absolute;
            right: 13px;
            bottom: 8px;

        }

        .scrollContent ol li {
            float: left;
            width: 20px;
            height: 20px;
            font: 500 15px/20px "simsun";
            text-align: center;
            background-color: #fff;
            margin-right: 10px;
            cursor: pointer;
        }

        .scrollContent ol li.current {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="scrollImg">
    <div class="scrollContent" id="scrollContent">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
    <script>
        var scrollContent = document.getElementById("scrollContent");
        var scrollUl = scrollContent.children[0];
        var icon = scrollContent.children[1];
        var iconLiArr = icon.children;
        var imgWidth = scrollContent.offsetWidth;
        //1、将第一张图片克隆到最后一张
        var imgEle = scrollUl.children[0].cloneNode(true);
        scrollUl.appendChild(imgEle);
        //2、鼠标放在小图标上，对应图表点亮
        //5、因为有定时器，要注意点亮的图标与图片必须要一致
        for (var i = 0; i < iconLiArr.length; i++) {
            iconLiArr[i].index = i;
            iconLiArr[i].onmouseover = function () {
                for (var j = 0; j < iconLiArr.length; j++) {
                    iconLiArr[j].className = "";
                }
                this.className = "current";
                animate(scrollUl, -this.index * imgWidth);
                key = square = this.index;
            }
        }
        var key = 0;
        var square = 0;
        //3、定时器,每隔一秒滚动一次图片,对应的图片被点亮
        var timer = setInterval(autoPaly, 1000);

        function autoPaly() {
            key++;
            if (key > iconLiArr.length) {
                scrollUl.style.left = "0px";
                key = 1;
            }
            animate(scrollUl, -key * imgWidth);
            square++;
            if (key > iconLiArr.length - 1) {
                square = 0;
            }
            for (var i = 0; i < iconLiArr.length; i++) {
                iconLiArr[i].className = "";
            }
            iconLiArr[square].className = "current";
        }

        //4、鼠标移动到图片清除定时器，离开开启定时器
        scrollContent.onmouseover = function () {
            clearInterval(timer);
        }
        scrollContent.onmouseout = function () {
            timer = setInterval(autoPaly, 1000);
        }

        //图片移动
        function animate(ele, target) {
            clearInterval(ele.timer);
            var speed = ele.offsetLeft < target ? 15 : -15;
            ele.timer = setInterval(function () {
                ele.style.left = ele.offsetLeft + speed + "px";
                var value = ele.offsetLeft - target;
                if (Math.abs(value) <= Math.abs(speed)) {
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            }, 10);
        }
    </script>
</div>
</body>
</html>

3、箭头版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .scrollImg {
            margin: 150px auto;
            width: 500px;
            height: 200px;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .scrollContent {
            position: relative;
            width: 500px;
            height: 200px;
            overflow: hidden;
        }

        .scrollContent ul {
            width: 500%;
            position: absolute;
        }

        .scrollContent ul li {
            float: left;
        }

        .arrow {
            display: none;
        }

        .arrow span {
            position: absolute;
            top: 50%;
            margin-top: -25px;
            width: 30px;
            height: 50px;
            font: 500 40px/50px "simsun";
            text-align: center;
            background-color: #ccc;
            opacity: 0.6;
            cursor: pointer;
        }

        .arrow span.arrLeft {
            left: 5px;
            border-radius: 0 10px 10px 0;
        }

        .arrow span.arrRight {
            right: 5px;
            border-radius: 10px 0 0 10px;
        }
    </style>
</head>
<body>
<div class="scrollImg">
    <div class="scrollContent" id="scrollContent">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
        </ul>
        <div class="arrow">
            <span class="arrLeft">&lt;</span>
            <span class="arrRight">&gt;</span>
        </div>
    </div>
    <script>
        var scrollContent = document.getElementById("scrollContent");
        var scrollUl = scrollContent.children[0];
        var arrow = scrollContent.children[1];
        var imgWidth = scrollContent.offsetWidth;

        //1、鼠标移动到图片显示箭头，离开隐藏箭头
        scrollContent.onmouseover = function () {
            arrow.style.display = "block";
        }
        scrollContent.onmouseout = function () {
            arrow.style.display = "none";
        }
        var key = 0;
        //2、点击左箭头，图片向右边移动，点击右箭头，图片向左边移动
        arrow.children[0].onclick = function () {
            key++;
            if (key > scrollUl.children.length - 1) {
                key = scrollUl.children.length - 1;
            }
            animate(scrollUl, -key * imgWidth);
        }
        arrow.children[1].onclick = function () {
            key--;
            if (key < 0) {
                key = 0;
            }
            animate(scrollUl, -key * imgWidth);
        }

        //图片移动
        function animate(ele, target) {
            clearInterval(ele.timer);
            var speed = ele.offsetLeft < target ? 15 : -15;
            ele.timer = setInterval(function () {
                ele.style.left = ele.offsetLeft + speed + "px";
                var value = ele.offsetLeft - target;
                if (Math.abs(value) <= Math.abs(speed)) {
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            }, 10);
        }
    </script>
</div>
</body>
</html>

4、箭头版本附有定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .scrollImg {
            margin: 150px auto;
            width: 500px;
            height: 200px;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .scrollContent {
            position: relative;
            width: 500px;
            height: 200px;
            overflow: hidden;
        }

        .scrollContent ul {
            width: 600%;
            position: absolute;
        }

        .scrollContent ul li {
            float: left;
        }

        .arrow {
            display: none;
        }

        .arrow span {
            position: absolute;
            top: 50%;
            margin-top: -25px;
            width: 30px;
            height: 50px;
            font: 500 40px/50px "simsun";
            text-align: center;
            background-color: #ccc;
            opacity: 0.6;
            cursor: pointer;
        }

        .arrow span.arrLeft {
            left: 5px;
            border-radius: 0 10px 10px 0;
        }

        .arrow span.arrRight {
            right: 5px;
            border-radius: 10px 0 0 10px;
        }
    </style>
</head>
<body>
<div class="scrollImg">
    <div class="scrollContent" id="scrollContent">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/5.jpg"></li>
        </ul>
        <div class="arrow">
            <span class="arrLeft">&lt;</span>
            <span class="arrRight">&gt;</span>
        </div>
    </div>
    <script>
        var scrollContent = document.getElementById("scrollContent");
        var scrollUl = scrollContent.children[0];
        var arrow = scrollContent.children[1];
        var imgWidth = scrollContent.offsetWidth;
        //1、复制第一张图片放到最后一张
        var imgEle = scrollUl.children[0].cloneNode(true);
        scrollUl.appendChild(imgEle);
        var key = 0;
        //2、定时器,每隔一秒滚动一次图片,对应的图片被点亮
        var timer = setInterval(autoPaly, 1000);

        function autoPaly() {
            key++;
            if (key > scrollUl.children.length - 1) {
                scrollUl.style.left = "0px";
                key = 1;
            }
            animate(scrollUl, -key * imgWidth);
        }

        //3、鼠标移动到图片清除定时器，显示箭头，离开开启定时器，隐藏箭头
        scrollContent.onmouseover = function () {
            arrow.style.display = "block";
            clearInterval(timer);
        }
        scrollContent.onmouseout = function () {
            arrow.style.display = "none";
            timer = setInterval(autoPaly, 1000);
        }

        //4、点击左箭头，图片向右边移动，点击右箭头，图片向左边移动
        arrow.children[0].onclick = function () {
            autoPaly();
        }
        arrow.children[1].onclick = function () {
            key--;
            if (key < 0) {
                scrollUl.style.left = -(scrollUl.children.length - 1) * imgWidth + "px";
                key = scrollUl.children.length - 2;
            }
            animate(scrollUl, -key * imgWidth);
        }

        //图片移动
        function animate(ele, target) {
            clearInterval(ele.timer);
            var speed = ele.offsetLeft < target ? 15 : -15;
            ele.timer = setInterval(function () {
                ele.style.left = ele.offsetLeft + speed + "px";
                var value = ele.offsetLeft - target;
                if (Math.abs(value) <= Math.abs(speed)) {
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            }, 10);
        }
    </script>
</div>
</body>
</html>

相关阅读:
作业
 bash陷阱
 Hive
工作小结
 Python脚本没有实时print信息
 Ubuntu下apt-get遇到Hash Sum Mismatch
微信小程序要2017-01-19号发布！
flex布局学习（四）flex色子布局练习
 flex布局学习（三）
flex布局学习（二）
原文地址：https://www.cnblogs.com/wuqiuxue/p/7920261.html

热门文章
MVC linq语法分页
 如何搭建MVC3与配置models层
 第二次java作业
 第十次作业
 第九次作业
 第八次作业
 第七次作业
 第四次作业
 作业三
 作业二