前端开发

 首页 > 前端开发 > javascript > 原声JS编写轮播图焦点图广告图源码

原声JS编写轮播图焦点图广告图源码

分享到：
【字体：大 中 小】
导读：
          原声JS编写轮播图焦点图广告图源码代码如下所示： !DOCTYPEhtmlhtmlheadmetacharset=UTF-8titlejs图片轮播切换/titlestyletype=text/css .imgCon{width:400px;height:400px;border:2pxsolid#DCDCDC;margin:100pxauto;position:re...

原声JS编写轮播图焦点图广告图源码代码如下所示：





js图片轮播切换

　　.imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;}
　　.imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;}
　　.numStyle{top: 0px;}
　　.textStyle{bottom: 0px;}
　　.imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;}
　　.imgCon .prev{left: 10px;}
　　.imgCon .next{left: 370px;}
　　img{width:400px;height: 400px;}



　　
　　　　加载中...
　　　　加载中...
　　　　<
　　　　>
　　　　
　　
　　 　　　　var numCon = document.getElementById('numCon'); 　　　　var textCon = document.getElementById('textCon'); 　　　　var prev = document.getElementById('prev'); 　　　　var next = document.getElementById('next'); 　　　　var imgChange = document.getElementById('imgChange'); 　　　　var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg']; 　　　　var imgText = ['第一张','第二张','第三张','第四张']; 　　　　var num = 0; 　　　　//数字 图片变化函数 　　　　function imgTab(){ 　　　　　　numCon.innerHTML = num+1 + '/' + imgArr.length; //数字变化 　　　　　　textCon.innerHTML = imgText[num]; //底部文字内容变化 　　　　　　imgChange.src = imgArr[num]; //图片变化 　　　　} 　　　　imgTab(); 　　　　//下一张 按钮 　　　　next.onclick = function(){ 　　　　num++; 　　　　if(num == imgArr.length){ 　　　　　　num = 0; 　　　　} 　　　　imgTab(); 　　　　} 　　　　//上一张 按钮 　　　　prev.onclick = function(){ 　　　　　　num--; 　　　　if(num == -1){ 　　　　　　num = imgArr.length-1; 　　　　} 　　　　imgTab(); 　　　　} 　　

有问题请回复下方评论

分享到：
js检查某个元素在数组中的索引值
在现在代浏览器中判断一个元素在不在一个数组中，咱们可以用Array对象的indexOf()方法来取得这个元素在当前数组中的索引值，若索引值不等于-1，数组中就存在这个元素， 例如： var arr = [2,53,23,&#039;test&#039;,9,&#039;array&#039;]; //判断array在不在数组arr中 arr.indexOf(&#039;array&#039;) !== -1 ? ...
javascript匀速动画和缓冲动画详解
关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。 使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。 老规矩，先上代码，能直接看懂的可以节省...
  •         php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。
  • 在这里……

Tags

网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱  冀ICP备18013926号-2