基于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 相关文章推荐
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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/09/28 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
Js获取事件对象代码
2010/08/05 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
浅谈jQuery中replace()方法
2015/05/13 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python计算文本文件行数的方法
2015/07/06 Python
django使用LDAP验证的方法示例
2018/12/10 Python
python如何制作英文字典
2019/06/25 Python
详解Python time库的使用
2019/10/10 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Django如何批量创建Model
2020/09/01 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
关于安全的标语
2014/06/10 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
会计工作能力自我评价
2015/03/05 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
MySQL笔记 —SQL运算符
2022/01/18 MySQL