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 ...
随机推荐
- 什么是S-OFF,什么是S-ON,HBOOT命令,玩转Android
什么是S-OFF?S代表 Security Lock,是安全锁,保护锁的意思.S-OFF就是安全保护关,S-ON就是安全保护开.Secure Lock 就是安全锁.是硬件设计厂商用于保护固件不被刷写而 ...
- 表格对象QTableWidget相关常见方法
QWidget bool close (self)QRect geometry (self)hide (self)int height (self)setStatusTip (self, QStrin ...
- oracle学习 九 游标的使用（持续更）
为什么要使用? 笔者查阅了一些资料之后得到的结论是, 关系型数据库是面向集合的,而游标是面向行的,游标可对取出来的集合(结果集)中每一行进行相同或不同的操作,还提供对基于游标位置而对表中数据进行删除或 ...
- (高精度运算4.7.21)UVA 10106 Product(大数乘法)
package com.njupt.acm; import java.math.BigInteger; import java.util.Scanner; public class UVA_10106 ...
- UVaLive 7503 Change （坑题。。。。。。）
题意:给定两个人民币,问你花最少钱保证能够凑出另一个价格. 析:这个题最大的坑就是在,并一定是一次就凑出来,可以多次,然后就可以想了,如果要凑的数和1有关,特判,如果是2倍数,0.01就够了,否则就是 ...
- VS2008注册码
PYHYP-WXB3B-B2CCM-V9DX9-VDY8T 如果下载的是90天的试用版,下载下来以后把ISO里面的Setup\setup.sdb文件用记事本打开,把其中的[Product Key]下面 ...
- hdoj 5301 Buildings
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5301 #include <iostream> #include <stdio.h&g ...
- ASP.NET MVC- 视图
关于视图的一些一些一些 一.Action指定使用视图 public ActionResult Add(string txtName, string txtContent) { return View( ...
- shell切换用户执行后面语句 su与su -的区别
关于su和su -的区别,切换用户是可以使用su tom或者su - tom来实现,但是两者有区别,su只是切换身份,但shell环境仍然是原用户的shell,su -是连用户的shell环境一起切换 ...
- 关于以DataTable形式批量写入数据的案例
void IDataAccess.CommandDataTable(DataTable dt, string ProcedureName, System.Data.Common.DbParameter ...