<!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. react native 网络get请求方式参数不可为undefined或null

    react native 网络get请求方式参数不可为undefined(为空的话默认变为)或null 错误写法: export function addToCartAction(isRefreshi ...

  2. Linux coredump

    前面写过通过注册信号处理函数定位SEGV问题.其实Linux coredump机制也是比较好的debug手段. 进程由于某种异常或者bug导致在运行过程中异常退出或者中止,有时会产生一个叫做core的 ...

  3. 使用.NET中的Action及Func泛型委托

          委托,在C#编程中占有极其重要的地位,委托可以将函数封装到委托对象中,并且多个委托可以合并为一个委托,委托对象则可以像普通对象一样被存储.传递,之后在任何时刻进行调用,因此,C#中函数回调 ...

  4. 16.ARC

    Swift 使用自动引用计数(ARC)机制来跟踪和管理应用程序的内存.通常情况下,Swift 内存管理机制会一直起作用,我们无须自己来考虑内存的管理.ARC 会在类的实例不再被使用时,自动释放其占用的 ...

  5. java画图输出到磁盘

    直奔主题,实战例子如下 package com.yuanmeng.jase; import java.awt.Color; import java.awt.Font; import java.awt. ...

  6. xhtml和css概述

    Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以 ...

  7. 分布式服务框架 Zookeeper -- 管理分布式环境中的数据（转载）

    本文转载自:http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ Zookeeper 分布式服务框架是 Apache Had ...

  8. Java常见排序算法之冒泡排序

    在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...

  9. CSS中filter滤镜学习笔记

    1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  10. UVA 12906 Maximum Score 排列组合

    Maximum Score Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vie ...