基于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 Plugin 插件的方法
Apr 20 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
浅析js封装和作用域
Jul 09 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
JS实现li标签的删除
Apr 12 Javascript
redux.js详解及基本使用
May 24 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
Banner程序
2006/10/09 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue实现购物车的监听
2020/04/20 Javascript
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
kali中python版本的切换方法
2019/07/11 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
游戏商店:Eneba
2020/04/25 全球购物
领导视察欢迎词
2014/01/15 职场文书
一年级班主任寄语
2014/01/19 职场文书
小学生自我评价范文
2014/01/25 职场文书
学雷锋标语
2014/06/25 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
小班上学期个人总结
2015/02/12 职场文书
人事任命通知书
2015/04/21 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
离职证明范本
2015/06/12 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
python数字类型和占位符详情
2022/03/13 Python