html怎样实现图片自动切换

Posted 2023-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html怎样实现图片自动切换相关的知识，希望对你有一定的参考价值。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的script标签中，填入js代码：setInterval('$("img").attr("src", "small3.png")', 1000);。

3、浏览器进入index.html页面中，此时显示出一张图片。

4、过1秒后，图片自动切换为另一张图片了。

参考技术A

1 代码（实现了图片轮播的效果）

<!doctype html>

<html>

<head>

<title>图片简单切换</title>

window.onload = function()

var pre = document.querySelector("#pre");

var next = document.querySelector("#next");

var pic = document.querySelector("#pic");

var index = 1;

next.onclick = function()

index++;

if(index > 5)

index = 1;

pic.src = "image/"+index+".jpg";

pre.onclick = function()

index--;

if(index < 1)

index = 5;

pic.src = "image/"+index+".jpg";

</script>

</head>

<body>

</body>

</html>

2 静态页面效果图

3 注意的是我的图片命名是有规则的是按照数字来的 1 .jpg 2.JPG...

4 实现图片轮播显示代码解释：

//当点击下一个按钮的时候，图片显示image2.jpg用的是index变量来累加，当index超过了图片的数量，就让index =1；回到第一张图片。

pre.onclick = function()

index--;

if(index < 1)

index = 5;

pic.src = "image/"+index+".jpg";

参考技术B

html实现图片自动切换是通过js代码来控制的。实现思路如下：

创建一个图片数组，将需要轮播的图片放在这个数组中

通过js定时器去随机获取数组中的某一张图片在html中的固定位置显示即可。

实现代码如下：

<html>
<head>
<title>切换图片</title>
<script type = "text/javascript">
function displayNextImage() 显示下一张
x = (x === images.length - 1) ? 0 : x + 1;如果是最后一张，那么切换到第一张
document.getElementById("img").src = images[x];把获取到的值给img标签，让他显示

function displayPreviousImage() 显示下一张
x = (x <= 0) ? images.length - 1 : x - 1;获取数组中的上一个值
document.getElementById("img").src = images[x];把获取到的值给img标签，让他显示

function startTimer() 定时器，dom加载后调用
setInterval(displayNextImage, 3000);每隔3秒调用一次显示图片的方法。

var images = [], x = -1;定义imges数组存放图片名
images[0] = "image1.jpg";初始化第一张图
images[1] = "image2.jpg";初始化第二张图

images[2] = "image3.jpg"; 初始化第三张图

</script>
</head>

<body onload = "startTimer()">当页面加载完毕，调用startTimer方法 <img id="img" src="startpicture.jpg"/>img标签设置图片显示位置
<button type="button" 按钮点击后开始轮换图片onclick="displayPreviousImage()">上一张</button>
<button type="button" onclick="displayNextImage()">下一张</button>
</body>
</html>

jQuey实现轮播图效果

再平常的浏览器页面，轮播图都是必不可缺少的一个板块，在这总结了一下轮播图基本的一些样式

首先介绍一下，本文实现的轮播图的基本效果：　　

　　1. 3s自动切换图片,图片切换时提示点跟随切换
　　2. 鼠标划到图片上，自动切换轮播图停止
　　3. 指示点划过切换对应的图片，图片切换时提示点跟随切换
　　4. 点击上一页下一页按钮切换图片
　　5. 图片切换时有渐变的效果

下表面开始代码的书写

css代码

/*初始化浏览器默认样式*/
*{
    margin: 0;
    padding: 0;
}
/*sowingMap*/
.sowingMap{
    width: 800px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
/*imgPart*/
.imgPart{
    width: 800px;
    height: 500px;
    position: absolute;
}
/*imgSwitch*/
.imgSwitch{
    width: 800px;
    height: 500px;
    position: absolute;
    list-style: none;
    display: none;
    cursor: pointer;
}
.imgSwitch img{
    width: 100%;
    height: 500px;
}
.imgShow{
    display: block;
}
/*spotPart*/
.spotPart{
    position: absolute;
    bottom: 0;
    height: 40px;
    left: 36%;
}
.spotPart p{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #fff;
    float: left;
    margin-left: 20px;
    cursor: pointer;
}
/*提示点的选中颜色*/
.spotPart .spotColor{
    background-color: #f00;
}
/*上一张下一张切换部分*/
.preImg , .nextImg{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    color: #f5f5f5;
    position: absolute;
    top: 190px;
    cursor: pointer;
    display: none;
}
.preImg{
    left: -35px;
    text-indent: 25px;
}
.nextImg{
    right: -35px;
    text-indent: -25px;
}

css代码块

html代码

<div class="sowingMap">
        <ul class="imgPart">
            <li class="imgSwitch imgShow"><img src="img/1.jpg"/></li>
            <li class="imgSwitch"><img src="img/2.jpg"/></li>
            <li class="imgSwitch"><img src="img/3.jpg"/></li>
            <li class="imgSwitch"><img src="img/4.jpg"/></li>
            <li class="imgSwitch"><img src="img/5.jpg"/></li>
      </ul>
      <div class="spotPart">
            <p class="spotColor"></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
      </div>
      <div class="loopChange">
             <p class="preImg">&lt;</p>
             <p class="nextImg">&gt;</p>
      </div>
</div>

轮播图功能实现的js代码

//获取元素的个数
var count = $(‘.imgSwitch‘).length;
var num = 0;
var start = null;
//业务1：实现3s钟自动循环切换图片,图片切换时提示点跟随切换,图片切换时有渐变的效果
function loopStart() {
    clearInterval(start);
    start = setInterval(function() {
        //首先清楚所有样式
        $(‘.imgSwitch‘).hide();
        //取余方式对num取值进行判断
        num = (num + 1) % count;
        //图片渐入
        $(‘.imgSwitch‘).eq(num).fadeIn(1000);
        $(‘.spotPart p‘).eq(num).addClass("spotColor").siblings().removeClass("spotColor");
    }, 2000);
}
loopStart();

//业务2：鼠标划到图片上，轮播图停止自动切换，划出后继续播放
$(‘.imgSwitch‘).mouseover(function() { //鼠标划过停止
    clearInterval(start);
});
$(‘.imgSwitch‘).mouseout(function() { //鼠标划出
    loopStart();
});

//业务三：指示点划过切换对应的图片，图片切换时提示点跟随切换
$(‘.spotPart p‘).mouseover(function() {
    clearInterval(start);
    //首先清楚所有样式
    $(‘.imgSwitch‘).hide();
    $(‘.imgSwitch‘).eq($(this).index()).fadeIn(1000);
    $(‘.spotPart p‘).eq($(this).index()).addClass("spotColor").siblings().removeClass("spotColor");
});
$(‘.spotPart p‘).mouseout(function() {
    loopStart();
});
//业务四：点击上一页下一页切换
$(‘.sowingMap‘).mouseover(function() {
    clearInterval(start);
    $(‘.loopChange p‘).show();
});
$(‘.sowingMap‘).mouseout(function() {
    loopStart();
    $(‘.loopChange p‘).hide();
});
$(‘.preImg‘).click(function() {
    $(‘.imgSwitch‘).hide();
    if(num <= 0) {
        num = 4;
        $(‘.imgSwitch‘).eq(num).fadeIn(1000);
        $(‘.spotPart p‘).eq(num).addClass("spotColor").siblings().removeClass("spotColor");
    }
    else if(num <= 4) {
        $(‘.imgSwitch‘).eq(num-1).fadeIn(1000);
        $(‘.spotPart p‘).eq(num-1).addClass("spotColor").siblings().removeClass("spotColor");
        num--;
    }
});
$(‘.nextImg‘).click(function() {
    $(‘.imgSwitch‘).hide();
    if(num >= 4) {
        num = 0;
        $(‘.imgSwitch‘).eq(num).fadeIn(1000);
        $(‘.spotPart p‘).eq(num).addClass("spotColor").siblings().removeClass("spotColor");
    }
    else if(num >= 0) {
        $(‘.imgSwitch‘).eq(num+1).fadeIn(1000);
        $(‘.spotPart p‘).eq(num+1).addClass("spotColor").siblings().removeClass("spotColor");
        num++;
    }
});

注意，不要忘记引入jquery的语法库，不然会报错的哟！！！

对于上述索引范围的判断，介绍一种简单的办法，此种办法，使用的时一个数取于所获的元素的length值，不管如何，他的范围只是会0~a.length之间

num = (num + 1) % count;

ok，很方便的使用jQuery实现了轮播图效果，欢迎您提出宝贵的意见！！！

以上是关于html怎样实现图片自动切换的主要内容，如果未能解决你的问题，请参考以下文章

问，html中，图片在特定位置，每几秒钟自动切换一张的代码怎么写？求一种最简单的

Android 滑动切换（首页展示，图片新闻自动切换，循环切换，自动和手动）

JS网页设计里面，轮播图片，未设置初始值，想进入该网页后，自动默认选定第一个切换如何增加函数。

swipe.js实现支持手拔与自动切换的图片轮播

轮播图（淡入淡出切换）

图片的自动和手动切换