专注JavaWeb开发 首页制式『默认式 OR 时间轴 网站地图|RSS订阅|设为首页|加入收藏
当前位置:首页 >前端 >jQuery > 正文

基于js仿汽车之家2015新版焦点图代码

来源: ITEYE 作者: IT江湖 发布时间: 2015-04-28 浏览次数:

今天给大家分享一款仿汽车之家2015新版焦点图代码。这是一款基于jQuery实现的适合电子商务网站或者企业产品展示功能特效。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

Html代码  收藏代码

  1. <div id="box">  

  2.         <div class="prev">  

  3.         </div>  

  4.         <div class="next">  

  5.         </div>  

  6.         <ul class="bigUl">  

  7.             <li style="z-index: 1"><a href="http://www.w2bc.com/">  

  8.                 <img src="images/1.jpg" alt="图1" /></a></li>  

  9.             <li><a href="http://www.w2bc.com/">  

  10.                 <img src="images/2.jpg" alt="图2" /></a></li>  

  11.             <li><a href="http://www.w2bc.com/">  

  12.                 <img src="images/3.jpg" alt="图3" /></a></li>  

  13.             <li><a href="http://www.w2bc.com/">  

  14.                 <img src="images/4.jpg" alt="图4" /></a></li>  

  15.             <li><a href="http://www.w2bc.com/">  

  16.                 <img src="images/5.jpg" alt="图5" /></a></li>  

  17.             <li><a href="http://www.w2bc.com/">  

  18.                 <img src="images/6.jpg" alt="图6" /></a></li>  

  19.             <li><a href="http://www.w2bc.com/">  

  20.                 <img src="images/7.jpg" alt="图7" /></a></li>  

  21.         </ul>  

  22.         <ul class="numberUl">  

  23.             <li class="night"><a href="javascript:;">1</a></li>  

  24.             <li><a href="javascript:;">2</a></li>  

  25.             <li><a href="javascript:;">3</a></li>  

  26.             <li><a href="javascript:;">4</a></li>  

  27.             <li><a href="javascript:;">5</a></li>  

  28.             <li><a href="javascript:;">6</a></li>  

  29.             <li><a href="javascript:;">7</a></li>  

  30.         </ul>  

  31.         <div>  

  32.             <ul class="textUl">  

  33.                 <li style="display: block;"><a href="http://www.w2bc.com/">定位精品路线 原创试驾奇瑞艾瑞泽3</a></li>  

  34.                 <li><a href="http://www.w2bc.com/">锂电池是亮点 米儿低速电动车设计解读</a></li>  

  35.                 <li><a href="http://www.w2bc.com/">舒适及操控更上一层楼 测试长安金欧诺</a></li>  

  36.                 <li><a href="http://www.w2bc.com/">外观动感/配置丰富 天籁2.0L用车记</a></li>  

  37.                 <li><a href="http://www.w2bc.com/">走到哪都信心十足 普拉多用车心得</a></li>  

  38.                 <li><a href="http://www.w2bc.com/">全新东风标致508 驾乘尽享的中高级杰座</a></li>  

  39.                 <li><a href="http://www.w2bc.com/">C4L 动力快人一步礼遇更胜一筹</a></li>  

  40.             </ul>  

  41.         </div>  

  42.     </div>  

 js代码:

Js代码  收藏代码

  1. window.onload = function () {  

  2.             var oBox = document.getElementById('box');  

  3.             var oPrev = getByClass(oBox, 'prev')[0];  

  4.             var oNext = getByClass(oBox, 'next')[0];  

  5.             var oBigUl = getByClass(oBox, 'bigUl')[0];  

  6.             var aLiBig = oBigUl.getElementsByTagName('li');  

  7.             var oNumUl = getByClass(oBox, 'numberUl')[0];  

  8.             var aLiNumber = oNumUl.getElementsByTagName('li');  

  9.             var oTextUl = getByClass(oBox, 'textUl')[0];  

  10.             var aLiText = oTextUl.getElementsByTagName('li');  

  11.             var nowZindex = 1;  

  12.             var now = 0;  

  13.             function tab() {  

  14.                 for (var i = 0; i < aLiNumber.length; i++) {  

  15.                     aLiNumber[i].className = '';  

  16.                 }  

  17.                 aLiNumber[now].className = 'night';  

  18.   

  19.                 aLiBig[now].style.zIndex = nowZindex++;  

  20.                 aLiBig[now].style.opacity = 0;  

  21.                 startMove(aLiBig[now], 'opacity', 100);  

  22.                 for (var i = 0; i < aLiText.length; i++) {  

  23.                     aLiText[i].style.display = 'none';  

  24.                 }  

  25.                 aLiText[now].style.display = 'block'  

  26.   

  27.             }  

  28.   

  29.             for (var i = 0; i < aLiNumber.length; i++) {  

  30.                 aLiNumber[i].index = i;  

  31.                 aLiNumber[i].onclick = function () {  

  32.   

  33.                     if (this.index == now) return;  

  34.                     now = this.index;  

  35.   

  36.                     tab();  

  37.                 }  

  38.             }  

  39.             oNext.onmouseover = oPrev.onmouseover = oBigUl.onmouseover = function () {  

  40.                 startMove(oPrev, 'opacity', 100);  

  41.                 startMove(oNext, 'opacity', 100)  

  42.             }  

  43.             oNext.onmouseout = oPrev.onmouseout = oBigUl.onmouseout = function () {  

  44.                 startMove(oPrev, 'opacity', 0);  

  45.                 startMove(oNext, 'opacity', 0)  

  46.             }  

  47.             oPrev.onclick = function () {  

  48.                 now--  

  49.                 if (now == -1) {  

  50.                     now = aLiNumber.length - 1;  

  51.                 }  

  52.                 tab();  

  53.             }  

  54.   

  55.             oNext.onclick = function () {  

  56.                 now++  

  57.                 if (now == aLiNumber.length) {  

  58.                     now = 0;  

  59.                 }  

  60.                 tab();  

  61.             }  

  62.   

  63.             var timer = setInterval(oNext.onclick, 3000)  

  64.             oBox.onmouseover = function () {  

  65.                 clearInterval(timer)  

  66.             }  

  67.             oBox.onmouseout = function () {  

  68.                 timer = setInterval(oNext.onclick, 3000)//改变速度修改3000 ,例如3000=3秒钟  

  69.             }  

  70.         }  


QQ群: 武汉地区(142173356)验证消息JavaWeb1024

网友共有【】评论,点击查看



x 微信关注我们 随时获取最新网站资讯