javascript实现焦点滚动图效果 具体方法


Posted in Javascript onJune 24, 2013

javascript实现焦点滚动图效果 具体方法

前台代码:

<div class="sub_box">  
                       <div id="p-select" class="sub_nav">  
                           <div class="sub_no" id="bd1lfsj">  
                               <ul>  
                                   <li class="show">1</li>  
                                   <li class="">2</li>  
                                   <li class="">3</li>  
                                   <li class="">4</li>  
                                   <li class="">5</li>  
                                   <li class="">6</li>  
                                   <li class="">7</li>  
                               </ul>  
                           </div>  
                       </div>  
                       <div id="bd1lfimg">  
                           <div>  
                               <dl class="show">  
                               </dl>  
                               <asp:Repeater ID="repTopPicture" runat="server">  
                                   <ItemTemplate>  
                                       <dl class="">  
                                           <dt><a href="">  
                                               <img src='<%#Eval("ImageUrl")%>' /></a></dt>  
                                       </dl>  
                                   </ItemTemplate>  
                               </asp:Repeater>  
                           </div>  
                       </div>  
                   </div>  
                   <script type="text/javascript">                        movec();</script> 

javascript代码:

//选择器   
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}  //焦点滚动图 点击移动   
function movec()  
{  
    var o=$a("bd1lfimg","");  
    var oli=$a("bd1lfimg","dl");  
    var oliw=oli[0].offsetWidth; //每次移动的宽度      
    var ow=o.offsetWidth-2;  
    var dnow=0; //当前位置     
    var olf=oliw-(ow-oliw+10)/2;  
        o["scrollLeft"]=olf+(dnow*oliw);  
    var rqbd=$a("bd1lfsj","ul")[0];  
    var extime;  
    <!--for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}-->  
    var rq=$a("bd1lfsj","li");  
    for(var i=0;i<rq.length;i++){reg(i);};  
    oli[dnow].className=rq[dnow].className="show";  
    var wwww=setInterval(uu,2000);  
    function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}  
    function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);}  
    function bc()  
    {  
        var ns=((dnow*oliw+olf)-o["scrollLeft"]);  
        var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);  
        o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;}  
    }  
    function uu()  
    {  
        if(dnow<oli.length-2)  
        {  
            oli[dnow].className=rq[dnow].className="";  
            dnow++;  
            oli[dnow].className=rq[dnow].className="show";  
        }  
        else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}  
        mv();  
    }  
    o.onmouseover=function(){clearInterval(wwww);}  
    o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}  
} 
Javascript 相关文章推荐
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
JQuery解析XML数据的几个简单实例
May 18 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 #Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 #Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 #Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 #Javascript
JS实现的省份级联实例代码
Jun 24 #Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 #Javascript
用jquery生成二级菜单的实例代码
Jun 24 #Javascript
You might like
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python实现扫描ip地址的小程序
2019/04/16 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python datetime处理时间小结
2020/04/16 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
绿色环保标语
2014/06/12 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python