<!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. How Tomcat Works（十二）

    tomcat容器通过一个称为Session管理器的组件来管理建立的Session对象,该组件由org.apache.catalina.Manager接口表示:Session管理器必须与一个Contex ...

  2. thinkPHP 无法create，无法插入数据，提示非法数据对象

    4.thinkPHP 无法create,提示非法数据对象解决方法:不要create+add,而用 data[]= '';+add$m_r_fa_account = D('R_fa_account'); ...

  3. 数据库连接池 c3p0 demo 代码和分析

    import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; i ...

  4. 利用HTML5开发Android(3)---Android中的调试

    通过JS代码输出log信息 Js代码 Js代码: console.log("Hello World"); Log信息: Console: Hello World http://ww ...

  5. Tomcat修改网址旁边的小图标

    用Tomcat发布时候,往往不希望用IP地址旁边的Tomcat小猫,根据需求利用自己的icon图标. 先将需要的图片转换成icon格式的. 这个网站可以进行icon格式的转换:http://www.c ...

  6. 利用花生壳和IIS发布网页过程

    老早利用做过类似的事情,但最近又忘了怎么弄的了,还是自己给自己总结下,省得以后到处找了. [动态域名绑定] 如果具有公网IP地址,申请一个免费的花生壳动态域名,再下一个花生壳客户,使用已经申请好的动态 ...

  7. svn的搭建

    http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2407610.html

  8. PostgreSQL中 AnyElement AnyArray AnynonArray的区别与联系

    http://www.postgresql.org/docs/current/static/extend-type-system.html#EXTEND-TYPES-POLYMORPHIC 先看一个例 ...

  9. Java常见排序算法之折半插入排序

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

  10. Android 获取控件相对于屏幕位置

    // View宽,高 public int[] getLocation(View v) { int[] loc = new int[4]; int[] location = new int[2]; v ...