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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
js微信支付实现代码
Dec 22 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
javascript兼容性(实例讲解)
Aug 15 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
微信小程序实现录音Record功能
May 09 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
PHP中基本符号及使用方法
2010/03/23 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python模拟Django框架实例
2016/05/17 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python实现数值积分方式
2019/11/20 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python中six模块基础用法
2019/12/08 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python开根号实例讲解
2020/08/30 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
财务工作疏忽检讨书
2014/09/11 职场文书
离职感谢信
2015/01/21 职场文书
2015年党总支工作总结
2015/05/25 职场文书
党支部评议意见
2015/06/02 职场文书
办公室规章制度范本
2015/08/04 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python