javascript实现轮播图效果

最新推荐文章于 2023-09-21 22:55:09 发布
最新推荐文章于 2023-09-21 22:55:09 发布
阅读量765 收藏 5
点赞数
分类专栏： web网页设计基础 javascript 文章标签： html javascript css 图片 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHINE_SUNNY1/article/details/77872405
版权

javascript实现轮播图效果

1.轮播图实现基本思路

     实现轮播图我们肯定需要一些图片，我们动过javascript编写动画使得这些照片自动轮播，首先我们解决html部分和css部分，我们需要在一个区域内轮播图片，还有我们需要设置小圆点导航，以及向前向后的按钮，具体实现效果。

这里写图片描述

代码如下：

<body>
        <div id="container">
            <ul id="img_all">
                <li id="img8_1">
                    <img src="img/5984487bNd632b80a.jpg" />
                </li>
                <li >
                    <img src="img/5983e7cdN9eb55aba.jpg" />
                </li>
                <li >
                    <img src="img/597fe4f2N39c8cbd6.jpg" />
                </li>
                <li >
                    <img src="img/59802573N434bb1a3.jpg" />
                </li>
                <li >
                    <img src="img/5981cc12N8a3cde50.jpg" />
                </li>
                <li>
                    <img src="img/5982c03bNc33ba684.jpg" />
                </li>
                <li >
                    <img src="img/5982ee72Ne4b3f13b.jpg" />
                </li>
                <li >
                    <img src="img/5979ad9dN277885bf.jpg" />
                </li>

                <li >
                    <img src="img/5984487bNd632b80a.jpg" />
                </li>
                <li id="img1_1">
                    <img src="img/5983e7cdN9eb55aba.jpg" />
                </li>
            </ul>
                <input id="prev" type="button" value="&lt" />
                <input id="next" type="button" value="&gt" />
                <ul id="small">
                </ul>
        </div>
    </body>

css部分

<style  type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #container{
                width: 790px;
                height: 340px;
                border: 1px solid black;
                overflow: hidden;
                position: relative;
                margin: 0 auto; 
                margin-top: 100px;
            }
            #img_all{
                width: 79000px;
                height: 340px;
                position: absolute;
                z-index: 1px;
                left: -790px;
                top: 0;
            }
            #container #img_all li{
                list-style: none;
                float: left;
                width: 790px;
                height: 340px;
                z-index: 1;
                margin-left: 0px;
            }
            #img_all img{
                width: 790px;
                height: 340px;
            }
            #prev{
                width: 60px;
                height: 60px;
                color: gray;
                z-index: 2;
                font-size: 40px;
                position: absolute;
                top:140px;
                left: 0px;
                border: none;
                display: none;
                background-color:rgba(255,255,255,.8);
            }
            #next{
                width: 60px;
                height: 60px;
                color: gray;
                z-index: 2;
                font-size: 40px;
                position: absolute;
                top:140px;
                right: 0px;
                border: none;
                display: none;
                overflow: hidden;
                background-color:rgba(255,255,255,.8);
            }
            #small{
                position: absolute;
                z-index: 2;
                background:rgba(254,254,254,0.5);
                list-style: none;
                height: 20px;
                bottom:20px;
                margin: 0 auto;
                border-radius: 10px;
            }
            #small li{
                float: left;
                width: 13px;
                height: 13px;
                margin-left:11px;
                margin-top: 3px;
                background-color:white;
                text-align: center;
                border-radius: 50%;
            }
            #small li:hover{
                cursor:pointer;
            }
        </style>

接下来我们来了解这个实现的基本原理我们先来看一张图，大家会就一目了然了

这里写图片描述

我们将图片连在一起放在一个div里，而这个div的大小只有一张图片这么大，我们通过给div设置overflow:hidden;让超出div的部分隐藏，这样我们通过让照片连在一起这个div通过javascript让其每次移动一张照片的像素，使得照片进行切换，在我们处理最后一张和第一张图片的时候大家注意力了：这里面有一个技巧，我们在最后一张图片后面加上第一张照片，在第一张照片前面加上最后一张照片，使用这两张照片实现一个轮转的效果，在我们照片运动到最后一张后面的第一张假图时，我们看到了第一张照片，然后我们立马让这个div立马回到第一张真图的位置，这样使得用户产生一个视觉效果，感觉这个自动回到了第一张，向前时的原理也是一样的，我们通过图片来看一下

这里写图片描述

在后面还有javascript的一些注意点，我们需要判断动画是否运行结束，防止无限进行点击事件，导致浏览器崩溃，这里我在javascript中具体具体进行了注释。

javascript代码如下：

<script type="text/javascript">
            //运动函数
            window.onload=function(){

                var temp=-790;
                var ocenter=document.getElementById("container");
                var oimgs=document.getElementById("img_all");
                var oprev=document.getElementById("prev");
                var onext=document.getElementById("next");
                var small=document.getElementById("small");
                var smallLi=document.getElementById("img_all").getElementsByTagName("li");
                var sports=false;//记录当前动画是否运行结束
                var mousetimer=null;//设置鼠标移动上去时的计时器
                var index=1;
                var Curve=0;
                var imgSum=smallLi.length;
                //根据图片数量添加按钮
                function addSmall(){
                    for(var i=0;i<smallLi.length-2;i++)
                    {
                        var newLi=document.createElement("li");
                        small.appendChild(newLi);
                    }
                }
                addSmall();
                var osmall=document.getElementById("small").getElementsByTagName("li");
                osmall[0].style.background='red';
                //设置图片的宽度


                //设置按钮居中
                small.style.width=24*(imgSum-2)+11+'px';
                small.style.left=parseInt((790-24*(imgSum-1))/2)+'px';  
                //运动函数
                function startRemove(obj,itarget,time,mult){
                var odiv=obj;
                sports=true;
                var timer=null;
                clearTimeout(timer);
                timer=setTimeout(function(){
                    var speed=(itarget-odiv.offsetLeft)/mult;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(odiv.offsetLeft==itarget)
                    {
                        odiv.style.left=itarget;
                        clearTimeout(timer);
                        sports=false;
                    }
                    else
                    {
                        odiv.style.left=odiv.offsetLeft+speed+'px';
                        setTimeout(arguments.callee,30);
                        sports=true;
                    }
                },time);
                //增加第一张和最后一张的判断条件
                if(itarget>0)
                {
                    itarget=(imgSum-2)*-790;
                    odiv.style.left=itarget+'px';
                    itarget=(imgSum-3)*-790;
                }
                if(itarget<(imgSum-1)*-790)
                {
                    itarget=-790;
                    odiv.style.left=itarget+'px';
                    itarget=-1580;
                }
                return itarget;
                }
                function showbutton(){
                //for循环的功能是清除在这之前所有按钮的颜色
                for(var i=0;i<osmall.length;i++)
                {
                    //使用匿名函数解决for循环问题
                    (function(o){
                        if(osmall[o].style.backgroundColor=="red")
                        {
                            osmall[o].style.backgroundColor='';
                        }                       
                    })(i);
                }
                if(index>imgSum-2)
                {
                    index=1;
                }
                if(index<1)
                {
                    index=imgSum-2;
                }
                osmall[index-1].style.backgroundColor='red';
            }
            //给每一个按添加事件 
            function osmallevent(){
                for(var i=0;i<osmall.length;i++)
                {
                    var t=0;
                    (function(o){
                        osmall[o].onmouseover=function(){
                            if(sports==false)
                            {
                                var temp2=0;
                                temp2=(o+1)*(-790);
                                startRemove(oimgs,temp2,0.5,2);
                                    for(var i=0;i<osmall.length;i++)
                                    {
                                        (function(o){
                                            if(osmall[o].style.backgroundColor=="red")
                                            {
                                                osmall[o].style.backgroundColor='';
                                            }                       
                                        })(i);
                                    }
                                    osmall[o].style.backgroundColor='red';
                            }
                        }
                    })(i);
                }
            }
            osmallevent();
                ocenter.onmouseover=function(){
                    oprev.style.display='block';
                    onext.style.display='block';
                    clearInterval(mousetimer);
                }
                function autoPlay(){
                    mousetimer=setInterval(onext.onclick=function(){
                        if(!sports){
                        temp-=790;
                        index++;
                        osmall[index-2].style.backgroundColor='';
                        temp=startRemove(oimgs,temp,30,6);
                        showbutton();
                        }
                    },2000);                    
                }
                autoPlay();
                ocenter.onmouseout=function(){
                    oprev.style.display='none';
                    onext.style.display='none';
                    autoPlay();
                }
                onext.onclick=function(){
                    if(!sports){
                        temp-=790;
                        index++;
                        temp=startRemove(oimgs,temp,30,6);
                        showbutton();
                        console.log(index);
                    }
                }
                oprev.onclick=function(){
                    if(!sports){
                        index--;
                        temp+=790;
                        temp=startRemove(oimgs,temp,30,6);
                        showbutton();
                        console.log(index);
                    }
                }
            }
        </script>

这里面比较人性画的东西就是我们在html中添加照片时，我们的小圆点导航是自动添加的，大家可以试一下，下面时这个程序的完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>京东轮播图</title>
        <style  type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #container{
                width: 790px;
                height: 340px;
                border: 1px solid black;
                /*overflow: hidden;*/
                position: relative;
                margin: 0 auto; 
                margin-top: 100px;
            }
            #img_all{
                width: 79000px;
                height: 340px;
                position: absolute;
                z-index: 1px;
                left: -790px;
                top: 0;
            }
            #container #img_all li{
                list-style: none;
                float: left;
                width: 790px;
                height: 340px;
                z-index: 1;
                margin-left: 0px;
            }
            #img_all img{
                width: 790px;
                height: 340px;
            }
            #prev{
                width: 60px;
                height: 60px;
                color: gray;
                z-index: 2;
                font-size: 40px;
                position: absolute;
                top:140px;
                left: 0px;
                border: none;
                display: none;
                background-color:rgba(255,255,255,.8);
            }
            #next{
                width: 60px;
                height: 60px;
                color: gray;
                z-index: 2;
                font-size: 40px;
                position: absolute;
                top:140px;
                right: 0px;
                border: none;
                display: none;
                overflow: hidden;
                background-color:rgba(255,255,255,.8);
            }
            #small{
                position: absolute;
                z-index: 2;
                background:rgba(254,254,254,0.5);
                list-style: none;
                height: 20px;
                bottom:20px;
                margin: 0 auto;
                border-radius: 10px;
            }
            #small li{
                float: left;
                width: 13px;
                height: 13px;
                margin-left:11px;
                margin-top: 3px;
                background-color:white;
                text-align: center;
                border-radius: 50%;
            }
            #small li:hover{
                cursor:pointer;
            }
        </style>
        <script type="text/javascript">
            //运动函数
            window.onload=function(){

                var temp=-790;
                var ocenter=document.getElementById("container");
                var oimgs=document.getElementById("img_all");
                var oprev=document.getElementById("prev");
                var onext=document.getElementById("next");
                var small=document.getElementById("small");
                var smallLi=document.getElementById("img_all").getElementsByTagName("li");
                var sports=false;//记录当前动画是否运行结束
                var mousetimer=null;//设置鼠标移动上去时的计时器
                var index=1;
                var Curve=0;
                var imgSum=smallLi.length;
                //根据图片数量添加按钮
                function addSmall(){
                    for(var i=0;i<smallLi.length-2;i++)
                    {
                        var newLi=document.createElement("li");
                        small.appendChild(newLi);
                    }
                }
                addSmall();
                var osmall=document.getElementById("small").getElementsByTagName("li");
                osmall[0].style.background='red';
                //设置图片的宽度


                //设置按钮居中
                small.style.width=24*(imgSum-2)+11+'px';
                small.style.left=parseInt((790-24*(imgSum-1))/2)+'px';  
                //运动函数
                function startRemove(obj,itarget,time,mult){
                var odiv=obj;
                sports=true;
                var timer=null;
                clearTimeout(timer);
                timer=setTimeout(function(){
                    var speed=(itarget-odiv.offsetLeft)/mult;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(odiv.offsetLeft==itarget)
                    {
                        odiv.style.left=itarget;
                        clearTimeout(timer);
                        sports=false;
                    }
                    else
                    {
                        odiv.style.left=odiv.offsetLeft+speed+'px';
                        setTimeout(arguments.callee,30);
                        sports=true;
                    }
                },time);
                //增加第一张和最后一张的判断条件
                if(itarget>0)
                {
                    itarget=(imgSum-2)*-790;
                    odiv.style.left=itarget+'px';
                    itarget=(imgSum-3)*-790;
                }
                if(itarget<(imgSum-1)*-790)
                {
                    itarget=-790;
                    odiv.style.left=itarget+'px';
                    itarget=-1580;
                }
                return itarget;
                }
                function showbutton(){
                //for循环的功能是清除在这之前所有按钮的颜色
                for(var i=0;i<osmall.length;i++)
                {
                    //使用匿名函数解决for循环问题
                    (function(o){
                        if(osmall[o].style.backgroundColor=="red")
                        {
                            osmall[o].style.backgroundColor='';
                        }                       
                    })(i);
                }
                if(index>imgSum-2)
                {
                    index=1;
                }
                if(index<1)
                {
                    index=imgSum-2;
                }
                osmall[index-1].style.backgroundColor='red';
            }
            //给每一个按添加事件 
            function osmallevent(){
                for(var i=0;i<osmall.length;i++)
                {
                    var t=0;
                    (function(o){
                        osmall[o].onmouseover=function(){
                            if(sports==false)
                            {
                                var temp2=0;
                                temp2=(o+1)*(-790);
                                startRemove(oimgs,temp2,0.5,2);
                                    for(var i=0;i<osmall.length;i++)
                                    {
                                        (function(o){
                                            if(osmall[o].style.backgroundColor=="red")
                                            {
                                                osmall[o].style.backgroundColor='';
                                            }                       
                                        })(i);
                                    }
                                    osmall[o].style.backgroundColor='red';
                            }
                        }
                    })(i);
                }
            }
            osmallevent();
                ocenter.onmouseover=function(){
                    oprev.style.display='block';
                    onext.style.display='block';
                    clearInterval(mousetimer);
                }
                function autoPlay(){
                    mousetimer=setInterval(onext.onclick=function(){
                        if(!sports){
                        temp-=790;
                        index++;
                        osmall[index-2].style.backgroundColor='';
                        temp=startRemove(oimgs,temp,30,6);
                        showbutton();
                        }
                    },2000);                    
                }
                autoPlay();
                ocenter.onmouseout=function(){
                    oprev.style.display='none';
                    onext.style.display='none';
                    autoPlay();
                }
                onext.onclick=function(){
                    if(!sports){
                        temp-=790;
                        index++;
                        temp=startRemove(oimgs,temp,30,6);
                        showbutton();
                        console.log(index);
                    }
                }
                oprev.onclick=function(){
                    if(!sports){
                        index--;
                        temp+=790;
                        temp=startRemove(oimgs,temp,30,6);
                        showbutton();
                        console.log(index);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="container">
            <ul id="img_all">
                <li id="img8_1">
                    <img src="img/5984487bNd632b80a.jpg" />
                </li>
                <li >
                    <img src="img/5983e7cdN9eb55aba.jpg" />
                </li>
                <li >
                    <img src="img/597fe4f2N39c8cbd6.jpg" />
                </li>
                <li >
                    <img src="img/59802573N434bb1a3.jpg" />
                </li>
                <li >
                    <img src="img/5981cc12N8a3cde50.jpg" />
                </li>
                <li>
                    <img src="img/5982c03bNc33ba684.jpg" />
                </li>
                <li >
                    <img src="img/5982ee72Ne4b3f13b.jpg" />
                </li>
                <li >
                    <img src="img/5979ad9dN277885bf.jpg" />
                </li>

                <li >
                    <img src="img/5984487bNd632b80a.jpg" />
                </li>
                <li id="img1_1">
                    <img src="img/5983e7cdN9eb55aba.jpg" />
                </li>
            </ul>
                <input id="prev" type="button" value="&lt" />
                <input id="next" type="button" value="&gt" />
                <ul id="small">
                </ul>
        </div>
    </body>
</html>

整个轮播图就这样实现啦，希望这里面的东西对你javascript的学习有所帮助，如果大家有更好的方法以及技巧，欢迎大家与我交流，相互学习。

Eden-one
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现图片轮播效果
我们仨
07-22 505
图片轮播效果图如下： 具有以下功能：1.自动播放图片（鼠标进入显示区时停止播放） 2.点击小圆形按钮可以切换图片 autoplay.jsp代码如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
JavaScript实现轮播图
10-25
使用JavaScript实现轮播的几个效果，定时切换、点击切换和滑过切换。共享给一些刚接触JavaScript的小白。
使用JavaScript实现轮播图
liangruilz的博客
05-09 455
使用JavaScript实现轮播图
使用JavaScript实现轮播图效果
retuJQC的博客
05-24 293
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; * { padding: 0; margin: 0; } body { height: 8888px; } .nav { height:
使用JavaScript完成简单轮播图效果
raxi2021的博客
03-05 161
【代码】使用JavaScript完成简单轮播图效果。
前端JavaScript实现轮播图效果
04-11
最后，我们需要编写JavaScript代码来实现轮播图的动态切换和交互功能。在`slide.js`文件中，我们可以创建一个定时器来自动切换图片，并添加点击事件来允许用户手动切换。以下是一个基本的实现： ```javascript let ...
JavaScript实现轮播图效果代码实例
10-16
总的来说，本文所提供的JavaScript实现轮播图代码实例，通过HTML、CSS以及JavaScript的结合，详细演示了轮播图的实现方法。对于前端开发人员来说，理解和掌握轮播图的实现原理和细节，不仅有助于提升自己的开发技能...
JavaScript实现简单图片轮播效果
10-19
6. 动画函数animate：为了实现平滑的图片切换效果，通常会使用定时器来逐步改变图片的位置。这里的animate函数首先清除之前可能存在的定时器，防止动画函数的冲突，然后根据传入的目标位置进行位置的逐步调整。 7. ...
原生JavaScript实现轮播图效果
05-06
本示例将深入探讨如何使用原生JavaScript来实现一个功能完备的轮播图效果，无需依赖任何外部库如jQuery或其他框架。下面我们将详细讨论实现这个功能所需的关键知识点。 1. **HTML结构**： - 轮播图的基本结构通常...
JavaScript特效：实现轮播图
YanHSama的博客
11-15 279
实现效果 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/marquee.css" /> </head> ...
图片上左右箭头翻页代码
04-30
图片上左右箭头翻页代码，非常好用。只是在火狐浏览器上有点bug，调试一下就可以了。
JavaScript图片轮换源代码
07-27
JavaScript图片轮换源代码，yongJquery实现的不间断的图片轮换代码
javascript之轮播图效果
wzy2401的博客
12-07 169
html部分代码如下： < > 1 2 3 4 css部分代码如下： body,span { margin: 0; padding: 0; } div.banner { position: relative; width: 1226px; height: 460px;
前端简单入门第八讲 使用JavaScript完成图片自动轮播的效果
李阿昀的博客
04-27 2961
本文教你如何使用JavaScript完成图片的轮播，说是图片的轮播，其实就是图片的滚动而已，也没什么高深莫测的实质性的东西。要实现这个效果，须理解BOM(浏览器对象模型)中的Window对象的定时的操作： 设置定时的方法 清除定时的方法 现在我来写一个小的Demo来稍微讲一下Window对象设置定时的方法。例如有如下一个【Window对象的定时操作.html】页面：<!DOCTYPE html> <
使用JavaScript 实现最简单最基本的轮播图样式
yzq0820的博客
07-10 1783
目录一、效果展示二、H5的布局三、CSS的布局第一步第二步第三步四、JS的布局第一步第二步第三步五、源码评论区自取主要通过，设置点击事件来实现，简单的轮播图效果，是非常普通的轮播样式。可以使用自己的图片，需要注意路径，不注意路径会出现错误，呈现不出所需要的效果。三、CSS的布局第一步第一个盒子的布局第二个盒子主要注意两个盒子之间的定位，还有浮动第二步给图片下的小圆点进行布局，需要注意，在这里可以设置一个hover，来为JS实现排他思想做布局，这样所呈现的效果就是，可以明确的显示...............
使用JavaScript制作轮播图
weixin_42442856的博客
12-20 952
纯js，不使用轮播图控件怎么做轮播图呢，往下看吧 效果图： 1.可点击小圆点切换图片 2.可点击左右按钮切换图片 3.可自动播放 先上CSS和HTML代码： <body> <div class="main"> <div class="focus fl"> <a href="javascript:;" class="arrow-l">&lt;</a> &
javascript制作轮播图全过程，1.获取元素2.分模块3.分析知识点4.全部代码
qq_46545062的博客
08-21 473
javascript制作轮播图全过程，1.获取元素2.分模块3.分析知识点4.全部代码
JavaScript——简单实现轮播图效果
Melonico的博客
06-24 272
分析：可以通过获取img元素对象并更改其src属性实现该效果，并使用定时器实现在一段时间后多次切换 1. 使用 img 标签显示图片 <img id="img" src="img/pic1.png" style="width: 100%"> 2. 获取元素对象 var img = document.getElementById("img"); 3. 更改 img 对象的 src 属性 img.src = "img/pic2.png"; 直到，我们只可以满足更换1次图片，并且只能更换1张，
使用JavaScript实现图片的自动轮播
Sun_blog
09-21 5950
在网站开发中，经常会遇到需要展示多张图片并自动切换的需求，这就需要使用JavaScript来实现图片的自动轮播功能。本文将通过一个简单的例子，演示如何用JavaScript实现图片的自动轮播，并确保代码占比不高于50%。通过上述步骤，我们成功实现了使用JavaScript来实现图片的自动轮播。在HTML结构中，我们使用标签来表示图片，并给每个图片设置了唯一的id。在CSS样式中，我们使用绝对定位和过渡效果来实现图片切换的动画效果。
用JAVASCRIPT实现轮播图效果
最新发布
06-21
在JavaScript中实现轮播图效果，通常会使用DOM操作和定时器或者现代的JavaScript库如jQuery或更高级的库如Swiper、Slick等。以下是一个简单的基于JavaScript和CSS的轮播图示例： 1. HTML结构: ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值