js图片向右一张张滚动效果实例代码


Posted in Javascript onNovember 23, 2013

先来张效果图

js图片向右一张张滚动效果实例代码

样式

        #div_left{float:left;width:60px;height:86px;}
        #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}
        #starScroll #contentScroll{width:500%}
        #starScroll #ScrollOne{float:left;}
        #starScroll #ScrollOne a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
        #starScroll #ScrollOne img{width:204px;height:188px;border:0px;}
        #starScroll #ScrollTwo{float:left;}
        #starScroll #ScrollTwo a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
        #starScroll #ScrollTwo img{width:204px;height:188px;border:0px;}
        #div_right{float:left;width:60px;height:86px;}
        .arrow{background:url(images/arrow.png) no-repeat;cursor:pointer;height:86px;width:60px;cursor:pointer;display:block;margin-top:50px;}
        .prev{background-position:left top;}
        .prev:hover{background-position:left bottom;}
        .next{background-position:right top;}
        .next:hover{background-position:right bottom;}

html代码

<div>
    <div id="div_left">
        <span id="btn_left" class="arrow prev"></span>
    </div>
    <div id="starScroll">
        <div id="contentScroll">
            <div id="ScrollOne">
                <a href="#" title="1"><img src="images/1.jpg" /></a>
                <a href="#" title="2"><img src="images/2.jpg" /></a>
                <a href="#" title="3"><img src="images/3.jpg" /></a>
                <a href="#" title="4"><img src="images/4.jpg" /></a>
                <a href="#" title="5"><img src="images/5.jpg" /></a>
                <a href="#" title="6"><img src="images/6.jpg" /></a>
                <a href="#" title="7"><img src="images/7.jpg" /></a>
                <a href="#" title="8"><img src="images/8.jpg" /></a>
            </div>
            <div id="ScrollTwo"></div>
        </div>
    </div>
    <div id="div_right">
        <span id="btn_right" class="arrow next"></span>
    </div>
</div>

JS代码

    <script type="text/javascript">
var Scroll=(function(){
    return function(){
        var starScroll = document.getElementById("starScroll"),
            ScrollOne = document.getElementById("ScrollOne"),
            aCollection = ScrollOne.getElementsByTagName("a"),
            aLength = aCollection.length,
            ScrollTwo = document.getElementById("ScrollTwo"),
            btn_left = document.getElementById("btn_left"),
            btn_right = document.getElementById("btn_right");
        var Width = 204,Current = 1,Rate = 7,TimeTimeout=1000,TimeInterval=10,MarginRight=9;
        var SInterval=null,STimeout=null;
        var flag=true;
        function ScrollLeft(){
            var CountWidth = Current*Width+Current*MarginRight,
                SLeftPara=starScroll.scrollLeft;
            if(ScrollTwo.offsetWidth-SLeftPara==0){
                starScroll.scrollLeft=0;
                Current=0;
            }
            if(CountWidth-SLeftPara==0){
                Forward();
            }
            else{
                var v = Math.round((CountWidth-SLeftPara)/Rate);
                v = v<1 ? 1 : v;
                SetScrollLeft(SLeftPara+v);
            }
        }
        function SetScrollLeft(scrollleft){
            starScroll.scrollLeft=scrollleft;
        }
        function Init(){
            flag=false;
            SInterval=setInterval(ScrollLeft,TimeInterval);
        }
        function Forward(){
            clearInterval(SInterval);
            Current++;
            flag=true;
            STimeout = setTimeout(Init,TimeTimeout);
        }
        btn_right.onclick=function(){
            if(flag){
                clearTimeout(STimeout);
                Init();
            }
        }
        function ScrollRight(){
            var CountWidth = Current*Width+Current*MarginRight,
                SLeftPara = starScroll.scrollLeft;
            if(CountWidth-SLeftPara==0){
                Forward();
            }
            else{
                var v = Math.round((CountWidth-SLeftPara)/Rate);
                v = v>-1?-1:v;
                SetScrollLeft(SLeftPara+v);
            }
        }
        btn_left.onclick=function(){
            if(!flag){
                return;
            }
            flag=false;
            clearTimeout(STimeout);
            if(Current==1){
                SetScrollLeft(ScrollTwo.offsetWidth);
                Current=aLength+1;
            }
            Current-=2;
            SInterval = setInterval(ScrollRight,TimeInterval);
        }
        if(aLength>0){
            starScroll.scrollLeft=0;
            ScrollTwo.innerHTML = ScrollOne.innerHTML;
            STimeout = setTimeout(Init,TimeTimeout);
        }
    }
})();
Scroll();
    </script>
Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
JavaScript 常用函数
Dec 30 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 #Javascript
JS控制日期显示的小例子
Nov 23 #Javascript
Jquery 动态循环输出表格具体方法
Nov 23 #Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 #Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 #Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 #Javascript
js获取电脑分辨率的思路及操作
Nov 22 #Javascript
You might like
微博短链接算法php版本实现代码
2012/09/15 PHP
php全排列递归算法代码
2012/10/09 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
初中校园之声广播稿
2014/01/15 职场文书
同学会感言
2015/07/30 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技