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实现计算加载页面所用的时间
Apr 02 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
JavaScript实现滚动加载更多
Dec 27 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获取文件扩展名的方法
2015/03/14 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
致裁判员加油稿
2014/02/08 职场文书
人资专员岗位职责
2014/04/04 职场文书
文明村镇申报材料
2014/05/06 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
体检通知范文
2015/04/21 职场文书