Javascript带按钮的轮播广告

源码

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.hidden{display: none;}#div1{position: absolute;top: 50px;left: 100px;}#div2{position: absolute;top: 210px;left: 510px;}a{display: block;float: left;width: 20px;height: 20px;background-color: #fff;color: #000;margin-right: 2px;text-align: center;line-height: 22px;font-size: 12px;border: 1px solid #999;}</style><script type="text/javascript">var max=4; //总的图片数量var now=1; //当前显示的图片，默认为第1张var timer; //定时器function show(id){//判断是否传递图片编号if(id){now=id;clearTimeout(timer); //清除原来的计时器}for(var i=1;i<=max;i++){if(i==now){$("ad"+now).style.display="block"; //显示当前图片}else{$("ad"+i).style.display="none"; //其他图片隐藏}}//判断当前图片是否是最后一张，如果是，则从头再来if(now==max){now=1;}else{now++; //设置显示下一张图片}timer=setTimeout(show, 2000); //每2秒切换图片}window.onload=function(){show();};function $(id){return document.getElementById(id);}</script>
</head>
<body><div id="div1"><img src="data:images/ad-01.jpg" id="ad1"><img src="data:images/ad-02.jpg" id="ad2" class="hidden"><img src="data:images/ad-03.jpg" id="ad3" class="hidden"><img src="data:images/ad-04.jpg" id="ad4" class="hidden"></div><div id="div2"><a onmouseover="show(1)">1</a><a onmouseover="show(2)">2</a><a onmouseover="show(3)">3</a><a onmouseover="show(4)">4</a></div>
</body>
</html>

效果：

Javascript带按钮的轮播广告相关推荐

怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
vue带缩略图的轮播图插件_带有缩略图轮播的自适应图像库
vue带缩略图的轮播图插件 View demo 查看演示Download Source 下载源 Today we want to show you how to create a responsive ...
html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
超赞的动漫主题大学生网页html作业带报告 JS轮播图表单视频下拉菜单栏
动漫主题网页设计,制作精良.完成度较高,运用有js轮播图.下拉菜单栏.鼠标滑过效果.js正则表达式等,子页面运用图文混排不重复排版,另有制作报告1500字,描述了制作过程.方法.总结等.预览视频如下: ...
JavaScript实现的，轮播图左右切换网页动画源码
大家好,今天给大家介绍一款,JavaScript实现的,轮播图左右切换网页动画源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以点击图片切换(图2) 图2 可以点击左右按钮切换(图3) 图3 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
php广告轮播效果,使用swiper组件实现轮播广告效果
这次给大家带来使用swiper组件实现轮播广告效果,使用swiper组件实现轮播广告效果的注意事项有哪些,下面就是实战案例,一起来看一下. 1.安装swipernpm install swiper@3 ...
利用RecyclerView实现无限轮播广告条
代码地址如下: http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在 ...
广告轮播java_[springboot 开发单体web shop] 6. 商品分类和轮播广告展示
商品分类&轮播广告因最近又被困在了OSGI技术POC,更新进度有点慢,希望大家不要怪罪哦. 上节我们实现了登录之后前端的展示,如: 接着,我们来实现左侧分类栏目的功能. 商品分类|Prod ...

Javascript带按钮的轮播广告

Javascript带按钮的轮播广告相关推荐

最新文章

热门文章