Java教程

JavaWeb：（练习）七、JavaScript-图片切换练习

本文主要是介绍JavaWeb：（练习）七、JavaScript-图片切换练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaWeb：（练习）七、JavaScript-图片切换练习

  • JavaWeb：（练习）七、JavaScript-图片切换练习
    • 一、图片切换练习
      • 1、练习目标
      • 2、HTML代码
      • 3、CSS代码
      • 4、js代码
      • 5、网页结果

JavaWeb：（练习）七、JavaScript-图片切换练习

一、图片切换练习

1、练习目标

​ 完成图片切换功能,当鼠标移入到图片上时,在图片左右两侧各显示一个按钮,点击按钮对图片进行切换,到达第一张或最后一张时分别又回到最后一张或第一张,重复操作。每5秒自动切换，重复，循环自动轮播,即可自动切换,同时也可以点击按钮切换到指定图片)。

2、HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		
		<link href="Demo.css" rel="stylesheet" type="text/css" />
		
		<script src="Demo.js" type="text/javascript"></script>
		
	</head>
	<body>
		
		<div id="box_id" class="box" onm ouseover="onMouseOver()" onm ouseout="onMouseOut()">
			<input type="button" id="button_left_id" class="button_left" value="<" onclick="clickButtonLeft()" />
			<input type="button" id="button_right_id" class="button_right" value=">" onclick="clickButtonRight()" />
		</div>
		
	</body>
</html>

3、CSS代码

*{
	margin: 0;
	padding: 0;
}

.box{
	width: 520px;
	height: 280px;
	border-radius: 30px;
	background-image: url(../img/a.jpg);
	
	margin: auto;
	margin-top: 100px;
	padding: 0px;
}

img{
	border-radius: 30px;
	opacity: 1;
	
	float: left;
}

input{
	border: 0px white solid;
	width: 40px;
	height: 40px;
	color: grey;
	font-size: 25px;
	opacity: 0;
	
	float: left;
	margin-top: 125px;
}

.button_left{
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.button_right{
	margin-left: 440px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

4、js代码

var t;
t = setInterval("changePicture()",5000);
var i = 0;
var pictureArrays = ["url('../img/a.jpg')", "url('../img/b.jpg')", "url('../img/c.jpg')", "url('../img/d.jpg')", "url('../img/e.jpg')"];

function changePicture() {
	document.getElementById("box_id").style.backgroundImage = pictureArrays[i++];
	if (i>4) {
		i=0;
	}
}

function onm ouseOver() {
	clearInterval(t);
	document.getElementById("button_left_id").style.opacity = 0.5;
	document.getElementById("button_right_id").style.opacity = 0.5;
}

function onm ouseOut() {
	t = setInterval("changePicture()",5000);
	document.getElementById("button_left_id").style.opacity = 0;
	document.getElementById("button_right_id").style.opacity = 0;
}

function clickButtonLeft() {
	changePicture();
}

function clickButtonRight() {
	changePicture();
}

5、网页结果

在这里插入图片描述

这篇关于JavaWeb：（练习）七、JavaScript-图片切换练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航