js点击切换图片

港控/mmm° 2022-01-14 09:41 452阅读 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 条评论，452人围观）

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

相关阅读

相关 JS点击切换翻页

1.效果如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib...

我就是我/ 2024年04月20日 09:17/ 0 赞/ 94 阅读

相关 JS点击切换背景图

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

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

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

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

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

相关 jQuery点击图片来回切换功能

在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。下面是一个小的demo示例： <!DOC

迷南。/ 2022年09月04日 02:44/ 0 赞/ 357 阅读

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

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

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

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

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

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

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

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

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

相关 js点击切换图片

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

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

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

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

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

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

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

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