基于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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
javascript中的事件代理初探
Mar 08 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
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
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
详解php命令注入攻击
2019/04/06 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python中int与str互转方法
2018/07/02 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python如何建立全零数组
2020/07/19 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
新年晚会主持词
2014/03/24 职场文书
高中班主任评语大全
2014/04/25 职场文书
安全例会汇报材料
2014/08/23 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
开展警示教育活动总结
2015/05/09 职场文书
解除合同协议书范本
2016/03/21 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS