js实现图片轮播切换效果

2024-10-11 14:47:48

最近在b站上学习的时候，学到了一个用原生js实现图片轮播切换效果的实战，码下来收藏

上图是这个小实战的效果图，整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点切换相应图片、点击主菜单显示相应子菜单内容。

html页面布局

<body>
	<!--主区域，存放所有需要元素-->
	<div id="main" class="main">
		<!-- 导航菜单 -->
		<div class="menu-box"></div>
		<!-- 子菜单 -->
		<div class="sub-menu hidden" id="sub-menu"></div>
		<!-- 主菜单 -->
		<div id="menu-content" class="menu-content">
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i></i>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i></i>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i></i>
				</a>
			</div>
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i></i>
				</a>
			</div>
		</div>
		<!-- 图片轮播 -->
		<div id="banner" class="banner">
			<a href="#">
				<!-- slide-active表示当前需要显示图片的状态 -->
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="#">
				<div class="banner-slide slide2 "></div>
			</a>
			<a href="#">
				<div class="banner-slide slide3"></div>
			</a>
		</div>
		<!-- 上一张、下一张按钮 -->
		<!-- javascript:void(0)表示这个a标签不做任何链接跳转 -->
		<a href="javascript:void(0)" class="button prev" id="prev">
			<img src="images/r-btn.png" alt="上一张" class="img-prev">
		</a>
		<a href="javascript:void(0)" class="button next" id="next">
			<img src="images/r-btn.png" alt="下一张" class="img-next">
		</a>
		<!-- 圆点导航 -->
		<div id="dots" class="dots">
			<span class="active"></span>
			<span></span>
			<span></span>
		</div>
	</div>
	</div>
</body>

js绑定事件

//封装一个代替getElementById()的方法
function byId(id){
    //对id的类型做判断
    return typeof(id)==="string"?document.getElementById(id):id;
}
//封装切换图片的函数（图片和圆点是配套的，图片有多少张圆点就有多少个，图片切换到第几张，圆点就到第几个）
function changeImg(){
    //遍历banner下所有的div，将其隐藏
    for(var i = 0;i<len;i++){
        pics[i].style.display = "none";
        dots[i].className="";  //将span上的“active”类隐藏，点击圆点以后将其显示
    }
    pics[index].style.display = "block"; //根据index找到当前图片，将其显示出来
    dots[index].className = "active";    //根据index找到当前span，将其显示出来
}
function slideImg(){
    var main = byId("main");
    //鼠标滑到图片上清除定时器，鼠标离开图片继续
    main.onmouseover = function(){
        //滑到图片上清除定时器,图片停止轮播
        if(timer){
            clearInterval(timer); 
        }
    }
    //调用onmouseout事件
    main.onmouseout = function(){
        //鼠标离开定时器继续,每隔三秒切换一次图片
        timer = setInterval(function(){
            index++; //len=3 所以index的值只能是0,1,2
            if(index>=len){
                index=0;
            }
            //切换图片
            changeImg();
        },2000);
    }
    //自动在main上触发鼠标离开的事件，让图片自动切换，即在鼠标还没有滑过图片时，图片就睡自动切换
    main.onmouseout(); //调用onmouseout方法

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生javascript实现图片轮播切换效果

本文实例为大家分享了javascript实现图片轮播切换效果的具体代码,供大家参考,具体内容如下效果如下: 代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&
JS实现多重选项卡切换轮播图

轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
js实现点击切换和自动播放的轮播图

本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下轮播图案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it
js图片轮播手动切换效果

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot
原生js实现图片层叠轮播切换效果

本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下效果图: 功能描述: 自定义图片尺寸: 每隔一段时间自动滚动图片: 每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化: 鼠标移上图片,显示当前图片的详细信息: 点击按钮向前向后滚动: 详细代码: html代码: <!DOCTYPE html> <!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topi
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
js实现轮播图自动切换

本文实例为大家分享了js实现轮播图自动切换的具体代码,供大家参考,具体内容如下先看效果图第一种 //点击按钮,序号变化 showIdx++; if (showIdx == imgArr.length) { showIdx = 0; } //所有盒子左移动 for (let i = 0; i <items.length; i++) { items[i].style.left = parseFloat(items[i].style.left) - lo
javascript实现图片自动和可控的轮播切换特效

演示图: 需要引入的文件复制代码代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1
js实现支持手机滑动切换的轮播图片效果实例

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

js实现图片轮播切换效果

相关推荐

随机推荐