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


Posted in Javascript onAugust 10, 2017

本文实例为大家分享了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); 
  }; 
  };

预览效果:

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

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

Javascript 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
Vue数组更新及过滤排序功能
Aug 10 #Javascript
Webpack性能优化 DLL 用法详解
Aug 10 #Javascript
详解React Native网络请求fetch简单封装
Aug 10 #Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
express框架实现基于Websocket建立的简易聊天室
Aug 10 #Javascript
You might like
Zend studio文件注释模板设置方法
2013/09/29 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
关于js类的定义
2011/06/28 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
轻松掌握python设计模式之访问者模式
2016/11/18 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python如何绘制日历图和热力图
2020/08/07 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
双创工作实施方案
2014/03/26 职场文书
3分钟演讲稿
2014/04/30 职场文书
捐书活动总结
2014/05/04 职场文书
小学生倡议书范文
2014/05/13 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2015年护士节活动总结
2015/02/10 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS