基于JavaScript实现淘宝商品广告效果

本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下

CSS部分:

ul{ margin: 0; padding: 0; }
  li{ list-style: none; } 

  #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; }
  #ad .listL{ float: left; }
  #ad .listR{ float: right; }
  #ad li{ width: 48px; height: 26px; border: 1px #ffadad solid; background: #fff7f7; color: #333; line-height: 26px; margin-bottom: 2px; cursor: pointer; }
  #ad img{ height: 206px; width: 188px; background: url(images/loader_ico.gif) no-repeat center center; }
  #ad .cur{ background: #ff8494; color: #fff }

HTML部分:

<div id="ad">
  <ul class="listL">
   <!-- <li class="cur"></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li> -->
  </ul>
  <a href="#"><img src="" alt=""></a>
  <ul class="listR">
   <!-- <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li> -->
  </ul>
 </div> 

JS部分:

window.onload = function(){
  var oDiv = document.getElementById('ad');
  var aUl = oDiv.getElementsByTagName('ul');
  var oImg = oDiv.getElementsByTagName('img')[0];
  var aImg = ['images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.png','images/pic6.png','images/pic7.png','images/pic8.png','images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.png','images/pic6.png'];
  var aTxt = ['连衣裙','T恤','雪纺','铅笔裤','婚纱','外套','连体裤','包包','凉鞋','单鞋','太阳镜','丝袜','帆布鞋','情侣鞋'];
  var len = aImg.length;
  var oldNum = 0;
  var num = 0;
  var timer = null;
  var speed = 1; 

  // 创建添加左右两侧li
  for( var i = 0; i < len/2; i++){
   aUl[0].innerHTML += '<li>'+ aTxt[i] +'</li>'
   aUl[1].innerHTML += '<li>'+ aTxt[i + len/2] +'</li>'
  } 

  var aLiL = aUl[0].getElementsByTagName('li');
  var aLiR = aUl[1].getElementsByTagName('li');
  var arrLi = [];
  // 将遍历的所有li添加到数组arrLi中
  for( var i = 0; i < aLiL.length; i++){
   arrLi.push(aLiL[i]);
  }
  for( var i = 0; i < aLiR.length; i++){
   arrLi.push(aLiR[i]);
  }
  // console.log(arrLi.length); 

  // 函数初始化
  function init(n){
   oImg.src = aImg[n];
   arrLi[oldNum].className = '';
   arrLi[n].className = 'cur';
   oldNum = n;
  }
  init(0); 

  // 鼠标经过li,图片切换
  for(var i = 0; i < len; i++){
   arrLi[i].index = i;
   arrLi[i].onmouseover = function(){
    init(this.index);
   }
  }; 

  // 定时切换
  function fnTimer(n){
   timer = setInterval(function(){ 

    // type1:顺序切换
    /* n ++;
    if(n == len){
     n = 0;
    }*/ 

    // type2:倒序切换
    if(n == len-1){
     speed = -1;
    }else if(n== 0){
     speed = 1;
    }
    n += speed;
    init(n);
   },1000);
  };
  fnTimer(0); 

  // 鼠标移入,清除定时器
  oDiv.onmouseover = function(){
   clearInterval(timer);
  }; 

  // 鼠标移出,开启定时器
  oDiv.onmouseout = function(){
   fnTimer(oldNum);
  };
  };

预览效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • javascript实现淘宝幻灯片广告展示效果

    本文实例讲述了javascript实现淘宝幻灯片广告展示效果的方法.分享给大家供大家参考.具体如下: 一.效果图如下: 二.代码部分: JS代码部分: function getClass(oParent,name){ var arr=[]; var oBj=oParent.getElementsByTagName("*"); for(var i=0;i<oBj.length;i++){ if(oBj[i].className==name){ arr.push(oBj[i]); }

  • 基于JavaScript实现淘宝商品广告效果

    本文实例为大家分享了JavaScript实现淘宝商品广告效果的具体代码,供大家参考,具体内容如下 CSS部分: ul{ margin: 0; padding: 0; } li{ list-style: none; } #ad{ width: 298px; height: 208px; border: 1px #ff6300 solid; padding: 4px 1px; text-align: center; } #ad .listL{ float: left; } #ad .listR{ f

  • 基于JavaScript实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{mar

  • JavaScript实现淘宝商品图切换效果

    JavaScript之衣服相册切换效果(类似淘宝商品图切换),供大家参考,具体内容如下 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #bigImg{ width: 200

  • JavaScript实现类似淘宝的购物车效果

    前言 相信大家都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化.本文介绍的是通过JavaScript实现类似于淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能. 功能如下 1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表

  • 基于JS分页控件实现简单美观仿淘宝分页按钮效果

    最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

  • Android仿淘宝商品详情页效果

    本文实例为大家分享了Android仿淘宝商品详情页的具体代码,供大家参考,具体内容如下 Demo地址:先上效果图 效果就是上面图片的效果 接下来看看如何实现 首先我们来看下布局文件 <LinearLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="72dp" android:paddingTop="24

  • JavaScript仿淘宝放大镜效果

    本文实例为大家分享了JavaScript实现淘宝放大镜效果的具体代码,供大家参考,具体内容如下 html代码 <div class="thumbnail"> <img src="./img/12-1Z930152149 (2).jpg" alt=""> <div class="magnifier"></div> </div> <div class="o

  • Android实现淘宝商品列表切换效果

    本文实例为大家分享了Android仿淘宝商品列表切换,供大家参考,具体内容如下 源码:Android实现淘宝商品列表切换 布局文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.androi

  • 基于Bootstrap仿淘宝分页控件实现代码

    大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一.淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺

随机推荐