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 ...
随机推荐
- MacTerminal快捷键
[MacTerminal快捷键] 在Mac系统中并没有Home.End等键,所以在使用时并不是特别的顺手,但是有几个键位组合可以使Terminal的操作更加灵活方便. 1.将光标移动到行首:ctrl ...
- UVaLive 6693 Flow Game (计算几何，线段相交)
题意:给个棋盘,你可以在棋盘的边缘处放2个蓝色棋子2个黄色棋子,问连接2组同色棋子的最小代价,如果线路交叉,输-1. 析:交叉么,可以把它们看成是两条线段,然后如果相交就是不行的,但是有几种特殊情况, ...
- class DelegatingFilterProxy
/** * Proxy for a standard Servlet Filter, delegating to a Spring-managed bean that * implements the ...
- web.xml配置详解之listener与context-param
1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> 和 <context- ...
- Android与.Net交互模拟用户屏幕操作添加APN和网络4G/3G切换
前几天接到一个需求,我们的客户需要对手机网络接入点进行可用性测试,简单点说就是需要实现Android上的APN配置的添加,APN切换网络模式4G/3G/2G切换,我要调研下写个demo. 因为是要实现 ...
- Android LIstView初次创建getview方法执行多次问题
写listview优化的时候,发现Listview初次创建的时候会多次执行getView方法. <?xml version="1.0" encoding="utf- ...
- 【腾讯内部干货分享】分析Dalvik字节码进行减包优化
http://wetest.qq.com/lab/view/?id=96?from=ads_test2_qqtips&sessionUserType=BFT.PARAMS.192184.TAS ...
- SAE J1850 VPW PWM, SAE J2411 SWC, ISO 11898 CAN, SAE J1708, Chrysler CCD 接口芯片电路
SAE J1850 VPW 接口芯片电路 SAE J1850 PWM 接口芯片电路 SAE J2411 SWC 接口芯片电路 ISO 11898 CAN 接口芯片电路 CANH 和CANL 上的电容 ...
- JS原生方法实现jQuery的ready()
浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...
- XHTML标签的嵌套规则--很基础很重要
XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...