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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
js indexOf()定义和用法
Oct 21 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP实现微信发红包程序
2015/08/24 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
小学生学习雷锋倡议书
2014/05/15 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
交通事故调解协议书
2015/05/20 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python