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 相关文章推荐
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
AngularJS实现多级下拉框
Mar 25 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
php生成excel文件的简单方法
2014/02/08 PHP
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python 处理图片像素点的实例
2019/01/08 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
生日宴会主持词
2014/03/20 职场文书
工商管理专业自荐信
2014/06/03 职场文书
优秀员工自荐书
2015/03/06 职场文书
防卫过当辩护词
2015/05/21 职场文书
运动会广播稿50字
2015/08/19 职场文书