一个简单的轮播图代码

最新推荐文章于 2024-04-27 09:07:55 发布
最新推荐文章于 2024-04-27 09:07:55 发布
阅读量2.7k 收藏 11
点赞数
分类专栏： 小白 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yzhoun/article/details/107073645
版权

#轮播图dome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="lbbox">
        <ul class="oUl">
            <a href="">
                <li><img src="./imager/1.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/2.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/3.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/4.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/5.jpg" alt=""></li>
            </a>
            <a href="">
                <li><img src="./imager/1.jpg" alt=""></li>
            </a>
        </ul>
        <span class="lf">〈</span>
        <span class="rg">〉</span>
        <div class="raidusYuan">
            <span class="yuanS"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}
.lbbox{
    width:980px;
    height:420px;
    margin: 80px auto;
    position: relative;
    overflow: hidden;
}
.oUl{
    
    width: 9999999px;
    height:420px;
    position: absolute;
    top: 0;
    left: 0;
}
.oUl a{
    display: block;
    width: 980px;
    height:420px;
    float: left;
}
.oLi a li img{
    width: 980px;
    height:420px;
}
.lf,.rg{
    width: 50px;
    height: 50px;
    position: absolute;
    background: black;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
    font-size:30px;
    color: rgb(255, 255, 255);
    opacity: 0.4;
    cursor: pointer;
}
.lf{
    left: 0;
    top:210px;
}
.rg{
    right: 0;
    top:210px;
}
.yuanS{
    background: black;
}
.raidusYuan{
    width: 300px;
    height: 30px;
    position: absolute;
    left: 327px;
    top: 347px;
}
.raidusYuan span{
    cursor: pointer;
    margin-left: 30px;
    height: 20px;
    border-radius: 50%;
    width: 20px;
    display: block;
    float: left;
    border: solid 1px rgb(255, 255, 255)
}

var timer = null;
//创建定时器的开关
var sliderPage = document.getElementsByClassName('oUl')[0];
//获取ul标签
var moverWidth = sliderPage.children[0].offsetWidth;
//获取一张轮播图的宽度
var num = sliderPage.children.length - 1;
//获取所以轮播图的张数
var leftBtn = document.getElementsByClassName('lf')[0];
//获取左按钮
var rightBtn = document.getElementsByClassName('rg')[0];
//获取右按钮
var oSPan = document.getElementsByClassName('raidusYuan')[0].getElementsByTagName('span')
//获取圆点
var key = true;
//锁
var index = 0;
//创建一个变量用来判断样式圆点在那个位置

function changeIndex(_index){
    //给圆点添加样式函数
    for(var i = 0; i < oSPan.length; i ++){
        //获取每个圆点的位置
        oSPan[i].className = ' ';
        //让当前所有的圆点的class变为空
    }
    oSPan[_index].className = "yuanS"
    //让当前的index的值也就是当前轮播图圆点变为黑色。
}


for(var i = 0; i < oSPan.length; i ++){
    //给当前每一个圆点加点击事件
        (function(i){
            //会触发闭包，使用立即执行函数
            oSPan[i].onclick = function(){
                //添加事件
                key = false;
                //将锁关上
                clearTimeout(timer);
                //清楚定时器
                index = i;
                //让当前的Index等于当前点击按钮对等轮播图的位置
                startMove(sliderPage, {left: - index * moverWidth,},function(){
                    //starMove函数是dom运动函数,让当前ul的位置 减去点击的位置的数字* 宽度
                    key = true;
                    //将锁打开
                    timer = setTimeout(autoMove,1500);
                    //执行图片自己动
                    changeIndex(index)
                    //改变圆点样式
                })
            }
        }(i))
    }


function autoMove(direction){
    //轮播图自左向右自动运动
    clearTimeout(timer)
    //清除定时器
    if(key){
        //先看锁开了没有，如果锁是关着的则不执行，防止两个定时器一起动发生冲突。
        key = false;
        //将锁关闭
        if(!direction || direction == "left->right"){
            //如果当前的值是"left->right"
            index ++;
            //让index加一个值
            startMove(sliderPage,{left : sliderPage.offsetLeft - moverWidth}, function () {
                //图片运动函数，让当前Ul的宽度减去初始的moveWidth宽度
                if(sliderPage.offsetLeft == -num * moverWidth){
                    //如果越界了，当前Ul的宽度等于所有轮播图的张数的宽度
                    index = 0;
                    //让圆点值等于1
                    sliderPage.style.left = '0px';
                    //让轮播图归位第一张
                }
                changeIndex(index);   
                //执行圆点样式
                timer = setTimeout(autoMove,1500);
                //再一次执行自动轮播
                key = true;
                //将锁打开
                console.log(index)
                
            })
        }else if(direction == "right->left"){
            //如果点击是自右向左
            if(sliderPage.offsetLeft == 0){
                //先判断当前的Ul轮播图是不是第一张
                sliderPage.style.left = - num * moverWidth + 'px';
                //如果是让当前ul的宽度值直接等于所有轮播图的最后一张的宽度值
                index = num;
                ///让圆点等于最后一张轮播图位置数字的值
            }
            index --;
            //如果不是第一张就index --一个值
            startMove(sliderPage,{left : sliderPage.offsetLeft + moverWidth,}, function () {
                //执行动画
                changeIndex(index);
                //执行圆点样式
                timer = setTimeout(autoMove,1500);
                //执行自动定时器
                key = true;
                //让锁打开
            })
            
        }
    } 
}

leftBtn.onclick = function(){
    //给左按键添加点击事件
autoMove('right->left');
//传入参数自右向左
}
rightBtn.onclick = function(){
    //给右键添加点击事件
autoMove('left->right');
//传入参数自左向右
}




setTimeout(autoMove,1500);
//初始自动加载函数

//获取当前元素的class值的方法
function getStyle (dom, attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom, null)[attr];
    }else{
        return dom.currentStyle[attr];
    }
}
//动画方法，看之前的博客文章有写到
function startMove(dom, attrObj, callback) {
    clearInterval(dom.timer);
    var iSpeed = null, iCur = null;
    dom.timer = setInterval(function () {
        var bStop = true;
        for (var attr in attrObj) {
            if (attr == 'opacity') {
                iCur = parseFloat(getStyle(dom, attr)) * 100
            } else {
                iCur = parseFloat(getStyle(dom, attr));
            }
            iSpeed = (attrObj[attr] - iCur) / 7;
            iSpeed = iSpeed > 0 ?  Math.ceil(iSpeed) : Math.floor(iSpeed);
            if(attr == 'opacity'){
                dom.style.opacity = (iCur + iSpeed) / 100;
            }else{
                dom.style[attr] = iCur + iSpeed + 'px'
            }
            if( iCur != attrObj[attr]){
                bStop = false;
            }
        }
        if(bStop) {
            clearInterval(dom.timer);
            typeof callback == 'function' && callback()
        }
    }, 30)
}
九依
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery轮播图
12-24
jQuery实现轮播图效果，适合初学者学习轮播图效果。。
轮播图详解（完整代码在最后）
m0_48639378的博客
07-06 6830
轮播图
asp.net +C# +sql2000 实现仿csdn的图片轮换代码
小牛他爹的专栏
05-25 1005
@ Control Language="c#" AutoEventWireup="false" Codebehind="PicAdrotator.ascx.cs" Inherits="WebJTJ.Control.PicAdrotator" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>        div ali
使用javascript完成轮播图效果，代码简单
最新发布
Zbz00720的博客
04-27 500
这里并没有使用css的动画和过渡，主要还是为了锻炼逻辑思维能力，对于初学js的同学来说，也许能提供一些帮助。
【学习笔记56】轮播图的分析
yizhiyang
11-29 316
轮播图的分析
js案例：简单的图片轮播（代码逐行讲解，建议先看完整代码）
qq_52799985的博客
08-09 9860
做一个简单的js图片轮播效果并不需要特别多的知识点，代码逐行讲解，小白必看。
JS实战轮播图详细代码
一步一个脚印，踏实努力，向着目标前进
06-12 4119
这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。
HTML+CSS +JS实现轮播图的四种方法
偷只猫来养的博客
06-18 4万+
HTML+CSS +JS实现轮播图 轮播图能够自动播放，当点击左右箭头时可以手动切换图片；当鼠标移入圆点时，自动播放停止，显示当前图片；当鼠标移出圆点时，图片又从当前图片开始自动播放；当鼠标点击圆点时，可以手动切换图片；图片的播放是循环的。 1、布局——HTML + CSS 首先，在页面放一个整体的大盒子，在大盒子中装几个小盒子，分别用于放图片、左右点击箭头、底部切换的圆点。 <div id="box"> <!-- 放图片--> <div id="lunboimg"&
jQuery响应式无限轮播图片代码
04-07
首先，我们需要引入jQuery库，然后可以创建一个容器元素，存放所有轮播图片。下面是一个简单的HTML结构示例： ```html <!-- 图片元素 --> <!-- ... 更多图片 --> 上一张 下一张 ``` 接着，我们用...
原生js通过一行代码实现简易轮播图
10-16
主要介绍了原生js一行代码实现简易轮播图功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
以上代码实现了一个简单的轮播图功
08-20
以上代码实现了一个简单的轮播图功能，其中包含以下主要部分： 1. 初始化数据：定义了一个包含轮播图信息的数组 `data`，每个元素包含图片的URL、标题和背景颜色。 2. 获取元素：使用 `querySelector` 方法获取...
js简单图片轮播切换特效代码
03-20
总结来说，"js简单图片轮播切换特效代码"是一个利用JavaScript实现的动态图片展示方案，通过巧妙地结合HTML、CSS和JavaScript，为网页增添了一种吸引用户的交互体验。无论是新手还是经验丰富的开发者，都能从这样的...
简单的js百叶窗图片轮播切换代码
06-09
在本文中，我们将深入探讨...总之，实现一个简单的js百叶窗图片轮播切换代码需要结合HTML布局、CSS动画和JavaScript事件监听。通过理解这三个核心部分，我们可以创建出具有独特视觉效果的图片轮播组件，提升用户体验。
轮播图完整代码详细解析，css+js+html完整代码，可直接复制粘贴使用，仅需改图片即可
bsf000000___的博客
08-12 2719
这是一段使用HTML、CSS和JavaScript编写的图片轮播组件。它通过定时器实现自动播放图片，同时提供向左和向右的箭头按钮以手动切换图片。还包括一个圆圈导航，用于显示当前图片的索引，并且可以点击圆圈导航进行图片切换。具体实现步骤如下：以上就是该轮播组件的实现步骤。你可以根据需要进行修改和扩展，例如调整样式、更换图片等。 效果图
轮播图（含全部代码：html、css、javascript）
Cap07博客
07-31 6117
代码】轮播图（含全部代码html、css、javascript）
轮播图 原生代码（HTML+CSS+JQuery）
qq_69635978的博客
03-29 5209
【代码】轮播图 原生代码（HTML+CSS+JQuery）
轮播图的实现代码
weixin_45273903的博客
01-22 4520
<!DOCTYPE html> <html> <head> <title>轮播图的实现</title> <style> * { padding: 0; margin: 0; } .lunbo { width: 600px; height: 500px...
【HTML+CSS+jQuery】实现轮播图详细代码及详解（带左右切换和分页）
TechnicalXiaobai的博客
07-16 3261
创建了图片对应的圆点导航按钮，并为每个按钮绑定了点击事件，点击按钮时通过。事件来在鼠标悬停在轮播容器上时停止自动轮播，离开时重新开始自动轮播。方法，在图片列表的首尾分别插入了复制的图片，实现无缝轮播的效果。创建了左右切换按钮，并为其绑定了点击事件，通过点击按钮来切换图片。实现自动轮播功能，每隔3000毫秒（3秒）切换到下一张图片。函数来处理图片的动画滑动，实现了无缝轮播的效果。函数来切换图片，并高亮显示对应的按钮。来实现左右切换和图片对应的圆点导航。容器来包裹轮播图片，使用。在图片初始化时，使用了。
轮播图制作，详细步骤及 HTML+CSS+JS 完整代码
热门推荐
qq_46178261的博客
04-05 5万+
1.轮播图的结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
写一个网页轮播图代码并解释代码
03-26
以下是一个简单的网页轮播图代码实例： HTML代码： ``` <div id="slider"> <div class="slides"> <img src="slide1.jpg"> <img src="slide2.jpg"> <img src="slide3.jpg"> </div> </div> ``` CSS代码： ``` #slider { width: 100%; overflow: hidden; } .slides { display: flex; width: 300%; transition: transform 0.4s ease-in-out; } .slides img { width: 33.333%; float: left; } #slider input[name='slide-dot'] { display: none; } #slider label { display: inline-block; height: 10px; width: 10px; border-radius: 50%; background: #ddd; margin: 0 10px; cursor: pointer; } #slider input[name='slide-dot']:checked + label { background: #222; } ``` JavaScript代码： ``` var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("slides")[0].getElementsByTagName("img"); for (i = 0; i < slides.length; i++) { slides[i].style.width = "0"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.width = "100%"; setTimeout(showSlides, 3000); // 轮播时间，单位为毫秒 } ``` 解释： 1. HTML部分： 网页轮播图的主要元素是包含轮播图图像的div（这里的id是“slider”）和内部的img元素（这里只有三张图像）。为了用户能够手动控制轮播图的展示，我们还需要在html中添加一些控制按钮，比如这里用的是checkbox和label。 2. CSS部分： CSS主要是为轮播图和控制按钮设置样式。我们设置slider的宽度为100%（这样轮播图会自适应不同设备的屏幕大小），overflow为hidden，以便超出slider宽度的图像不会显示在屏幕上。slides是一个包含img元素的div，每个img元素宽度为slider宽度的1/3，float设为left。控制按钮的初始化样式设置是显示为灰色，并为每个控制按钮设置了10像素宽的圆点，之后我们根据用户选择的控制按钮修改样式。 3. JavaScript部分： 这是一个执行轮播图的JavaScript函数。我们首先定义一个“slideIndex”变量，指示当前显示的图片在slides数组中的索引，初始化为0。后面我们调用“showSlides”函数时，它会自动执行以下操作： - 获取slides元素的img元素集合，设置索引小于“slideIndex”的所有img宽度为0，将“slideIndex”加1，并重新计算其mod（slides.length），因为我们需要按循环方式展示图片。 - 将当前img元素的宽度设置为slider的宽度，以100%的宽度实现图像的展示。 - 在setTimeout函数里将showSlides函数调用的时间设置为3000毫秒（即3秒），这样每3秒就会执行一次轮播操作。 以上就是网页轮播图代码及其解释。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值