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 ...
随机推荐
- 调整V7连保监平台时问题
11北京 XXX: 界面无法录入导致无法出单. 31上海 XXX: 送平台代码有问题 保费计算失败! 车险平台返回信息 0101010024_公司险种代码/平台险种代码('030006 '/'C02 ...
- Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换
为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...
- 读数据库表填充DataTable
我一般用的有2中方法: 1.数据填充 string sqlcmd="select * from table"; SqlDataAdapter adapder = new SqlDa ...
- AFNetworking 与 NSURLSession
转载自:http://blog.sina.com.cn/s/blog_8157560c0101kt7h.html 1. 也就是说在IOS 7.1 之后你想用网络请求的话有两种途径,NSUrlSessi ...
- MVC6与Asp.net5
http://www.cnblogs.com/n-pei/p/4263148.html https://blogs.msdn.microsoft.com/scottgu/2015/04/30/asp- ...
- C++标准库概述 [转]
C++标准库的所有头文件都没有扩展名. C++标准库的内容总共在50个标准头文件中定义,其中18个提供了C库的功能.<cname>形式的标准头文件[<complex>例外]其内 ...
- chrome 41 空格
chrome 41对半角空格的解析 当做一个汉字宽度来处理了. 导致很多网站出现异常. 目前能想到的方法是删掉用来规范格式的空格. 老版chrome chrome41 和讯网也有这种问题 有更好的处理 ...
- Oracle 触发器在日志管理开发中的应用
摘要: 本文讨论了利用数据库中的触发器对日志管理进行设计与实现的方法, 是对原来在客户端软件中编写日志管理方法的一种改进, 并给出了 Oracle9i 中的实例演示.关键词: Oracle; 触发器; ...
- PostgreSQL的AnynonArray的例子
程序: CREATE OR REPLACE FUNCTION kappend(anynonarray, anyelement) RETURNS text AS $$ ; $$ LANGUAGE SQL ...
- OC基础之方法和参数的命名规范
以前学过C/C++/Java/C#语言的童鞋可能刚开始对于OC的方法和参数的命名规范大为不爽 举例来说,如下一个OC方法: - (void)tableView:(UITableView *)table ...