(4)js单击按钮随机更换图片

合集下载

使用jQuery做左右点击切换图片的手动图片轮播效果

使⽤jQuery做左右点击切换图⽚的⼿动图⽚轮播效果代码和个⼈解析：<!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>img {width: 300px;height: 300px;} /* 这⾥设置样式只是为了使图⽚在点击时不会出现图⽚⼤⼩不⼀的情况,img可以统⼀设置页⾯中所有的图⽚⼤⼩ */</style></head><body><img src="./img/1.jpg" /> <button>上⼀张</button><button>下⼀张</button><script src="./js/jquery-3.4.1.js"></script> // 引⼊jQuery⽂件<script>$(function() {var t = 1; //定义⼀个变量⽤来进⾏判断//上⼀张的按钮实现$("button").eq(0).click(function() { //这⾥的eq()是相当于是索引，从0开始计数，就是获取第⼀个button按钮t += 1; //我这⾥是简写了，展开就是 t=t+1 ,当点击第⼆次的时候，就+1，把图⽚变成第⼆张，再点击，就再+1 if (t > 4) { //这⾥的if判断，也可以说是充当⼀个for循环,我只有4张图⽚，当我点击到最后⼀张时，就是说图⽚已经到我没有的第五张图时， //就把t的值改为 1 就到了我的第⼀张图⽚，类似于⼀个for循环t = 1}$("img").attr("src", "img/" + t + ".jpg") //这⾥是⼀个类似字符串的拼接，t 是⼀个动态的数据})//下⼀张的按钮实现$("button").eq(1).click(function() {t -= 1; //展开 t=t-1if (t < 1) {t = 4}$("img").attr("src", "img/" + t + ".jpg")})//下⼀张按钮的实现与上⼀张的思路和逻辑是⼀样，判断就是把上⼀张按钮的条件反过来//值得注意的是eq()的索引值的起始值，还有把判断条件理清楚，然后就是图⽚的命名})</script></body></html>。

js实现轮播图效果纯js实现图片自动切换

js实现轮播图效果纯js实现图⽚⾃动切换本⽂实例为⼤家分享了纯js实现图⽚⾃动切换的具体代码，供⼤家参考，具体内容如下1.⿏标经过的时候左右两个⼩按钮会⾃动弹出，⾃动播放停⽌，点击左右⼩按钮可以切换图⽚；2. ⿏标离开，恢复⾃动播放；3. 点击下⽅中间⼏个⼩圆圈，也会⾃动切换图⽚；源代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><style>* {margin: 0;padding: 0;}/* 轮播图盒⼦样式 */.lunbotu {position: relative;width: 520px;height: 280px;margin: 50px auto;background-color: blue;overflow: hidden;}/* 左右按钮样式 */.left,.right {display: none;position: absolute;top: 50%;margin-top: -15px;width: 30px;height: 30px;background-color: cornsilk;border-radius: 15px;text-align: center;line-height: 30px;cursor: pointer;z-index: 1;}.left {left: 0;}.right {right: 0;}li {list-style: none;}/* 设置图⽚的ul的样式 */.firstul {position: absolute;top: 0;left: 0;width: 500%;}.firstul li {float: left;/* display: none; */}/* 设置⼩圆圈的样式 */ol {/* width: 90px; */padding: 0 5px 0 5px;position: absolute;bottom: 10px;left: 50%;margin-left: -45px;background-color: darkgrey;text-align: center;border-radius: 9px;}ol li {display: inline-block;width: 15px;height: 15px;border-radius: 50%;margin-right: 5px;background-color: white;cursor: pointer;}.current {background-color: red;}</style><script src="animation.js"></script></head><body><div class="lunbotu"><div class="left">></div><div class="right"><</div><ul class="firstul"><li><a href=""><img src=" images/1.jpg" alt=""> </a></li><li><a href=""><img src=" images/2.jpg" alt=""> </a></li><li><a href=""><img src=" images/3.gif" alt=""> </a></li><li><a href=""><img src=" images/4.webp" alt=""> </a></li> </ul><ol class="firstol"></ol></div><script>// 1.获取事件源var lunbotu = document.querySelector('.lunbotu');var leftBox = document.querySelector('.left');var rightBox = document.querySelector('.right');var ul = lunbotu.querySelector('ul');var ol = lunbotu.querySelector('ol');var right = document.querySelector('.right');var left = document.querySelector('.left');var lunbotuWidth = lunbotu.offsetWidth;// console.log(ul)// console.log(ol)// 第⼀步：// ⿏标经过轮播图的时候，左右⼩按钮弹出lunbotu.addEventListener('mouseenter', function () {leftBox.style.display = 'block';rightBox.style.display = 'block';// ⿏标经过轮播图的时候，停⽌定时器clearInterval(timer);})// ⿏标离开轮播图的时候，左右⼩按钮隐藏lunbotu.addEventListener('mouseleave', function () {leftBox.style.display = 'none';rightBox.style.display = 'none';timer = setInterval(function () {right.click();}, 2000)})// 第⼆步：// 1.动态⽣成⼩圆圈// 2.⼩圆圈的个数要跟图⽚⼀样// 3.先得到ul⾥⾯图⽚的张数(图⽚放⼊li⾥⾯，所以就是li的个数) // 4.利⽤循环动态⽣成⼩圆圈(这个⼩圆圈要放⼊ol⾥⾯)// 5.创建节点createElement('li')]// 6.插⼊节点ol.appendChild(li)// 7.第⼀个⼩圆圈需要添加current类for (var i = 0; i < ul.children.length; i++) {// 创建⼀个livar li = document.createElement('li')// 记录当前⼩圆圈的索引号通过⾃定义属性来做li.setAttribute('index', i);// 把li添加到olol.appendChild(li);}// 排他思想：让⼩Li变⽩⾊for (var i = 0; i < ol.children.length; i++) {ol.children[i].addEventListener('click', function () {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';} this.className = 'current';// 点击⼩圆圈的时候切换到对应的图⽚// 得到索引号 indexvar index = this.getAttribute('index');// 解决⼩bugnum = index;num_ol = index;// console.log(lunbotuWidth);// console.log(index)animation(ul, - index * lunbotuWidth)})}// 给第⼀个li变颜⾊ol.children[0].className = 'current';// 克隆第⼀个livar first = ul.children[0].cloneNode(true);ul.appendChild(first);// 第三步:// 点击右边按钮事件var num = 0;// 点击右侧按钮的时候⼩圆圈跟着滚动var num_ol = 0;// 节流阀，防⽌点击过快，最后才加这句优化var flag = true;// 右侧按钮：right.addEventListener('click', function () {if (flag) {flag = false; // 关闭节流阀if (num == ul.children.length - 1) {ul.style.left = 0;num = 0;}num++;animation(ul, -num * lunbotuWidth, function () {flag = true;});num_ol++;if (num_ol == ol.children.length) {num_ol = 0}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[num_ol].className = 'current';}});// 左侧按钮：left.addEventListener('click', function () {if (flag) {flag = false;if (num == 0) {ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';num = ul.children.length - 1;}num--;animation(ul, -num * lunbotuWidth, function () {flag = true;});num_ol--;// num_ol=0的时候需要，点击左侧按钮，需要转跳到ol.children.length-1的位置 if (num_ol < 0) {num_ol = ol.children.length - 1}for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = '';}ol.children[num_ol].className = 'current';}});// ⾃动播放图⽚var timer = setInterval(function () {right.click();}, 2000)</script></body></html>5.Js⽂件的代码// 封装了⼀个动画js⽂件function animation(obj,target,fn1){// console.log(fn1);// fn是⼀个回调函数，在定时器结束的时候添加// 每次开定时器之前先清除掉定时器clearInterval( obj.timer);obj.timer = setInterval(function(){// 步长计算公式越来越⼩// 步长取整var step = (target - obj.offsetLeft) /10;step = step > 0 ? Math.ceil(step) :Math.floor(step);if(obj.offsetLeft == target){clearInterval( obj.timer);// 如果fn1存在，调⽤fnif(fn1){fn1();}}else{// 每50毫秒就将新的值给obj.leftobj.style.left = obj.offsetLeft +step +'px';}},30)}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript实现图片切换效果

JavaScript实现图⽚切换效果本⽂实例为⼤家分享了JavaScript实现图⽚切换效果，⾃定义属性的应⽤供⼤家参考，具体内容如下<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图⽚切换实例</title><style>body{background-color: #A9A9A9;margin:0px;}ul{padding: 0;margin: 0;}li{list-style: none;}#pic{width:670px;height: 420px;position:relative;margin: 0 auto;/*整个div放到页⾯中间的位置*/background:url(img/loading.png) no-repeat center;background-color:#fff;}#pic img{width:670px;height: 420px;}#pic ul{position: absolute;top: 0px;right: -50px;}#pic li{width:40px;height:40px;margin-bottom: 4px;background:#666;}#pic .active{background: cadetblue;}#pic span{top:0px;}#pic p{bottom:0px;margin:0;}#pic p,#pic span{width: 670px;height: 30px;line-height: 30px;text-align: center;position:absolute;left:0px;color:#fff;background-color:#333;}</style><script>window.onload = function(){var oDiv = document.getElementById("pic");var oImg = document.getElementsByTagName("img")[0];//有tag标签的地⽅就得有数组[0],否则不提⽰错误，但却会加载不出来需要的内容。

javascript实现点击按钮切换图片

javascript实现点击按钮切换图⽚本⽂实例为⼤家分享了javascript实现点击按钮切换图⽚的具体代码，供⼤家参考，具体内容如下效果图：⾸先搭建基本的结构<div id="div"><p id="desc"></p><img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;"><button id="pre">上⼀张</button><button id="next">下⼀张</button></div>其次设置显⽰的样式<style>* {margin: 0;padding: 0;}#div {width: 800px;height: 420px;margin: 20px auto;background-color: rgb(243, 119, 36);text-align: center;}button:hover {cursor: pointer;}</style>最重要的JavaScript部分<script>//预加载,等页⾯加载完毕后，再执⾏脚本window.onload = function () {var num = document.getElementsByTagName("img")[0];//这⾥虽然只有⼀个img标签，但是num变量的结果依然是⼀个数组//定义图像地址var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"]; //获取按钮var prev = document.getElementById("pre");var next = document.getElementById("next");var index = 0;//图⽚描述var p_desc = document.getElementById("desc");p_desc.innerHTML = "⼀共" + shuzu.length + "张图⽚" + ",当前是第" + (index + 1) + "张";//注意此处前⾯是字符串的拼接，实现加法需要⽤到括号//点击切换图⽚prev.onclick = function () {index--;//此处让它循环if (index < 0)index = shuzu.length - 1;num.src = shuzu[index];p_desc.innerHTML = "⼀共" + shuzu.length + "张图⽚" + ",当前是第" + (index + 1) + "张";//注意此处前⾯是字符串的拼接，实现加法需要⽤到括号}next.onclick = function () {index++;if (index > shuzu.length - 1)index = 0;num.src = shuzu[index];p_desc.innerHTML = "⼀共" + shuzu.length + "张图⽚" + ",当前是第" + (index + 1) + "张";//注意此处前⾯是字符串的拼接，实现加法需要⽤到括号}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

js⿏标点击按钮切换图⽚-图⽚⾃动切换-点击左右按钮切换特效代码今天来分享⼀下⿏标点击按钮，图⽚进⾏切换+图⽚⾃动切换+点击左右按钮图⽚进⾏切换的三种效果的组合代码。

最后的效果如下：Html代码部分：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>图⽚轮播效果制作_赵⼀鸣随笔博客</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/style.js"></script></head><body><div class="banner"><ul class="pic"><li><a href="#"><img src="images/1.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/2.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/3.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/4.jpg" alt="美⼥" width="350" height="495"></a></li><li><a href="#"><img src="images/5.jpg" alt="美⼥" width="350" height="495"></a></li></ul><ul class="anniu"><li class="on"></li><li></li><li></li><li></li><li></li></ul><ul class="lr"><li class="pre"><a href="#"> < </a></li><li class="next"><a href="#"> > </a></li></ul></div></body></html>Css代码部分：*{margin:0px;padding:0px}li{list-style:none}a{text-decoration:none}img{border:0px}.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}.banner .pic{width:9999px;height:495px}.banner .pic li{width:350px;height:495px;float:left}.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline;cursor:pointer;border-radius:100%}.banner .anniu li.on{background:red}.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}.banner .lr a{color:white}.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer} .banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer} Javascript代码部分：$(function(){//⿏标滑过banner，左右按钮进⾏显⽰和隐藏$(".banner").hover(function(){$(".lr").show();},function(){$(".lr").hide();});//点击下⾯的⼩按钮，图⽚进⾏左右切换效果$(".anniu li").click(function(){$(this).addClass("on").siblings().removeClass("on");var num=$(this).index();$(".pic").animate({marginLeft:-350*num},"slow");});//图⽚⾃动轮播效果var a=0;var automatic=setInterval(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");},6000);//点击左右按钮，图⽚进⾏切换效果$(".pre").click(function(){a--;a=(a+5)%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});$(".next").click(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});});。

JS更换图片的用法

有些网页上的按钮,往往有两张不同的图片进行轮换,鼠标不动时,显示图片,鼠标移动到图片时候,显示另外一张图片.所以,就要使用下面几个javascript函数.<SCRIPT language=JavaScript type=text/JavaScript></SCRIPT>调用例子:<BODY bgColor=#333333 leftMargin=0 topMargin=0onload="MM_preloadImages('images/over_1.gif',''images/over_2.gif',''images/over_3.gif',''images /over_4.gif')"MARGINHEIGHT="0" MARGINWIDTH="0"><TR><TD><A onmouseover=MM_swapImage('Image111','','images/over_2.gif',1) onmouseout=MM_swapImgRestore() href="javascript:;"><IMGid=Image1 height=207 src="images/2.gif"width=16 border=0 name=Image111></A></TD></TR>。

原生js点击按钮切换图片

原⽣js点击按钮切换图⽚<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>动态切换图⽚</title></head><style>ul{padding:0;margin:0;}li{list-style: none;}#pic{position: relative;width: 400px;height: 400px;background-color:red;margin:100px auto;background:url('image/1.jpg') no-repeat center;}#pic img{width: 400px;height: 400px;}#pic ul{width: 50px;position: absolute;top: 0;right: -70px;}li{width: 40px;height: 40px;margin-bottom:10px;background-color: pink;float: left;}#pic span{position: absolute;bottom: 10px;left: 0;}#pic p,#pic span{width: 400px;height: 20px;}#pic p{position: absolute;top: 10px;left: 0;}.active{background-color: red;}</style><body><div id="pic"><img src="" alt=""><p>qwrwe</p><span>werwer</span><ul></ul></div><script>window.onload=function(){//存放旧livar oldLi=null;var num=0;var oPic = document.getElementById('pic');var oImg = oPic.getElementsByTagName('img')[0];var oUL = oPic.getElementsByTagName('ul')[0];var oSpan= oPic.getElementsByTagName('span')[0];var oP = oPic.getElementsByTagName('p')[0];var oLi= oUL.getElementsByTagName('li');var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg']; var aText = ['图⽚1','图⽚2','图⽚3','图⽚4'];for(var i=0;i<arr.length;i++){//动态添加元素oUL.innerHTML+='<li></li>';}// 旧li就等于当前的oldLi=oLi[num];// 初始化oImg.src=arr[num];oP.innerHTML=num+1+'/'+arr.length;oSpan.innerHTML=aText[num];oLi[num].className='active';for(var i=0;i<arr.length;i++){// 给元素⾃定义属性//oLi[i].index=i;oLi[i].onclick=function(){// 当元素被点击时图⽚⽂字信息都⼀起变化oImg.src=arr[this.index];oP.innerHTML=1+this.index+'/'+arr.length;oSpan.innerHTML=aText[this.index];// 清空上⼀个当前添加oldLi.className='';//将上⼀个给当前oldLi=this;this.className='active';}}}</script></body></html>实现效果。

js鼠标点击图片切换效果代码分享

js⿏标点击图⽚切换效果代码分享本⽂实例讲述了js⿏标点击图⽚切换效果。

分享给⼤家供⼤家参考。

具体如下：实现原理很简单，其实是多张图⽚叠加起来，点击图⽚后依次赋予图⽚⼀个class，使其看起来在表⾯⽽已，点击图⽚，可以实现图⽚的不断切换效果。

运⾏效果图：--------------------------------------⼩提⽰：浏览器中如果不能正常运⾏，可以尝试切换浏览模式。

为⼤家分享的js⿏标点击图⽚切换效果代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js⿏标点击图⽚切换效果</title><style type="text/css">*{margin:0;padding:0;border:none;outline:none;list-style:none;}#wrapper {width:280px;margin:20px auto;}#imageContainer {width:280px;height:280px;position:relative;overflow:hidden;cursor:pointer;}#imageContainer img {position:absolute;top:0;left:0;z-index:1;}#imageContainer img.active {z-index:3;}</style></head><body><div id="wrapper"><div id="imageContainer"><img src="images/01.jpg" class="active" width="280" height="280" /><img src="images/02.jpg" width="280" height="280" /><img src="images/03.jpg" width="280" height="280" /></div></div><script src="js/jquery.min.js"></script><script>var imageObject = {clickSwap : function(obj) {obj.click(function() {var activeImage = $(this).children('img.active');activeImage.removeClass('active');if (activeImage.next().length > 0) {activeImage.next().addClass('active');} else {$(this).children('img:first-child').addClass('active');}return false;});}};$(function() {imageObject.clickSwap($('#imageContainer'));});</script></body></html>以上就是为⼤家分享的js⿏标点击图⽚切换效果代码，希望⼤家可以喜欢。

js实现点击不同按钮切换内容

js实现点击不同按钮切换内容<!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>.btn{margin: 20px 120px;width: 80px;}.content{margin: 10px auto;display: none;}.btn.active{background-color: pink;}.content.show{display:block;}</style></head><body><p class="btn1"><button class="btn active">页⾯⼀</button><button class="btn">页⾯⼆</button><button class="btn">页⾯三</button></p><div class="content show"><p>页⾯⼀要显⽰的内容</p><input type="text" placeholder="页⾯⼀内容"/></div><div class="content"><p>页⾯⼆要显⽰的内容</p><input type="text" placeholder="页⾯⼆内容" /></div><div class="content" ><p>页⾯三要显⽰的内容</p><input type="text" placeholder="页⾯三内容"/></div><script> //获取页⾯的每个按钮var btns = document.getElementsByClassName("btn") //获取内容盒⼦var contents = document.getElementsByClassName("content") //遍历每个按钮为其添加点击事件for(var i=0;i<btns.length;i++){btns[i].index = i;btns[i].onclick = function(){ //对当前点击的按钮赋予active类名及显⽰当前按钮对应的内容for(var j=0;j<btns.length;j++){btns[j].className = btns[j].className.replace(' active', '').trim();contents[j].className = contents[j].className.replace(' show', '').trim();}this.className = this.className + ' active';contents[this.index].className = contents[this.index].className + ' show';};}</script></body></html>。

javascript实现点击按钮切换轮播图功能

javascript实现点击按钮切换轮播图功能本⽂实例为⼤家分享了js实现点击按钮切换轮播图的具体代码，供⼤家参考，具体内容如下菜单区域实现划过主菜单显⽰⼦菜单轮播区域实现1、点击图⽚中左右箭头，分别跳转上⼀张与下⼀张（1）点击上⼀张图其实就是让⼀个变量进⾏递减，点击下⼀张图就是让变量递增；（控制索引最⼤最⼩值）2、点击右下⾓⼩圆也可以进⾏图⽚的跳转（1）通过索引让变量进⾏随意的修改3、每间隔3s进⾏轮播图的⾃动切换，⿏标放在图⽚上清除⾃动切换（1）定时器4、⿏标放在主菜单上显⽰⼦菜单，离开⼦菜单消失。

放在⼦菜单上显⽰⼦菜单，离开消失。

源代码：html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/script.js"></script></head><body><div class="main" id="main"><div class="menu-box"></div><div class="menu-content" id="menu-content"><div class="menu-item"><a href=""><span>⼿机、配件</span><i class="icon"></i></a></div><div class="menu-item"><a href=""><span>电脑</span><i class="icon"></i></a></div><div class="menu-item"><a href=""><span>家⽤电器</span><i class="icon"></i></a></div><div class="menu-item"><a href=""><span>家具</span><i class="icon"></i></a></div></div><div class="sub-menu hide" id="sub-menu"><div class="inner-box"><div class="sub-inner-box"><div class="title">⼿机、配件</div><div class="sub-row"><span class="bold mr10">⼿机通讯：</span><a href="">⼿机</a><span class="ml10 mr10">/</span><a href="">⼿机维修</a><span class="ml10 mr10">/</span><a href="">以旧换新</a></div><div class="sub-row"><span class="bold mr10">⼿机配件：</span><a href="">⼿机壳</a><span class="ml10 mr10">/</span><a href="">⼿机储蓄卡</a><span class="ml10 mr10">/</span><a href="">数据线</a><span class="ml10 mr10">/</span><a href="">充电器</a><span class="ml10 mr10">/</span><a href="">电池</a></div><div class="sub-row"><span class="bold mr10">运营商：</span> <a href="">中国联通</a><span class="ml10 mr10">/</span><a href="">中国移动</a><span class="ml10 mr10">/</span><a href="">中国电信</a></div><div class="sub-row"><span class="bold mr10">智能设备：</span> <a href="">智能⼿环</a><span class="ml10 mr10">/</span><a href="">智能家居</a><span class="ml10 mr10">/</span><a href="">智能⼿表</a><span class="ml10 mr10">/</span><a href="">其他配件</a></div><div class="sub-row"><span class="bold mr10">娱乐：</span><a href="">⽿机</a><span class="ml10 mr10">/</span><a href="">⾳响</a><span class="ml10 mr10">/</span><a href="">收⾳机</a><span class="ml10 mr10">/</span><a href="">麦克风</a></div></div></div><div class="inner-box"><div class="sub-inner-box"><div class="title">电脑</div><div class="sub-row"><span class="bold mr10">电脑：</span><a href="">笔记本</a><span class="ml10 mr10">/</span><a href="">平板</a><span class="ml10 mr10">/</span><a href="">⼀体机</a></div><div class="sub-row"><span class="bold mr10">电脑配件：</span> <a href="">显⽰器</a><span class="ml10 mr10">/</span><a href="">CPU</a><span class="ml10 mr10">/</span><a href="">主板</a><span class="ml10 mr10">/</span><a href="">硬盘</a><span class="ml10 mr10">/</span><a href="">电源</a><span class="ml10 mr10">/</span><a href="">显卡</a><span class="ml10 mr10">/</span><a href="">其他配件</a></div><div class="sub-row"><span class="bold mr10">游戏设备：</span> <a href="">游戏机</a><span class="ml10 mr10">/</span><a href="">⽿机</a><span class="ml10 mr10">/</span><a href="">游戏软件</a></div><div class="sub-row"><span class="bold mr10">⽹络产品：</span> <a href="">路由器</a><span class="ml10 mr10">/</span><a href="">⽹络机顶盒</a><span class="ml10 mr10">/</span><a href="">交换机</a><span class="ml10 mr10">/</span><a href="">存储卡</a><span class="ml10 mr10">/</span><a href="">⽹卡</a></div><div class="sub-row"><span class="bold mr10">外部产品：</span> <a href="">⿏标</a><span class="ml10 mr10">/</span><a href="">键盘</a><span class="ml10 mr10">/</span><a href="">U盘</a><span class="ml10 mr10">/</span><a href="">移动硬盘</a><span class="ml10 mr10">/</span><a href="">⿏标垫</a><span class="ml10 mr10">/</span><a href="">电脑清洁</a></div></div></div><div class="inner-box"><div class="sub-inner-box"><div class="title">家⽤电器</div><div class="sub-row"><span class="bold mr10">电视：</span><a href="">国产品牌</a><span class="ml10 mr10">/</span><a href="">韩国品牌</a><span class="ml10 mr10">/</span><a href="">欧美品牌</a></div><div class="sub-row"><span class="bold mr10">空调：</span><a href="">显⽰器</a><span class="ml10 mr10">/</span><a href="">柜式</a><span class="ml10 mr10">/</span><a href="">中央</a><span class="ml10 mr10">/</span><a href="">壁挂式</a></div><div class="sub-row"><span class="bold mr10">冰箱：</span><a href="">多门</a><span class="ml10 mr10">/</span><a href="">对开门</a><span class="ml10 mr10">/</span><a href="">三门</a><span class="ml10 mr10">/</span><a href="">双门</a></div><div class="sub-row"><span class="bold mr10">洗⾐机：</span> <a href="">滚筒式洗⾐机</a><span class="ml10 mr10">/</span><a href="">迷你洗⾐机</a><span class="ml10 mr10">/</span><a href="">洗烘⼀体机</a></div><div class="sub-row"><span class="bold mr10">厨房电器：</span> <a href="">抽烟机</a><span class="ml10 mr10">/</span><a href="">洗碗机</a><span class="ml10 mr10">/</span><a href="">燃⽓灶</a></div></div></div><div class="inner-box"><div class="sub-inner-box"><div class="title">家具</div><div class="sub-row"><span class="bold mr10">家纺：</span><a href="">被⼦</a><span class="ml10 mr10">/</span><a href="">枕头</a><span class="ml10 mr10">/</span><a href="">四件套</a><span class="ml10 mr10">/</span><a href="">床垫</a></div><div class="sub-row"><span class="bold mr10">灯具：</span><a href="">台灯</a><span class="ml10 mr10">/</span><a href="">顶灯</a><span class="ml10 mr10">/</span><a href="">节能灯</a><span class="ml10 mr10">/</span><a href="">应急灯</a></div><div class="sub-row"><span class="bold mr10">厨具：</span><a href="">烹饪锅具</a><span class="ml10 mr10">/</span><a href="">餐具</a><span class="ml10 mr10">/</span><a href="">菜板⼑具</a></div><div class="sub-row"><span class="bold mr10">家装：</span><a href="">地毯</a><span class="ml10 mr10">/</span><a href="">沙发垫套</a><span class="ml10 mr10">/</span><a href="">装饰字画</a><span class="ml10 mr10">/</span><a href="">照⽚墙</a><span class="ml10 mr10">/</span><a href="">窗帘</a></div><div class="sub-row"><span class="bold mr10">⽣活⽇⽤：</span> <a href="">收纳⽤品</a><span class="ml10 mr10">/</span><a href="">浴室⽤品</a><span class="ml10 mr10">/</span><a href="">⾬伞⾬⾐</a></div></div></div></div><div class="banner" id="banner"><section class="cease" id="cease"></section><a href=""><div class="banner-slide slide1"></div></a><a href=""><div class="banner-slide slide2"></div></a><a href=""><div class="banner-slide slide3"></div></a></div><a href="javascript:void(0)" class="button prev" id="prev"></a><a href="javascript:void(0)" class="button next" id="next"></a><div class="dots" id="dots"><span class="active"></span><span></span><span></span></div></div></body></html>css*{margin: 0;padding: 0;}/*通配符选择器，外边距，内边距为0*/body{font-family: "微软雅⿊";color: #14191e;}/*字体，字体颜⾊*/@font-face{font-family: 'iconfont';/*⾃定义名称，要有意义，不准数字*/src: url('../font/iconfont.eot');/*兼容ie9以上版本*/src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/*兼容ie6-8版本*/ url('../font/iconfont.ttf') format('truetype'),/*主要针对⼿机端浏览器 safari android ios*/ url('../font/iconfont.woff') format('woff'),/*兼容所有浏览器 */url('../font/iconfont.svg#iconfont') format('svg');/*针对ios端开发 legacy ios*//* font-weight: bold;<字体加粗>font-style: normal;默认的正常显⽰*/}/*获取下载的字体*/a{text-decoration: none;}/*没有下划线*/a:link,a:visited{color: #5e5e5e;}/*联合选择器，未访问连接时与已经访问链接时的字体颜⾊*/.main{width: 1200px;height: 460px;margin: 30px auto;overflow: hidden;position: relative;}/*最⼤框架：宽；⾼；外边距，上下30px，左右居中；溢出的部分隐藏；相对定位*/ .banner{width: 1200px;height: 460px;overflow: hidden;cursor: pointer;}/*焦点图：宽；⾼；溢出的部分隐藏；⼩⼿标志*/.banner-slide{width: 1200px;height: 460px;float: right;background-repeat: no-repeat;display: none;}/*三个图⽚：宽；⾼；右浮动，背景不重复;全部隐藏*/.slide1{background-image: url(../img/bg1.jpg);display: block;}/*第⼀个图⽚;块级元素显⽰*/.slide2{background-image: url(../img/bg2.jpg);}/*第⼆个图⽚*/.slide3{background-image: url(../img/bg3.jpg);}/*第三个图⽚*/.button{position: absolute;width: 40px;height: 80px;right: 0;background: url(../img/arrow.png) center center no-repeat;top: 50%;margin-top: -40px;}/*左右两个按钮；宽；⾼；相对main绝对定位，距右0，距上50%；背景图⽚，⽔平垂直居中，不重复；外上边距-40px；*/.button:hover{background-color: #333;opacity: 0.8;filter: alpha(opacity=80);}/*⿏标悬浮在上⾯时状态：背景颜⾊，透明度。

javascript实现点击图片切换

javascript实现点击图⽚切换点击实现图⽚切换效果在⽣活中⾮常的常见，恰巧今天的练习也是做⼀个图⽚的切换效果。

供⼤家参考：HTML代码如下：<div class="img"><img src="images/1.jpg" id="myImg" class="myImg" alt="这⾥是1.jpg"><p><input type="button" id="pre" class="btn" value="上⼀张"><input type="button" id="next" class="btn" value="下⼀张"></p></div>CSS代码如下：*{margin: 0;padding: 0;}img{boder:none;}button{outline: none;vertical-align: middle;}.img{width: 100%;margin-left: auto;margin-right: auto;margin-top: 20px;text-align: center;}.myImg{width: 500px;height: 300px;}p{text-align: center;}p .btn{width: 100px;height: 30px;background: #306bbf;color: #fff;margin-top: 20px;margin-bottom: 20px;}javascript 部分：//找标签let myImg = document.getElementById("myImg");let pre=document.getElementById("pre");let next=document.getElementById("next");//创建⼀个保存图⽚的数组let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];//数组的索引下标let index=0;//定义事件函数function preImg(event){index--;//实现循环切换if (index<0){index=arrImg.length-1;}myImg.src = arrImg[index];}function nextImg(event){index++;//实现循环切换if (index>arrImg.length-1){index=0;}myImg.src = arrImg[index];}pre.addEventListener('click',preImg);next.addEventListener('click',nextImg);以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

javascript实现点击产生随机图形

javascript实现点击产⽣随机图形本⽂实例为⼤家分享了javascript实现点击产⽣随机图形的具体代码，供⼤家参考，具体内容如下点击产⽣随机图形效果如下：⽤javascript来实现主要⽤canvas和随机函数完成各种图形第⼀步在HTML和CSS中创建出现图形的矩形和两个按钮。

第⼀个按钮⽤来产⽣图形，第⼆个按钮⽤来清除产⽣的所有图形。

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");var btn=document.getElementById("btn");var cle=document.getElementById("cle");设置图形的随机颜⾊function color(){var r=Math.floor(Math.random()*255);var g=Math.floor(Math.random()*255);var b=Math.floor(Math.random()*255);var a=Math.random();var bg="rgba("+r+","+g+","+b+","+a+")";return bg;}设置点击按钮随机产⽣图形的函数，第⼀种实⼼和空⼼矩形，第⼆种实⼼和空⼼圆，第三种直线，它们的位置和⼤⼩分别写随机函数，再分别加上canvas代码，⽤来画图形，如context.beginPath()-context closePath()。

原生js解决图片点击左右切换（简单轮播图）

原⽣js解决图⽚点击左右切换（简单轮播图）想写⼀个综合性的⼩案例，主要会运⽤到数组和判断以及我前⾯⼏篇博客所复习到的js的知识。

今天案例想要实现的效果图如下图所⽰：效果是：点击“循环切换”按钮，那么“⼀号”位置的⽂案就要写⼊“图⽚可以循环”，⽽下⾯的左右箭头在点击过程中可以循环点击，并且“⼆号”和“三号”要响应切换到相对应的数字和⽂字内容；否则，点击“顺序切换”按钮，那么“⼀号”位置的⽂案就要写⼊“图⽚是顺序播放”除了“⼆号”和“三号”要响应切换到相对应的数字和⽂字内容之外，⽆论是第⼀张还是最后⼀张都不能继续往下点击了。

好的具体来看代码。

先来简单的看⼀下布局和样式：1<style>2 body{text-align: center}3 #box{width:400px;height:400px;border:5px solid #e5e5e5;margin:20px auto;position:relative;}4 #img{width:100%;height:100%;}5 #text1{width:100%;height:30px;position:absolute;left:0;top:0;background: #000;text-align:center; line-height:30px;color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}6 #text2{width:100%;height:30px;position:absolute;left:0;bottom:0;background: #000;text-align:center; line-height:30px; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8;}7 a{width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }8 a:hover { filter:alpha(opacity:30); opacity:0.3; }9 #prev {left:10px;}10 #next {right:10px;}11</style>1<body>2<input id="btn1" type="button" value="循环切换">3<input id="btn2" type="button" value="顺序切换">4<p id="p1">图⽚可以循环</p>5<div id="box">6<img id="img"/>7<p id="text1"></p>8<p id="text2">图⽚⽂字加载中……</p>9<a id="prev" href="javascript:void(0)"><</a>10<a id="next" href="javascript:void(0)">></a>11</div>12</body>接下来就是最重要的js的写法了，因为是原⽣的写法，所以只能先获取到所有能⽤到的id，然后再去写具体的效果：1 <script>2 window.onload= function(){3var oBtn1=document.getElementById("btn1");4var oBtn2=document.getElementById("btn2");5var oBox=document.getElementById("box");6var oImg=document.getElementById("img");7var oText1=document.getElementById("text1");8var p1=document.getElementById("p1");9var oText2=document.getElementById("text2");10var oPrev=document.getElementById("prev");11var oNext=document.getElementById("next");12var arrSrc=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];13var arrTxt=["⽂案1","⽂案2","⽂案3","⽂案4"];14var num=0;15var onOff=true; //true 循环 false ⾛顺序1617function fn(){ //开始先定义⼀个公共函数⽅便下⾯调⽤18 oImg.src = arrSrc[num]; //图⽚的显⽰路径19 oText1.innerHTML= num+1 +"/" + arrTxt.length; //图中⼆号位置的数字显⽰20 oText2.innerHTML=arrTxt[num]; //图中三号位置的⽂字显⽰21 }22 fn();/*切记，定义之后，这⾥⼀定要调⽤⼀下*/2324//循环按钮25 oBtn1.onclick=function(){26 onOff=true;27 p1.innerHTML="图⽚会循环"2829 };30//顺序按钮31 oBtn2.onclick=function(){32 onOff=false;33 p1.innerHTML = "图⽚按顺序⾛"3435 };36 oPrev.onclick = function(){37 num--; //点击左边的箭头那么就是num--38if(onOff){ //onOff默认是true所以就是⾛循环了39if(num==-1){ //在⼀直减的过程中，数组⾥最⼩的就是0，所以等于-1的时候要循环下去所以让它显⽰最后⼀张40 num=arrSrc.length-1;41 }4243 }else{ //否则onOff是false所以就是⾛顺序了44if(num==-1){ //在⼀直减的过程中，数组⾥最⼩的就是0，所以等于-1的时候没有数据⾛了，所以让它显⽰第⼀张不能点击了45 num=0;46 alert("已经是第⼀张了")47 }48 }49 fn();//判断好之后记得调⽤函数50 };51//相反下⾯就是点击左边的箭头所做出的判断，道理同上52 oNext.onclick = function(){53 num++;54if(onOff){55if(num==arrTxt.length){56 num=0;57 }58 }else{59if(num==arrTxt.length){60 num=arrSrc.length-1;61 alert("已经是最后⼀张了")62 }63 }64 fn();65 }66 }67 </script>好了，以上就是这个案例所有代码了，这⾥⾯牵涉到两层逻辑关系就是点击最上⾯的循环和顺序的按钮时，下⾯的图⽚所对应到相应的效果，第⼆个逻辑就是当确定好是循环或者是顺序播放的其中⼀个之后，下⾯的图⽚在点击切换的时候是判断循环的⼀定要可以让它⼀直点击下去，⽽顺序的就是点击到最后⼀张就不能⾛下去了，要显⽰已经到头了，其实这些明⽩之后就好说了。

js点击更换背景颜色或图片的实例代码

js点击更换背景颜⾊或图⽚的实例代码1，按钮样式复制代码代码如下:<script>org_Color=document.bgColor.substring(1.10)</script><form><input type="button" value="淡黄⾊背景"onClick="document.bgColor='#feffc6'"><input type="button" value="浅蓝⾊背景"onClick="document.bgColor='#c6fffe'"><input type="button" value="粉红⾊背景"onClick="document.bgColor='#ffc9c6'"><input type="button" value="墨绿⾊背景"onClick="document.bgColor='#508b7d'"><input type="button" value="天蓝⾊背景"onClick="document.bgColor='#7BC7FF'"><input type="button" value="⽶⽩⾊背景"onClick="document.bgColor='#f0f0f0'"></form>2，下拉样式复制代码代码如下:<selectonChange="document.bgColor=this.options[this.selectedIndex].value"><option value="#C0C0C0">灰⾊的<option value="BLACK">⿊的⾊<option value="d2c6ff">淡紫蓝<option value="feefc7">太阳黄<option value="ffd2c6">淡红橘<option value="c7fed8">苹果绿<option value="80ff80">草原绿<option value="#C1BC59">橄榄⾊<option value="#7BC7FF">天空蓝<option value="#AEDFD3">蓝绿⾊<option value="#508B7D">墨绿⾊<option value="#F0F0F0">⽶⽩⾊</select>3，触碰样式复制代码代码如下:<scriptlanguage="Javascript"></script><body onload="document.bgColor='lime'; returntrue;"><a href="javascript:void(0);"onmouseover="randombackground()"><fontsize="5" face="宋体">碰我改变背景颜⾊</font></a>点击更换背景图⽚：复制代码代码如下:<div style="float:right;margin-right:20px;"><ahref="javascript:void(0);"><imgclass="button1"onClick="javascript:document.body.style.background='url(images/bg/1.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button2"onClick="javascript:document.body.style.background='url(images/bg/2.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button3"onClick="javascript:document.body.style.background='url(images/bg/3.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button4"onClick="javascript:document.body.style.background='url(images/bg/4.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button5"onClick="javascript:document.body.style.background='url(images/bg/5.jpg)'"></a><ahref="javascript:void(0);"><imgclass="button6"onClick="javascript:document.body.style.background='url(images/bg/6.jpg)'"></a></div>IE6不能⽤的解决⽅法：复制代码代码如下:<imgonClick="javascript:document.body.style.background='url(images/bg/1.jpg)';returnfalse;">。

简单的JS控制button颜色随点击更改

611053请尝试刷新页面或更换浏览器重试
简单的JS控制button颜色随点击更改
先上效果图：
默认“今日”是选中状态，是行内样式：
<button "button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>
OK，完成
document.getElementById('title').value = getYesterdayDate(new Date()); fetYesterdayData(); today.css('color','#555555'); } //今日click function todayDate() { document.getElementById('title').value = formatterDateStr(new Date()); fetTodayData(); today.css('color','#0062cc'); }
上面的日期都是点击才会切换颜色：
点击其它颜色，“今日”颜色更换成灰色再次点击“今日”，还原回默认状态颜色在除“今日”外的其它任一个日期中添加一个点击事件，可以实现【改变“今日”默认颜色状态】在“今日”的点击事件中添加【还原‘‘今日’’的默认状态颜色】
//昨日click function yesterdayDate() {

用javaScript实现轮播图效果包括自动变换，按钮控制，上一张下一张切换

⽤javaScript实现轮播图效果包括⾃动变换，按钮控制，上⼀张下⼀张切换javaScript实现轮播图效果（逆战总结）1.HTML代码<div id="wrap"><img src="images/1.jpg" alt="" class="on"><img src="images/2.jpg" alt=""><img src="images/3.jpg" alt=""><img src="images/4.jpg" alt=""><div class="btn"><span class="active"></span><span></span><span></span><span></span></div><i class="left" id="prev"></i><i class="right" id="next"></i></div>2.css代码#wrap{position: relative;width:590px;height: 470px;}#wrap img{position: absolute;top: 0;left: 0;/*display: none;*/opacity: 0;}#wrap .on{/*display: block;*/transition: 2s;opacity: 1;}.btn {position: absolute;bottom: 20px;left: 50%;margin-left: -44px;}.btn span{float: left;width: 8px;height: 8px;border:2px solid rgba(255,255,255,0.4);border-radius: 5px;margin-right: 10px;}.btn .active{background: white;cursor: pointer;}.left,.right{display: block;width: 37px;height: 53px;position: absolute;top: 50%;margin-top: -27px;cursor: pointer;}.left{background: url("images/arrow.png") left top;}.right{background: url("images/arrow.png") left -53px;right: 0;}3.js代码window.onload = function () {var oWrap = document.getElementById('wrap');var aImg = oWrap.getElementsByTagName('img');var aBtn = oWrap.getElementsByTagName('span');var oPrev = document.getElementById('prev');var oNext = document.getElementById('next');var iNow =0;function tab(){for (var i =0;i<aBtn.length;i++){//清空所有按钮选中样式以及图⽚显⽰样式aBtn[i].className='';aImg[i].className='';}aBtn[iNow].className='active';//设置当前按钮选中样式以及当前图⽚透明度aImg[iNow].className='on';}setInterval( function () {//每两秒循环变换下⼀张图⽚iNow++;if (iNow==aBtn.length)iNow=0;tab();},2000);for (var i =0;i<aBtn.length;i++){aBtn[i].index=i;//为按钮添加⾃定义属性（索引）⽬的是使图⽚和按钮相对应//按钮aBtn[i].οnmοuseοver= function () {iNow=this.index; //是按钮所控制显⽰的图⽚与左右箭头控制显⽰的图⽚相对应tab();}//下⼀个箭头oNext.onclick = function () {iNow++;if (iNow==aImg.length)iNow=0;tab();}//上⼀个箭头oPrev.onclick = function () {iNow--;if (iNow==-1)iNow=aImg.length-1;tab();}}}。

简单的实现点击箭头图片切换的js代码

简单的实现点击箭头图片切换的js代码步骤如下：(1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下：复制代码代码如下:<script type="text/javascript"src="JS/jquery-1.4.4.js"></script><script type="text/javascript">var picPath = new Array();picPath.push("Images/chuang_yhb.jpg");picPath.push("Images/dong_wgx.jpg");picPath.push("Images/gao_xsg.jpg");var index = 0;$(function() {var top = $("#img1").offset().top;var left = $("#img1").offset().left;var height = $("#img1").height();var width = $("#img1").width();$("#img1").attr({ "src": picPath[index] });$("#img1").parent().hover(function() {//show the arrow left and right$("#leftArrow").show();$("#rightArrow").show();$("#leftArrow").css({ "left": left - 10, "top": top + (height /2) });$("#rightArrow").css({ "left": left + width, "top": top + (height / 2) });}, function() {//hide the arrrow left and right$("#leftArrow").hide();$("#rightArrow").hide();});$("#leftArrow").click(function() {if (index > 0) {$("#img1").attr({ "src": picPath[--index] });}});$("#rightArrow").click(function() {if (index < picPath.length) {$("#img1").attr({ "src": picPath[++index] });}});});</script>(3) Html部分如下：复制代码代码如下:<div><img id="img1" alt="Show Pictures"style="margin-left:100px;" /><img id="leftArrow" alt="Left Arrow"src="Images/arrowa.jpg"style="position:absolute;display:none;width:50px;height:35px;z -index:99" /><img id="rightArrow" alt="Right Arrow"src="Images/arrowb.jpg"style="position:absolute;display:none;width:50px;height:35px;z -index:99" /></div> 下面再附一个js版的[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]。

js图片左右点击自动切换

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#forms{width:70%; height:40%; margin:0 auto;position: relative;}#img{}#bts{ position:absolute; bottom:1%;}#mid{ width:100%; position:absolute; top:50%; }#left{ float:left;}#right{ float:right;}</style></head><div id="forms"><div id="img"><img src="images/1.jpg" id="ig1" width="100%" height="100%" alt="亡命加载中。

"> </div><div id="bts"><input type="button" value="1" onClick="changer(1);"/><input type="button" value="2" onClick="changer(2);"/><input type="button" value="3" onClick="changer(3);"/><input type="button" value="4" onClick="changer(4);"/></div><div id="mid"><div id="left"><input type="button" value="<" onclick="changeTwo();"/></div><div id="right"><input type="button" value=">" onclick="change();"/></div></div></div><body><script>var images = ["1.jpg","2.jpg","3.jpg","4.jpg"];var table = document.getElementsByTagName("img")[0];var i = 0;//自动、向右转换方法function change(){if(i>=images.length){i=0;}else{i++;table.src="images/"+images[i];}}setInterval("change()",5000);//自动、向左转换方法//var j=parseInt(Math.random()*4);var j=0;function changeTwo(){if(j==0){j=images.length;}j--;table.src="images/"+images[j];}//下标点击方法function changer(param){var changer = document.getElementById("ig1");changer.src = "images/" + param + ".jpg";}</script></body></html>。

js实现图片区域可点击大小随意改变（适用移动端）代码实例

js实现图⽚区域可点击⼤⼩随意改变（适⽤移动端）代码实例实现图⽚区域可点击，实际上使⽤map是可以的，但是适配效果并不好，图⽚只能是固定⼤⼩的值，⽽且点都被写死了。

在这⾥，我使⽤的js基于canvas写的⼀个⼩⼯具。

可以圈出你需要点击的部分，然后⽣成⼀串json，在预览页⾯就可以看见效果了；在实际应⽤中，只要⽤⼯具处理⼀下图⽚，再把数据存⼊数据库，就很⽅便了；使⽤⼯具时，先上传图⽚。

然后就可以圈了，圈完⼀定要记得，点击保存数据，，，接着就可以预览了，预览点击的效果，可以看控制台，⾸先是⼯具⾸先⼯具的html<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;font-family: "微软雅⿊";}.hide{display: none;}canvas{border: 1px solid red;display: block;margin: 0 auto;background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;}.cover{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);}.cover p{text-align: center;}.btn{width: 800px;margin: 0 auto;padding-top: 10px;}.btn p{padding-bottom: 10px;}a{text-decoration: none;color: #000;}button{line-height: 30px;padding: 0 10px;cursor: pointer;border-radius: 4px;background: #449d44;color: #fff;border: none;}</style></head><body><div class="btn"><p><button onclick="saveData()">保存数据</button><button onclick="getData()">导⼊数据</button><button onclick="seeData(true)">查看数据</button><a href="preview.html" rel="external nofollow" target="_blank"><button>预览效果</button></a> </p><p><input type="file" name="imgload" id="imgload" value="上传图⽚" /></p><p><button onclick="reduo()">撤销</button><button onclick="clearAll()">清除</button></p><p>基础宽度:<input type="text" name="width" id="width" value="800" /></p><p>基础⾼度:<input type="text" name="width" id="height" value="600" /></p></div><canvas id="canvas" width="800" height="600"></canvas><div class="cover hide"><p><span>url地址:</span><input type="text" name="" id="urlAddress" value="" /></p><p><span>描述:</span><input type="text" name="dec" id="dec" value="" /></p><p><button class="contain">确认</button></p></div></body><script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/index.js"></script> </html>接着是⼯具的js代码var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.lineWidth = 1;ctx.strokeStyle="green";/*ctx.beginPath();ctx.moveTo(10, 100);ctx.lineTo(300,100);ctx.stroke();ctx.closePath();*/var run = false;var moduleList = [];var path = [];var $baseImg = '';var $cover = $(".cover");var $urlAddress = $('#urlAddress');var $dec = $("#dec");var $baseWidth = $('#width');var $baseHeight = $('#height');canvas.onmousedown = function(e){//console.log(e.clientX);//console.log(e.offsetX);ctx.beginPath();ctx.moveTo(e.offsetX, e.offsetY);path.push({x:e.offsetX,y:e.offsetY});run = true;}canvas.onmousemove = function(e){//var x = e.offsetX;if(run){ctx.lineTo(e.offsetX, e.offsetY);ctx.stroke();path.push({x:e.offsetX,y:e.offsetY});}}canvas.onmouseup = function(e){run = false;ctx.closePath();if(path.length > 10){$cover.removeClass('hide');}else{path = [];}}//保存数据function saveData(){var data = {"dec":"图⽚点击","version":"1","img":$baseImg,"module":moduleList,"baseWidth":$baseWidth.val(),"baseHeight":$baseHeight.val()}console.log(JSON.stringify(data));localStorage.setItem("data",JSON.stringify(data));}//查看数据function seeData(flag){var data = {"dec":"图⽚点击","version":"1","img":$baseImg,"module":moduleList,"baseWidth":$baseWidth.val(),"baseHeight":$baseHeight.val()}if(flag){console.log(JSON.stringify(data));}return data;}//图⽚背景$('#imgload').on('change',function(){imgToBase64(this.files[0],function(result){console.log(result);var base64Data = 'url(' + result + ')';$(canvas).css({'background-image': base64Data});$baseImg = result;});});//转化为base64function imgToBase64(file,callback){var reader = new FileReader();reader.onload = function (e) {callback(e.target.result);};reader.readAsDataURL(file); // 读取完后会调⽤onload⽅法}//确认信息$cover.on('click','.contain',function(){if($urlAddress.val() == ''){alert('地址不能为空');}else{moduleList.push({id:getName(),path:path,url:$urlAddress.val(),dec:$dec.val()});path = [];$cover.addClass('hide');}});//修改⾼度和宽度$baseWidth.on('change',function(){$(canvas).css({'width': $(this).val()});});$baseHeight.on('change',function(){$(canvas).css({'height': $(this).val()});});//随机获取名称function getName(){var timer = new Date();var arr = JSON.stringify(timer).replace(/:|-|"/g ,'').split('.'); var str = arr.join('');return str;}//导⼊模板function getData(){var data = JSON.parse(localStorage.getItem("data"));if(data){moduleList = data.module;;$baseImg = data.img;drawn(data);}else{alert('没有模板数据.');}}//撤销function reduo(){moduleList.pop();ctx.clearRect(0, 0, canvas.width, canvas.height);drawn(seeData());}//清除所有function clearAll(){moduleList = [];ctx.clearRect(0, 0, canvas.width, canvas.height);}//给数据，画出来function drawn(data){ctx.clearRect(0, 0, canvas.width, canvas.height);var module = data.module;var base64Data = 'url(' + data.img + ')';$(canvas).css({'background-image': base64Data});$baseWidth.val(data.baseWidth);$baseHeight.val(data.baseHeight);$(canvas).css({'width': data.baseWidth,'height':data.baseHeight});//开始画for(var i = 0; i < module.length;i++){var path = module[i].path;ctx.beginPath();ctx.moveTo(path[0].x, path[0].y);for(var j = 1; j < path.length; j++){ctx.lineTo(path[j].x, path[j].y);ctx.stroke();}ctx.closePath();}}最后是preview.html预览<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css">*{padding: 0;margin: 0;}body,html{width: 100%;height: 100%;}canvas{background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;width: 100%;height: 100%;}.wrap{border: 1px solid red;margin: 0 auto;width: 800px;height: 600px;}</style></head><body><div class="wrap"><canvas id="canvas" ></canvas></div></body><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">var $canvas = $('#canvas');var canvas = $canvas[0];var data = JSON.parse(localStorage.getItem("data"));var ctx = canvas.getContext('2d');ctx.lineWidth = 1;ctx.strokeStyle="rgba(0,0,0,0)";var module = data.module;var rateWidth = $canvas.width()/data.baseWidth;var rateHeight = $canvas.height()/data.baseHeight;var base64Data = 'url(' + data.img + ')';$canvas.css({'background-image': base64Data});console.log(rateWidth);console.log(rateHeight);//判断点击了图⽚的某个地⽅canvas.onclick = function(e){var x = event.pageX - canvas.getBoundingClientRect().left;var y = event.pageY - canvas.getBoundingClientRect().top;for(var i = 0; i < module.length;i++){var path = module[i].path;ctx.beginPath();ctx.moveTo(path[0].x*rateWidth, path[0].y*rateHeight);for(var j = 1; j < path.length; j++){ctx.lineTo(path[j].x*rateWidth, path[j].y*rateHeight);}ctx.closePath();if(ctx.isPointInPath(x, y)){clickCall(module[i]);return;}}};//点击中了选中的区域function clickCall(result){console.log(result.dec);console.log(result.url);}</script></html>效果以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

imgs[0].src="img("+rand+").jpg";
} //-->
</script>
</L>
<html>
<head>
<meta charset="utf-8">
<title> 单击一个按钮随机切换图片 </title>
<meta name="Keywords" content="">
<meta name="Description" content="by 独行冰海">
如果我们想产生1-100的随机数怎么办呢？
那么就使用random()*100即可得到0-100（不含100）的任意随机数（注意此时产生的数字并不只有整数）
此时介绍另外3个Math()的函数
ceil()，floor()，round()
Math.round() ------即四舍五入
<style type="text/css"></style>
</head>
<body>
<input id="change" type="button" value="随机更换图片">
<p></p>
<img src="img(11).jpg">
</body>
<script type="text/javascript">
今天的内容比较简单，在之前的一篇博文中也曾经写过源代码（这篇博文的链接会放在文章最后的推荐阅读）
如果想实现“随机”切换图像，那么我们要使用到几个Math()对象
第一个是random()函数，函数的功能是产生随机数，如果书写为
var a=Math.random()
那么所产生的随机数是0-1（不包括1）
Math.ceil() ------强制进位
Math.floor() ------强制舍去小数位
因此，在此处如果系那个得到1-100的任意随机数，应该如此书写：
var a=Math.ceil(Math.random()*100);
在下面这个例子中，我们产生10个随机值，分别对应十张图片
<!-- var cha=document.getElementById('change')
var imgs=document.getElementsByTagName('img')
cha.onclick=function (){
var rand=Math.ceil(Math.random()*10);