js点击切换图片

港控/mmm° 2022-01-14 09:41 488阅读 0赞

<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.content{
    				width: 390px;
    				height: 300px;
    				position: relative;
    				margin: auto;
    				overflow: hidden;
    			}
    			.imgContent{
    				position: absolute;
    				width: 1950px;
    				left: 0px;
    			}
    			img{
    				float: left;
    				width: 390px;
    				height: 300px;
    			}
    			p,.box{
    				position: absolute;
    				width: 100%;
    			}
    			p{
    				background-color: rgba(0,0,0,0.5);
    				left: 0;
    				top: 0;
    				height: 30px;
    				text-align: center;
    				line-height: 30px;
    				color: white;
    				z-index: 2;
    			}
    			.box{
    				bottom: 10px;
    				text-align: center;
    			}
    			.box span{
    				display: inline-block;
    				background-color: pink;
    				width: 20px;
    				height: 20px;
    				text-align: center;
    				line-height: 20px;
    				cursor: pointer;
    				color: white;
    			}
    			.spanActive{
    				background-color: red !important;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="content">
    			<p>美女1</p>
    			<div class="imgContent">
    				<img src="img/1.jpg"/>
    				<img src="img/2.jpg"/>
    				<img src="img/3.jpg"/>
    				<img src="img/4.jpg"/>
    				<img src="img/1.jpg"/>
    			</div>
    			<div class="box">
    				<span class="spanActive">1</span>
    				<span>2</span>
    				<span>3</span>
    				<span>4</span>
    			</div>
    		</div>
    	</body>
    	<script src="js.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		var content = document.getElementsByClassName('content')[0];
    		var imgContent = document.getElementsByClassName('imgContent')[0];
    		var spanArr = document.getElementsByClassName('box')[0].getElementsByTagName('span');
    		var timer;
    		var ind = 0;
    		//0 0px
    		//1 -390px
    		//2 -780px
    		//3 -1170px
    		timer = setInterval(autoNext,2000)
    		
    		//鼠标移入的事件
    		content.onmouseover = function () {
    			clearInterval(timer);
    		}
    		
    		//鼠标移出的事件
    		content.onmouseout = function () {
    			timer = setInterval(autoNext,2000);
    		}
    		
    		for(var i=0;i<spanArr.length;i++){
    			spanArr[i].index = i;
    			spanArr[i].onclick = function () {
    				move(imgContent, 'left', 30, -390*this.index)
    				
    				for(var j=0;j<spanArr.length;j++){
    					spanArr[j].className = '';
    				}
    				this.className = 'spanActive';
    				ind = this.index;
    				
    			}
    		}
    		
    		function autoNext() {
    			ind = ind + 1;
    			
    			//滚到第5张图片的时候 ind=4
    			if(ind == 5){
    				//当图片已经到达最后一张  把图片容器的位置放到 第一张
    				imgContent.style.left = '0px';
    				ind = 1;
    			}
    			var n = ind;
    			move(imgContent, 'left', 30, -390*ind);
    			
    			if(ind == 4){
    				n = 0;
    			}
    			for(var j=0;j<spanArr.length;j++){
    				spanArr[j].className = '';
    			}
    			spanArr[n].className = 'spanActive';
    			
    		}
    		
    		
    		
    	</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，488人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS点击切换背景图

JS点击切换背景图有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2] [

古城微笑少年丶/ 2024年03月31日 15:36/ 0 赞/ 142 阅读

相关 js点击按钮切换图片

要通过JavaScript点击按钮来切换图片，你可以使用HTML和JavaScript来实现。以下是一个示例，演示了如何创建一个按钮，当点击按钮时，切换显示的图片： <!DO

浅浅的花香味﹌/ 2024年02月18日 11:47/ 0 赞/ 28 阅读

相关练习：js实现点击切换图片

点击切换图片，控制是否可以循环切换 <!DOCTYPE html> <html lang="en"> <head> <met

Dear 丶/ 2023年07月07日 11:05/ 0 赞/ 232 阅读

相关点击切换图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

﹏ヽ暗。殇╰゛Y/ 2023年06月12日 06:25/ 0 赞/ 33 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 356 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 420 阅读

相关图片左右点击切换轮播js特效

常用相册图片左右点击切换轮播，可应用在商品详情、汽车展示、相册展示等，jQuery左右按钮切换图片，点击小图缩略图可切换到对应的大图，当缩略图过多时可点击左右按钮控制底部缩略图

Love The Way You Lie/ 2022年03月28日 05:49/ 0 赞/ 351 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 489 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 485 阅读

相关 Js实现图片点击切换与轮播

Js实现图片点击切换与轮播图片点击切换 <!DOCTYPE html> <html> <head>

浅浅的花香味﹌/ 2021年10月23日 18:42/ 0 赞/ 500 阅读