<!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. Codeforces Round #313 (Div. 2) E. Gerald and Giant Chess (Lucas + dp)

    题目链接:http://codeforces.com/contest/560/problem/E 给你一个n*m的网格,有k个坏点,问你从(1,1)到(n,m)不经过坏点有多少条路径. 先把这些坏点排 ...

  2. POJ 3172 Scales (01背包暴力)

    题意:给定 n 个数,保证下一个数比上一个数和前一个数之和大,然后给定一个背包,问你最多放多少容积. 析:应该是很明显的01背包,但是可惜的是,数组开不出来,那就得考虑暴力,因为数不多,才几十而已,要 ...

  3. redis 重用命令

    一. set 1.smembers key 查看所有元素

  4. Linux下生成动态链接库是否必须使用 -fPIC 的问题[转]

    在 Linux 下制作动态链接库,“标准” 的做法是编译成位置无关代码(Position Independent Code,PIC),然后链接成一个动态链接库.经常遇到的一个问题是 -fPIC 是不是 ...

  5. C：结构体

    结构体 构造类型:就是有基本的类型组成的 1.结构体  结构体是一种自定义的数据类型 和 int float 是一样的都可以定义变量 数组 只能存放一种类型的容器 结构体   可以存放多种数据类型  ...

  6. Release 版本和 Debug 版本

    什么是 Release 版本.Debug 版本? bug-缺陷,程序故障.而debug指的是排除缺陷,显然这个模式是面向开发者的. 而release是满足发布所用. Debug 和 Release,在 ...

  7. vs2013修改默认的开发环境

    可能会有朋友和我一样,当安装完VS完成之后,没有选择默认的开发模板,在后面添加新项目时,总是不能选择默认的开发语言,下面给出个简单步骤,记录一下以备用. 看图吧 1.工具>导入和导出设置 2.选 ...

  8. 用Log4Net记录NHibernate中执行的SQL语句及执行时间

    首页,在web.config中加入以下配置: <configuration> <configSections> <section name="log4net&q ...

  9. struts2对一些属性的使用和对session封装对象类型采用jstl技术的遍历（配图解）

    在struts2中如何实现像jsp中request,session,appliaction的使用.其实有两种方法.下面通过一个案列来说明两个方法的使用. 先写一个test.java类 packagec ...

  10. cocos2d-x 用浏览器打开网页

    转自:http://www.xuebuyuan.com/1396292.html,http://www.cocoachina.com/bbs/read.php?tid=88589 First!! 源代 ...