改变图片src
btn.onclick = function(){
div.innerHTML=' <img src="images/'+txt.value+'.jpg" alt="" id="pic">'
}
点击切换图片
<img src="./image/1.jpg" alt="" id="im"><br>
<button id="btn01" value="">上一张</button>
<button id="btn02" value="">下一张</button>
<script>
var im = document.getElementById('im')
var btn01 = document.getElementById('btn01')
var btn02 = document.getElementById('btn02')
var i = 1
btn02.onclick=function() {
i++
if(i>3) {
i=3
}
console.log(i)
console.log(typeof im)
im.src='./image/'+i+'.jpg'
}
btn01.onclick=function() {
i--
if(i<1) {
i=1
}
console.log(i)
console.log(typeof im)
im.src='./image/'+i+'.jpg'
}
</script>
灯开关
<img src="./image/off.png" alt="" id="pic">
<button id="btn">开关</button>
<script>
var pic = document.getElementById('pic')
var btn = document.getElementById('btn')
var flag = false
btn.onclick= function() {
if(flag) {
pic.src='./image/off.png'
flag = false
console.log(pic.src)
console.log(flag)
}else {
pic.src='./image/on.png'
flag = true
console.log(pic.src)
console.log(flag)
}
}
</script>
滑过切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;margin: 0;
}
div {
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
img{
width: 300px;
height: 200px;
}
p {
position: absolute;
bottom: 10px;
}
p span {
display: inline-block;
border: 5px solid #fff;
border-radius: 50%
}
p .red {
color: red;
}
</style>
</head>
<body>
<div>
<img src="./image/1.jpg" alt="">
<img src="./image/2.jpg" alt="">
<img src="./image/3.jpg" alt="">
<img src="./image/4.jpg" alt="">
<p>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
<script>
var pic = document.querySelectorAll('img')
console.log(pic)
var spans = document.getElementsByTagName('span')
console.log(spans)
for(i=0;i<spans.length;i++){
spans[i].index = i
spans[i].onmouseover=function() {
for(i=0;i<spans.length;i++){
spans[i].className=''
pic[i].style.display = 'none'
}
this.className='red'
pic[this.index].style.display = 'block'
}
}
</script>
</body>
</html>
图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ margin: 0; padding: 0;}
img{ display:block;}
.box{ width: 700px; height: 525px; margin: 10px auto; border: 1px solid #000; position: relative;}
.list{ position: absolute; left: 0; top:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
.list span{ color: #fff; font-size: 20px;}
.nav{ position: absolute; left: 0; bottom: 40px; text-align: center; width: 100%;}
.nav span{ cursor: pointer; display: inline-block; width: 0; height: 0; border: 6px solid #eee; border-radius:50%; margin-right:5px; }
.nav .active{ border: 6px solid #f60;}
.content{ position: absolute; left: 0; bottom:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
button{ width: 30px; height: 50px; position: absolute; top: 50%; margin-top: -25px; cursor: pointer;}
.prev{ left: 0;}
.next{ right: 0;}
</style>
</head>
<body>
<div class="box">
<p class="list"><span>1</span>/<span>4</span></p>
<img src="images/1.jpg" alt="">
<p class="nav">
<!-- <span class="active"></span>
<span></span> -->
</p>
<p class="content">美女1</p>
<button class="prev"><</button>
<button class="next">></button>
</div>
<script>
var box = document.querySelector('.box');
var lists = document.querySelectorAll('.list span');
// console.log(lists)
var imgs = document.querySelectorAll('.box img')[0];
var nav = document.querySelector('.nav');
var content = document.querySelector('.content');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var piclist = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]
var contlist = ['美女1','美女2','美女3','美女4']
var len = piclist.length;
var str = '';
for(i=0;i<len;i++){
str +='<span></span>'
}
nav.innerHTML = str;
lists[1].innerHTML = len
var spans = document.querySelectorAll('.nav span');
spans[0].className = 'active';
for(i=0;i<len;i++){
spans[i].index = i
spans[i].onmouseover=function(){
for(i=0;i<len;i++){
spans[i].className=''
}
num = this.index
this.className = 'active';
imgs.src = piclist[this.index];
content.innerHTML = contlist[this.index];
lists[0].innerHTML = this.index+1
}
}
// 下一个按钮 和 划过的索引值 对应 num = this.index
var num = 0;
next.onclick = function(){
num++;
if(num>3){
num=0;
}
imgs.src = piclist[num];
content.innerHTML = contlist[num];
lists[0].innerHTML = num+1;
for(i=0;i<len;i++){
spans[i].className = '';
}
spans[num].className = 'active';
}
prev.onclick = function(){
num--;
if(num<0){
num=3;
}
imgs.src = piclist[num];
content.innerHTML = contlist[num];
lists[0].innerHTML = num+1;
for(i=0;i<len;i++){
spans[i].className = '';
}
spans[num].className = 'active';
}
</script>
</body>
</html>
点击全选选中全部,选中全部自动勾选全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="checkbox" class="all">全选
<hr>
<div id="box">
<input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox">
</div>
<script>
var all = document.querySelector('.all')
var inp = document.getElementById('box').getElementsByTagName('input')
all.onclick = function(){
if(all.checked==true){
for(var i=0;i<inp.length;i++){
inp[i].checked = all.checked
}
}else{
for(var i=0;i<inp.length;i++){
inp[i].checked = all.checked
}
}
}
for(var i=0;i<inp.length;i++){
inp[i].onclick = function(){
var x = 0
for(var i=0;i<inp.length;i++){
if(inp[i].checked == true){
x++
console.log(x)
}
}
if(x==inp.length){
all.checked = true
}else{
all.checked = false
}
}
}
// if(this.checked == true){
// x++
// console.log(x)
// if(x==inp.length){
// all.checked = true;
// }
// }else{
// x--
// if(x!=inp.length){
// all.checked = false;
// }
// }
</script>
</body>
</html>