<!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">
  &lt;
  </div>
  <div id="right">
  &gt;
  </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轮播图代码的更多相关文章

  1. 木马轮播图代码Jq

    效果图(将就一下) <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  3. 纯HTML和CSS实现JD轮播图

    博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识.  ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...

  4. [Web] 通用轮播图代码示例

    首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...

  5. 原生Js写轮播图代码

    html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...

  6. js 轮播图代码

    js代码 (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index //从第几 ...

  7. 轮播图适应代码jQ

    (function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...

  8. js写的简单轮播图

    这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...

  9. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Labview中定时函数之间的区别

    第一个定时函数(时间延迟):在VI中插入时间延迟,指定在运行调用VI之前延时的秒数.默认值为1.000. 第一个定时函数(等待(ms)):等待指定长度的毫秒数,并返回毫秒计时器的值.该函数进行异步系统 ...

  2. find命令之exec

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec  参数后面跟的是command ...

  3. iOS 中UIButton的 settitle 和 titlelabel的使用误区

    UIButton中设置Titl方法包括以下几种: - (void)setTitle:(NSString *)title forState:(UIControlState)state; - (void) ...

  4. Linux下如何用vi编辑和保存文件

    vi是Linux终端下或控制台下常用的编辑器,基本的操作方式为:vi /路径/文件名 例如,vi /etc/fstab表示显示/etc/fstab文件的内容.使用键盘上的Page Up和Page Do ...

  5. UI：UINavigationController、界面通信

    IOS中实现对控制器的管理的控制器有:UINavigationController 和 UITableBarController 两个控制器.下面是主要学习前者. 参考 ⼀.UINavigationC ...

  6. ActiveMQ集成到Spring

    [http://wentao365.iteye.com/blog/1560934] spring配置文件applicationContext.xml <?xml version="1. ...

  7. libev笔记

    libev是一个开源库,实现了一个reactor模式事件驱动任务调度库.代码非常精简,包含所有实现的.c文件只有不到5000行. 支持的事件类型: ev_io ev_timer ev_periodic ...

  8. [转]在Arcmap中加载互联网地图资源的4种方法

    转自http://blog.3snews.net/space.php?uid=6955280&do=blog&id=67981 前一段时间想在Arcmap中打开互联网地图中的地图数据, ...

  9. CSS3- px、em、rem区别介绍

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...

  10. ST10 Bootstrap Loader

    Bootstrap Loader The built-in bootstrap loader (BSL) of the ST10F269 provides a mechanism to load th ...