JD轮播图代码
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jd网站的轮播图效果</title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" type="text/css" href="./css/style.css"> | |
| </head> | |
| <body> | |
| <div id="ad"> | |
| <a href="" id="links"> | |
| <img src="" id="image"> | |
| </a> | |
| <div id="left"> | |
| < | |
| </div> | |
| <div id="right"> | |
| > | |
| </div> | |
| <div id="number"> | |
| <ul> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| <li>4</li> | |
| <li>5</li> | |
| <li>6</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| <script type="text/javascript"> | |
| //节点获取 | |
| var image = document.getElementById("image"); | |
| var ad = document.getElementById("ad"); | |
| var left = document.getElementById("left"); | |
| var right = document.getElementById("right"); | |
| var numlist = document.getElementById("number").getElementsByTagName("li"); | |
| var length = numlist.length; | |
| //初始化 | |
| image.src="./image/ad01.jpg"; | |
| var add=1; | |
| //鼠标划入ad块的时候才有左右箭头的显示 | |
| ad.onmouseover=function(){ | |
| left.style.display="block"; | |
| right.style.display="block"; | |
| clearInterval(lun); | |
| } | |
| ad.onmouseout=function(){ | |
| left.style.display="none"; | |
| right.style.display="none"; | |
| lunbo(); | |
| } | |
| //点击左右箭头有图片的切换效果 | |
| left.onclick=function(){ | |
| //alert('1'); | |
| add=add-1; | |
| if(add<1){ | |
| add=6; | |
| } | |
| image.src = "./image/ad0"+add+".jpg"; | |
| var x = add-1; | |
| for(var i=0;i<length;i++){ | |
| numlist[i].style.background="#3e3e3e"; | |
| if(x==i){ | |
| numlist[i].style.background="#b61b1f"; | |
| } | |
| } | |
| } | |
| right.onclick=function(){ | |
| add=add+1; | |
| if(add>6){ | |
| add=1; | |
| } | |
| image.src = "./image/ad0"+add+".jpg"; | |
| var x = add-1; | |
| for(var i=0;i<length;i++){ | |
| numlist[i].style.background="#3e3e3e"; | |
| if(x==i){ | |
| numlist[i].style.background="#b61b1f"; | |
| } | |
| } | |
| } | |
| //图片的轮播 | |
| function lunbo(){ | |
| lun = setInterval(function(){ | |
| add=add+1; | |
| if(add>6){ | |
| add=1 | |
| } | |
| image.src = "./image/ad0"+add+".jpg"; | |
| var x = add-1; | |
| for(var i=0;i<length;i++){ | |
| numlist[i].style.background="#3e3e3e"; | |
| if(x==i){ | |
| numlist[i].style.background="#b61b1f"; | |
| } | |
| } | |
| },2000); | |
| } | |
| lunbo(); | |
| //鼠标滑动过图片切换数字 | |
| for(var i=0;i<length;i++){ | |
| numlist[i].onmouseover=function(){ | |
| add=this.innerHTML; | |
| image.src="./image/ad0"+add+".jpg"; | |
| var x = add-1; | |
| for(var i=0;i<length;i++){ | |
| numlist[i].style.background="#3e3e3e"; | |
| if(x==i){ | |
| numlist[i].style.background="#b61b1f"; | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </html> |
JD轮播图代码的更多相关文章
- 木马轮播图代码Jq
效果图(将就一下) <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 纯HTML和CSS实现JD轮播图
博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识. ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...
- [Web] 通用轮播图代码示例
首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...
- 原生Js写轮播图代码
html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...
- js 轮播图代码
js代码 (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index //从第几 ...
- 轮播图适应代码jQ
(function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- ⒃bootstrap组件 轮播图 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Python基础 字符串的魔法
capitalize(self) 返回值:将字符串的第一个首字母变成大写,其他字母变小写 s = 'hello World' ss = s.capitalize() print(ss) Hello w ...
- iOS获取文件和文件夹大小
//通常用于删除缓存的时,计算缓存大小 //单个文件的大小 - (long long) fileSizeAtPath:(NSString*) filePath{ NSFileManager* mana ...
- spring+jpg环境下，spring实现文件下载web实现通用的文件下载方法
jar包复制到WEB-INF 文件夹lib下: commons-io-1.3.2.jar public static String download(HttpServletRequest reques ...
- Javascript 装载和执行（copy的感觉有很多错误。。）
copy from:http://coolshell.cn/articles/9749.html 首先,我想说一下Javascript的装载和执行.通常来说,浏览器对于Javascript的运行有两大 ...
- 微信get post请求到微信服务器 模版 素材操作
1:素材管理 官方文档 package org.konghao.weixin.media; import java.io.File; import java.io.IOException; impor ...
- js 原型模型重写1
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- NoSQL 数据建模技术（转）
本文转载自:http://coolshell.cn/articles/7270.html ================================================ 全文译自墙外 ...
- Freescale OSBDM JM60仿真器
OSBDM-JM60 - 9S08JM60 Based OSBDM — It includes interfaces and firmware applied to all the targets s ...
- \r，\n，\t
\r:回车符,返回到这一行的开头,return的意思. \n:换行符,到下一行的同一位置,纵坐标相同,new line的意思. \t:制表符,为了在不使用表格的情况下,上下对齐,table的意思. E ...
- jQuery 动态加载树
本案例中用到了jquery的 tree插件,在本文的附件中可以下载 jsp代码: <%@ page language="java" import="java.uti ...