js案例:网页轮播图

m0_63400611

已于 2022-05-18 16:07:28 修改

阅读量296

点赞数 1

分类专栏： js 文章标签： javascript 前端 css

于 2022-01-23 22:15:08 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/122658306

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

功能需求

鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
点击左右两侧按钮执行相应操作,上一张或下一张
图片播放同时,下面的小圆点也随之变化
点击小圆点播放相应图片
鼠标不经过轮播图,图片开始自动轮播
鼠标经过轮播图则停止自动轮播

分析

图片底下圆点的生成:获取图片的张数,生成相应数量的小圆点,并使用setAttribute()为每一个圆点添加一个自定义类名作为索引号,且为第一个圆点添加上current属性用作改变颜色
点击圆点移动图片位置:首先获取图片的宽度,利用索引号与图片的宽度的乘积作为移动的目标距离,使用已经准备好的animate(obj, target, callback)方法,以picul作为目标元素,(-index)*piciwdth作为移动的距离
左右两侧按钮功能的实现:给两侧按钮添加点击事件,并设置一个索引号作为识别当前第几个图片用的参数,在点击按钮后,索引号加或者减1,并使用排他思想将圆圈设置为当前索引号相符合的位置,在索引号与图片张数-1一致的时候,点击左侧按钮将索引号改为图片张数-1,右侧则将索引号设置为0
自动轮播功能实现:定义一个计时器timer(setInterval()),在鼠标移动到图片pic区域的时候清除定时器(clearInterval(timer),并且清除定时器变量(timer = null),在鼠标离开pic区域的时候设置定时器timer,开启定时器,定时器的功能为调用图片右侧next按钮的click()方法(next.click()),相当于定时点击右侧按钮

代码

HTML部分

<!DOCTYPE html>
<html lang="ZH-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除浮动*/
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {       
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .box {
            position: relative;
            margin: 50px auto;
            width: 600px;
            height: 300px;
            background-color: pink;
        }
        .point {
            position: absolute;
            padding: 0;
            margin: 0;
            transform: translate(-50%);
            left: 50%;
            bottom: 20px;
            height: 12px;
            padding: 0px 5px;
            background-color: white;
            opacity: .8;
            line-height: 8px;
            text-align: center;
            border-radius: 8px;
        }
        .point li {
            display: inline-block;
            width: 7px;
            height: 7px;
            color: rgba(255,255,255,0.00);
			border: 2px solid;
            border-radius: 5px;
			border-color: black;
            cursor: pointer;
			margin: 0px 2px;
        }
		.current {
			background-color: orange;
		}
        .pic ul {
            position: absolute;
            padding: 0;
            margin: 0;
            width: 800%;
            left: 0;
            top: 0;
        }
        .pic ul li {
            float: left;
        }
        .pic ul li a img {
            width: 600px;
            height: 300px;
        }
        .button {
            position: absolute;
            display: none;
            top: 50%;
            width: 100%;
            transform: translate(0, -50%);
            height: 32px;
            /* background-color: blue; */
        }
        .arrow-prev {
            float: left;
        }
        .arrow-next {
            float: right;
        }
        .arrow-prev,
        .arrow-next {
            width: 22px;
            height: 32px;
            background-color: black;
            opacity: .5;
            line-height: 32px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic clearfix">
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../upload/focus.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="button">
            <a href="javascript:;" class="arrow-prev"><</a>
            <a href="javascript:;" class="arrow-next">></a>
        </div>
            <ul class="point clearfix">
             </ul>
    </div>
	<script src="../js/animate.js"></script>
    <script src="./index.js"></script>
</body>
</html>

js部分

index.js

window.addEventListener('load', function() {
    var box = document.querySelector('.box');
    var btn = document.querySelector('.button');

    //鼠标经过图片显示按钮 不经过则隐藏
    box.addEventListener('mouseover', function () {
        btn.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除定时器变量
    })
    box.addEventListener('mouseout', function (){
        btn.style.display = 'none';
        timer = setInterval(function() {
            //调用点击事件
            next.click();
        }, 2000)
    })

    //动态的生成控制图片的圆圈 有几张图片生成几个圆圈
    var pic = document.querySelector('.pic');
    var picul = pic.querySelector('ul');
	var point = document.querySelector('.point');
    //  console.log(picul.children.length);
    for(var i=0; i<picul.children.length-1; i++) {
        //创建一个li
        var li = document.createElement('li');
        li.setAttribute('index', i);
        //将li插入到ul中
        point.appendChild(li);
		li.addEventListener('click', function() {
			for(var i=0; i<point.children.length; i++) {
				point.children[i].classList.remove('current');
			}
			this.classList.add('current');
            //获取当前点击的圆点的索引号index
            var index = this.getAttribute('index');
            var picwidth = pic.offsetWidth;
            animate(picul, -index * picwidth);
            //在点击了圆圈之后将索引号赋值给num和circle
            num = index;
            circle = index;
		})
        point.children[0].classList.add('current');
    }
	//点击右侧按钮移动图片
    var num = 0;
    var circle = 0;
    var picwidth = pic.offsetWidth;
    var next = document.querySelector('.arrow-next');
    next.addEventListener('click', function() {
        if(num == point.children.length) {
            picul.style.left = 0;
            num = 0;
        }
        num++;
        animate(picul, -num * picwidth);
        //使用声明的circle变量控制圆圈一起变化
        circle++;
        if(circle == point.children.length) {
            circle = 0;
        }
        //清除其他小圆圈的current类名 留下当前圆圈的current类名
        for(var i = 0; i<point.children.length; i++) {
            point.children[i].className = '';
        }
        point.children[circle].className = 'current';
    })

    //点击左侧按钮移动图片
    var prev = document.querySelector('.arrow-prev');
    prev.addEventListener('click', function() {
        if(num == 0) {
            picul.style.left = (picul.children.length - 1) * picwidth;
            num = point.children.length;
        }
        num--;
        animate(picul, -num * picwidth);
        //使用声明的circle变量控制圆圈一起变化
        
        if(circle == 0) {
            circle = point.children.length;
        }
        circle--;
        //清除其他小圆圈的current类名 留下当前圆圈的current类名
        for(var i = 0; i<point.children.length; i++) {
            point.children[i].className = '';
        }
        point.children[circle].className = 'current';
    })

    //自动定时切换下一张图片
    var timer = setInterval(function() {
        //调用点击事件
        next.click();
    }, 2000)
})

animate.js

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
            if(callback) {
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step +'px';
    }, 15);
}

m0_63400611

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js案例:网页轮播图

功能需求鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮点击左右两侧按钮执行相应操作,上一张或下一张图片播放同时,下面的小圆点也随之变化点击小圆点播放相应图片鼠标不经过轮播图,图片开始自动轮播鼠标经过轮播图则停止自动轮播...
复制链接

扫一扫

专栏目录