JS实现图片自动播放

深藏阁楼爱情的钟 2021-12-23 06:41 309阅读 0赞

### 一、JS实现图片自动播放 ###

**1、先看效果图**

![20190625211035378.gif][]

**2、完整代码**

<!DOCTYPE html>
    <html>
    <head>
    	<style>
    		/* 定义样式 */
    		body{
    			margin: 5% 30%;
    		}
    		.bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px  #142732;}
    		.box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
            /* box的宽度为img的个数乘以bannerimage的宽度*/
    		.img-g{width:4900px;height:400px;position:relative;}
    		.img-g img{float:left;width:700px;height:400px;}
    		.button-g{position:relative;top:-35px;text-align:center;}
    		.button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
    	</style>
    
    	<script type="text/javascript" src="js/jquery.js"></script>
    
    	<script type="text/javascript">
    	$(function () {
    	    // 实现自动播放
    		var p=document.getElementsByClassName('img-g')[0];
    		var button=document.querySelectorAll('.button-g span')
    		// 设置3秒播放
    		window.timer=setInterval(move,3000);
    		// 轮播设置
    		function move(){
    		    // bannerimage的宽度乘以图片的个数
    			if(parseInt(p.style.left)>-4200){
    			    // 和bannerimage的宽度保持一致即可：700
    				p.style.left=parseInt(p.style.left)-700+'px'
    				p.style.transition='left 1s';
    				tog(-Math.round(parseInt(p.style.left)/700))
    				if(parseInt(p.style.left)<=-4200){
    					setTimeout(function(){
    						tog(0)
    						p.style.left='0px'
    						p.style.transition='left 0s';
    					},1000)
    				}
    			}else{
    				p.style.left='0px'
    				p.style.transition='left 0s';
    			}
    		}
    
    		// 设置小圆点
    		for(var i=0;i<button.length;i++){
    			// button[i].style.backgroundColor='#eee';
    			button[i].onclick=function(){
    				p.style.left=-700*this.getAttribute('data-index')+'px'
    				tog(this.getAttribute('data-index'))
    				clearInterval(window.timer)
    				window.timer=setInterval(move,3000);
    			}
    		}
    		// 设置小圆点
    		function tog(index){
    			if(index>5){
    				tog(0);
    				return;
    			}
    			for(var i=0;i<button.length;i++){
    				button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
    			}
    			button[index].style.backgroundColor='rgb(255, 255, 255)';
    		}
    
    		// 鼠标移上事件
    		p.onmouseover=function(){
    			clearInterval(window.timer)
    		}
            // 鼠标移除事件
    		p.onmouseout=function(){
    			window.timer=setInterval(move,3000);
    		}
    	});
    	</script>
    </head>
    <body>	
    	<div class="bannerimage">
    		<div class='box'>
    			<div class='img-g' style='left:0px;transition:left 1s;'>
    				<img src="images/img_1.jpg" alt="1">
    				<img src="/images/img_2.jpg" alt="2">
    				<img src="/images/img_3.jpg" alt="3">
    				<img src="/images/img_4.jpg" alt="4">
    				<img src="/images/img_5.jpg" alt="5">
    				<img src="/images/img_6.jpg" alt="6">
    				<img src="/images/img_1.jpg" alt="1">
    			</div>
    			<div class='button-g'>
    				<span data-index='0' style="background-color: #eeeeee"></span>
    				<span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    				<span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    				<span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    				<span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    				<span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

**3、关键代码讲解**

3.1、css设置注意事项：img-g的宽度为：img的个数乘以bannerimage的宽度，如下：

.img-g{width:4900px;height:400px;position:relative;}

3.2、轮播常量及事件设置

常量1设置为：bannerimage的宽度乘以图片的个数，如下：

if(parseInt(p.style.left)>-4200){}

常量2设置为：bannerimage的宽度保持一致即可（700），如下：

p.style.left=parseInt(p.style.left)-700+'px'

小圆点显示设置：

// 设置小圆点
    for(var i=0;i<button.length;i++){
    	button[i].style.backgroundColor='#eee';
    	button[i].onclick=function(){
    	    p.style.left=-700*this.getAttribute('data-index')+'px'
    	    tog(this.getAttribute('data-index'))
    	    clearInterval(window.timer)
    	    window.timer=setInterval(move,3000);
    	}
    }
    // 设置小圆点点击事件
    function tog(index){
        // 圆点的个数
    	if(index>5){
    		tog(0);
    		return;
    	}
    	for(var i=0;i<button.length;i++){
            // 默认圆点的显示颜色
    		button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
    	}
        // 当前圆点的显示颜色
    	button[index].style.backgroundColor='rgb(255, 255, 255)';
    }

鼠标事件：鼠标移上停止播放，移除3秒后播放。

// 鼠标移上事件
    p.onmouseover=function(){
    	clearInterval(window.timer)
    }
    // 鼠标移除事件
    p.onmouseout=function(){
    	window.timer=setInterval(move,3000);
    }

### **欢迎关注** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70][]

[20190625211035378.gif]: /images/20211223/7aea5a9a70bf4ac99681f21e81f69a63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70]: /images/20211223/6712e1750de446738ae64ffda27b9ddc.png