轮播图开发流程

最新推荐文章于 2024-08-11 18:40:36 发布
我是一个敲代码总报错的小傻瓜
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量233
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/m0_46476533/article/details/105756169
版权
轮播图案例

<head>
# css样式
<style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

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

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
            //添加一个li之后需要将这里的2500改为3000
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<!-- html布局   -->
 <div class="all" id="box">
 <!--  轮播图可视区大盒子-->
        <div class="screen">
        <!--  图片-->
            <ul>
                <li><img src="../../images/girl (1).jpg" width="500" height="200" /></li>
                <li><img src="../../images/girl (10).jpg" width="500" height="200" /></li>
                <li><img src="../../images/girl (11).jpg" width="500" height="200" /></li>
                <li><img src="../../images/girl (7).jpg" width="500" height="200" /></li>
                <li><img src="../../images/girl (8).jpg" width="500" height="200" /></li>
                <li><img src="../../images/girl (1).jpg" width="500" height="200" /></li>
            </ul>
           <!--  页码--> 
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
        <!--  按钮 -->
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
//轮播图 js部分
<script>
/*
轮播图开发思路
	获取页面元素 注册对应的事件
		1	鼠标移入 显示上一页和下一页按钮 
		2   鼠标移出 隐藏上一页和下一页按钮 
		3   鼠标单击上一页下一页
		4   无限轮播
		发现问题 第一张到第五张没有动画 直接跳到第二张
                  分析问题 第五张到第一张是瞬变的过程 没有动画 因为 ul。style。left=‘0px’
                  解决问题 给第五张后面添加第一张， 利用视觉欺骗
                    a 第五张已经不是最后一张 所以点击第五张会继续滚动到第一张 
                    b 用户继续点击下一页 此时瞬间修改ul为第一张
                    c index从0变成1 就会出现第一张 滚动到第二张的动画
		5   鼠标单击页码
		6   自动轮播
		自动轮播思路
				1 页面一加载 切换自动播放 （开启一个2s的定时器 执行点击下一页代码）
				2 鼠标移入box 切换手动模式   清除定时器
				3 鼠标移出box  切换自动模式
				
*/
// 1    获取元素
var box=document.querySelector('#box');//最外面的大盒子
var screen=document.querySelector('.screen');//图片可视区盒子
var ul=document.querySelector('.screen>ul');//轮播图列表
var ol=document.querySelector('.screen>ol');//页码
var arrow=document.querySelector('#arr');//按钮的父盒子
var left=document.querySelector('#left');//上一页按钮
var right=document.querySelector('#right');//下一页按钮

//自动轮播  
//页面加载完毕开始自动轮播
var timeID = setInterval(function () {
            //  下一页
            textpath();

        }, 2000)



// 2 注册事件  

//声名一个全局变量记录轮播图当前下标
var index=0;

//鼠标移入
box.onmouseover=function(){
arrow.style.display='block';
// 移入box   清理定时器 
clearInterval(timeID)；
};

//鼠标移出
box.onmouseout=function(){
arrow.styel.display='none';
//移出box    开启定时器
 timeID = setInterval(function () {
                textpath();
            }, 2000)
};

//下一页按钮
right.onclick=function(){
//调用函数
textpath();
}

//封装函数
function textpath(){
// 事件处理  ul对应的滚动
//如果是最后一页 则修改轮播图为第一张位置
if（index==ul.children.length-1）{
ul.style.left='0px';//瞬间修改
index=0；//下标从零开始滚动
}
//下一页
index++；
//开始移动 使用封装好的动画来移动
animationMove(ul,-screen.offsetLeft*index);//
//修改页码的样式
for(var i=0;i<ol.children.length;i++){
if(index==i){//对应的页码
ol.children[i].className='currnet'//添加样式
}else{
ol.children[i].className='';
}
}
 if (index == ul.children.length - 1) {
            ol.children[0].className = 'current';
        };
}

//上一页按钮
left.onclick=function(){
// 事件处理  ul对应的滚动
//如果是第一张，则修改为最后一张
if（index==0）{
ul.style.left=(ul.children.length-1)*-screen.offsetWidth+'px';
index=ul.children.length-1；//从最大下标开始继续无限滚动
}
//上一页
index--；
//开始移动 使用封装好的动画来移动
animationMove(ul,-screen.offsetLeft*index);
//修改页码的样式
for(var i=0;i<ol.children.length;i++){
if(index==i){//对应的页码
ol.children[i].className='currnet'//添加样式
}else{
ol.children[i].className='';
}

}
 if (index == ul.children.length - 1) {
            ol.children[0].className = 'current';
        };
}
//页码点击事件
for(var i=0;i<ol.children.length;i++){
//添加自定义索引
ol.children[i].setAttribute('yemaindex', i);
//注册事件
ol.children[i].onclick=function(){
//获取当前点击的页码
var click_here=this.getAttribute('yemaindex');
//将值赋值给index
index=click_here;
//开始滚动
animationMove(ul,-screen.offsetLeft*index);
//修改页码的样式
for(var j=0;j<ol.children.length;j++){
if(j==click_here){
ol.children[j].className='current'
}else{
ol.children[i].className='';
}

}

}

}
</script>
我是一个敲代码总报错的小傻瓜
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图开发流程

轮播图案例<head># css样式<style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { ...
复制链接

扫一扫