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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
基于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
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
js截取函数(indexOf,join等)
2010/09/01 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
小程序实现录音功能
2020/09/22 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
表扬信范文
2015/05/04 职场文书
新闻报道稿范文
2015/07/23 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
MySQL数据库表约束讲解
2022/06/21 MySQL