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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
Vuex新手的理解与使用详解
May 31 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
秋季运动会加油稿200字
2014/01/11 职场文书
企业车辆管理制度
2014/01/24 职场文书
项目总经理岗位职责
2014/02/14 职场文书
节能宣传周活动总结
2014/05/08 职场文书
服务员岗位职责
2015/02/03 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python
python pygame 开发五子棋双人对弈
2022/05/02 Python