首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery页面图片切换和新闻列表滚动效果的具体实现

Posted in Javascript onSeptember 26, 2013

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果，整理如下：

前段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/css.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/kxbdSuperMarquee.js"></script>
<script type="text/javascript" src="js/indexPic.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
        $('.indexNews div.core').kxbdSuperMarquee({
            isEqual:false,
            distance:18,
            time:4,
            //btnGo:{up:'#goU',down:'#goD'},
            direction:'up'
        });
    });
</script>
</script>
<title></title>
</head>
<body>
<div class="outer">
    <div class="banner">
        <div class="flash_img" id="fadImgs">
            <ul class="img-box"  style="">                <li><a target="_blank" href="#"><img alt="首页AD-1" src="Images/ad-1.jpg" width="1980" height="449"></a></li>
                <li><a target="_blank" href="#"><img alt="首页AD-2" src="images/ad-2.jpg" width="1980" height="449"></a></li>
                <li><a target="_blank" href="#"><img alt="首页AD-3" src="images/ad-3.jpg" width="1980" height="449"></a></li>
                <li><a target="_blank" href="#"><img alt="首页AD-4" src="Images/ad-4.jpg" width="1980" height="449"></a></li>
            </ul>
        </div>
    </div>
    <div class="indexNews">
        <strong class="fl mr10"><a href="#">新闻中心</a></strong>
        <div class="core">
          <ul>
            <li><a href="#" title="新闻1">新闻标题1</a></li>
            <li><a href="#" title="新闻2">新闻标题2</a></li>
            <li><a href="#" title="新闻3”">新闻标题3</a></li>
            <li><a href="#" title="新闻4">新闻标题4</a></li>
            <li><a href="#" title="新闻5">新闻标题5</a></li>
          </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        var len = $(".img-box li").length;
        var imgW = $(".img-box li").width() * len;
        $(".img-box").width(imgW);
        $(".info_slide_dots span").hide();
    })
    $("#fadImgs").slideImg({
        speed: "slow",
        timer: 5000
    });
</script>
</body>
</html>

css文件夹包含一个样式表css.css： 
/* reset.css */
body{background:#fff;color:#444;height:100%;line-height:1.4;}
html{height:100%;overflow-y:scroll;-webkit-text-size-adjust:none;}
body,input,button,textarea,select,h1,h2,h3,h4,h5,h6{font:12px/1.5 Arial,Tahoma,Helvetica,"\5b8b\4f53",sans-serif;}
body,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,blockquote,th,td{margin:0;padding:0;}
img{vertical-align:bottom;}
/* base.css */
a:link,a:visited,a:hover,a:active{cursor:pointer;text-decoration:none;}
a:active,a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}
a:hover {text-decoration:underline;}
li {list-style:none;}
ol li {display:inline;}
/*common.css*/
.outer{position:relative; overflow:hidden; background:url(../images/line.gif) repeat-x bottom; border-bottom:solid 1px #fff; margin:0 auto;}
.banner{position:absolute; left:50%; top:0; margin-left:-990px; height:400px; width:1980px;overflow:hidden;}
    .flash_img {
        overflow: hidden;
        width: 1980px;
        height: 400px;
        position: relative
    }
    .banner{height:400px;}
    .flash_img .img-box {
        position: absolute;
    }
    .flash_img .img-box li{float:left;}
    .flash_img img {
        display: block;
    }
    .flash_item {
        position: absolute;
        right: 510px;
        bottom: 10px;
        height: 12px;
    }
    .flash_item li {
        background:url(../images/flash_item.png) no-repeat right;
        color: #D94B01;
        cursor: pointer;
        float: left;
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-left: 15px;
        text-align: center;
        width: 12px;
    }
    .flash_item li.on 
    {
        background-position:left;
        color: #FFFFFF;
        font-weight: bold;
        height: 12px;
        line-height: 12px;
        width: 12px;
    }
    .flash_item li img {
        display: block
    }    
/*default.css*/
.indexNews{width:700px; height:29px; bottom:0; left:50%; position:absolute; margin-left:-480px; z-index:999;}
.indexNews strong{color:#409dd9;float: left;}
.indexNews strong a{color:#409dd9;text-decoration:none;}
.indexNews .core{height:18px; line-height:18px; overflow:hidden;}
.indexNews .core span{color:#409dd9; margin-right:20px;}
.indexNews .core a{margin-left:10px;color:#666;}
.outer{height:440px;}

js文件夹包含三个文件：jquery-1.7.2.min.js、indexPic.js、kxbdSuperMarquee.js。第一个可以在网上直接下载，第二个是切换图片，第三个滚动新闻列表。

indexPic.js：

document.writeln("<script type=\"text/javascript\" >BAIDU_CLB_SLOT_ID = \"586642\";</script>");
document.writeln("<script type=\"text/javascript\" src=\"http://cbjs.baidu.com/js/o.js\"></script>");
(function($) {
    $.fn.slideImg = function(settings) {
        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };
    $.fn.slideImg.scllor = function($this, settings) {
        var index = 0;
        var scllorer = $(".img-box li", $this);
        var size = scllorer.size();
        var slideW = scllorer.outerWidth();
        var $selItem = $("<ul></ul>", {
            "class": "flash_item",
            html: function() {
                var $selItemHTML = "";
                if (size == 1) {
                    return;
                } else if (size > 1) {
                    for (var i = 0; i < size; i++) {
                        i == 0 ? $selItemHTML += '<li class="on">' : $selItemHTML += '<li class=""></li>';
                    }
                    return $selItemHTML;
                }
            }
        }).appendTo($this);
        var li = $(".flash_item li", $this);
        var showBox = $(".img-box", $this);
        var intervalTime = null;
        li.hover(function() {
            var that = this;
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval() {
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            showBox.animate({ "left": -i * slideW }, settings.speed);
            li.eq(i).addClass("on").siblings().removeClass("on");
        };
    };
})(jQuery);

kxbdSuperMarquee.js： 
/**
 * @classDescription 超级Marquee，可做图片导航，图片轮换
 * @author Aken Li(www.kxbd.com)
 * @date 2009-07-27
 * @dependence jQuery 1.3.2
 * @DOM
 *      <div id="marquee">
 *          <ul>
 *               <li></li>
 *               <li></li>
 *          </ul>
 *      </div>
 * @CSS
 *      #marquee {width:200px;height:50px;overflow:hidden;}
 * @Usage
 *      $('#marquee').kxbdSuperMarquee(options);
 * @options
 *        distance:200,//一次滚动的距离
 *        duration:20,//缓动效果，单次移动时间，越小速度越快，为0时无缓动效果
 *        time:5,//停顿时间，单位为秒
 *        direction: 'left',//滚动方向，'left','right','up','down'
 *        scrollAmount:1,//步长
 *        scrollDelay:20//时长，单位为毫秒
 *        isEqual:true,//所有滚动的元素长宽是否相等,true,false
 *        loop: 0,//循环滚动次数，0时无限
 *        btnGo:{left:'#goL',right:'#goR'},//控制方向的按钮ID，有四个属性left,right,up,down分别对应四个方向
 *        eventGo:'click',//鼠标事件
 *        controlBtn:{left:'#goL',right:'#goR'},//控制加速滚动的按钮ID，有四个属性left,right,up,down分别对应四个方向
 *        newAmount:4,//加速滚动的步长
 *        eventA:'mouseenter',//鼠标事件，加速
 *        eventB:'mouseleave',//鼠标事件，原速
 *        navId:'#marqueeNav', //导航容器ID，导航DOM:<ul><li>1</li><li>2</li><ul>,导航CSS:.navOn
 *        eventNav:'click' //导航事件
 */
(function($){
    $.fn.kxbdSuperMarquee = function(options){
        var opts = $.extend({},$.fn.kxbdSuperMarquee.defaults, options);
        return this.each(function(){
            var $marquee = $(this);//滚动元素容器
            var _scrollObj = $marquee.get(0);//滚动元素容器DOM
            var scrollW = $marquee.width();//滚动元素容器的宽度
            var scrollH = $marquee.height();//滚动元素容器的高度
            var $element = $marquee.children(); //滚动元素
            var $kids = $element.children();//滚动子元素
            var scrollSize=0;//滚动元素尺寸
            var _type = (opts.direction == 'left' || opts.direction == 'right') ? 1:0;//滚动类型，1左右，0上下
            var scrollId, rollId, isMove, marqueeId;
            var t,b,c,d,e; //滚动动画的参数,t:当前时间，b:开始的位置，c:改变的位置，d:持续的时间，e:结束的位置
            var _size, _len; //子元素的尺寸与个数
            var $nav,$navBtns;
            var arrPos = []; 
            var numView = 0; //当前所看子元素
            var numRoll=0; //轮换的次数
            var numMoved = 0;//已经移动的距离
            //防止滚动子元素比滚动元素宽而取不到实际滚动子元素宽度
            $element.css(_type?'width':'height',10000);
            //获取滚动元素的尺寸
            var navHtml = '<ul>';
            if (opts.isEqual) {
                _size = $kids[_type?'outerWidth':'outerHeight']();
                _len = $kids.length;
                scrollSize = _size * _len;
                for(var i=0;i<_len;i++){
                    arrPos.push(i*_size);
                    navHtml += '<li>'+ (i+1) +'</li>';
                }
            }else{
                $kids.each(function(i){
                    arrPos.push(scrollSize);
                    scrollSize += $(this)[_type?'outerWidth':'outerHeight']();
                    navHtml += '<li>'+ (i+1) +'</li>';
                });
            }
            navHtml += '</ul>';
            //滚动元素总尺寸小于容器尺寸，不滚动
            if (scrollSize<(_type?scrollW:scrollH)) return; 
            //克隆滚动子元素将其插入到滚动元素后，并设定滚动元素宽度
            $element.append($kids.clone()).css(_type?'width':'height',scrollSize*2);
            //轮换导航
            if (opts.navId) {
                $nav = $(opts.navId).append(navHtml).hover( stop, start );
                $navBtns = $('li', $nav);
                $navBtns.each(function(i){
                    $(this).bind(opts.eventNav,function(){
                        if(isMove) return;
                        if(numView==i) return;
                        rollFunc(arrPos[i]);
                        $navBtns.eq(numView).removeClass('navOn');
                        numView = i;
                        $(this).addClass('navOn');
                    });
                });
                $navBtns.eq(numView).addClass('navOn');
            }
            //设定初始位置
            if (opts.direction == 'right' || opts.direction == 'down') {
                _scrollObj[_type?'scrollLeft':'scrollTop'] = scrollSize;
            }else{
                _scrollObj[_type?'scrollLeft':'scrollTop'] = 0;
            }
            if(opts.isMarquee){
                //滚动开始
                //marqueeId = setInterval(scrollFunc, opts.scrollDelay);
                marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
                //鼠标划过停止滚动
                $marquee.hover(
                    function(){
                        clearInterval(marqueeId);
                    },
                    function(){
                        //marqueeId = setInterval(scrollFunc, opts.scrollDelay);
                        clearInterval(marqueeId);
                        marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
                    }
                );
                //控制加速运动
                if(opts.controlBtn){
                    $.each(opts.controlBtn, function(i,val){
                        $(val).bind(opts.eventA,function(){
                            opts.direction = i;
                            opts.oldAmount = opts.scrollAmount;
                            opts.scrollAmount = opts.newAmount;
                        }).bind(opts.eventB,function(){
                            opts.scrollAmount = opts.oldAmount;
                        });
                    });
                }
            }else{
                if(opts.isAuto){
                    //轮换开始
                    start();
                    //鼠标划过停止轮换
                    $marquee.hover( stop, start );
                }
                //控制前后走
                if(opts.btnGo){
                    $.each(opts.btnGo, function(i,val){
                        $(val).bind(opts.eventGo,function(){
                            if(isMove == true) return;
                            opts.direction = i;
                            rollFunc();
                            if (opts.isAuto) {
                                stop();
                                start();
                            }
                        });
                    });
                }
            }
            function scrollFunc(){
                var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
                if(opts.isMarquee){
                    if (opts.loop > 0) {
                        numMoved+=opts.scrollAmount;
                        if(numMoved>scrollSize*opts.loop){
                            _scrollObj[_dir] = 0;
                            return clearInterval(marqueeId);
                        } 
                    }
                    var newPos = _scrollObj[_dir]+(opts.direction == 'left' || opts.direction == 'up'?1:-1)*opts.scrollAmount;
                }else{
                    if(opts.duration){
                        if(t++<d){
                            isMove = true;
                            var newPos = Math.ceil(easeOutQuad(t,b,c,d));
                            if(t==d){
                                newPos = e;
                            }
                        }else{
                            newPos = e;
                            clearInterval(scrollId);
                            isMove = false;
                            return;
                        }
                    }else{
                        var newPos = e;
                        clearInterval(scrollId);
                    }
                }
                if(opts.direction == 'left' || opts.direction == 'up'){
                    if(newPos>=scrollSize){
                        newPos-=scrollSize;
                    }
                }else{
                    if(newPos<=0){
                        newPos+=scrollSize;
                    }
                }
                _scrollObj[_dir] = newPos;
                if(opts.isMarquee){
                    marqueeId = setTimeout(scrollFunc, opts.scrollDelay);
                }else if(t<d){
                    if(scrollId) clearTimeout(scrollId);
                    scrollId = setTimeout(scrollFunc, opts.scrollDelay);
                }else{
                    isMove = false;
                }
            };
            function rollFunc(pPos){
                isMove = true;
                var _dir = (opts.direction == 'left' || opts.direction == 'right') ? 'scrollLeft':'scrollTop';
                var _neg = opts.direction == 'left' || opts.direction == 'up'?1:-1;
                numRoll = numRoll +_neg;
                //得到当前所看元素序号并改变导航CSS
                if(pPos == undefined&&opts.navId){
                    $navBtns.eq(numView).removeClass('navOn');
                    numView +=_neg;
                    if(numView>=_len){
                        numView = 0;
                    }else if(numView<0){
                        numView = _len-1;
                    }
                    $navBtns.eq(numView).addClass('navOn');
                    numRoll = numView;
                }
                var _temp = numRoll<0?scrollSize:0;
                t=0;
                b=_scrollObj[_dir];
                //c=(pPos != undefined)?pPos:_neg*opts.distance;
                e=(pPos != undefined)?pPos:_temp+(opts.distance*numRoll)%scrollSize;
                if(_neg==1){
                    if(e>b){
                        c = e-b;
                    }else{
                        c = e+scrollSize -b;
                    }
                }else{
                    if(e>b){
                        c =e-scrollSize-b;
                    }else{
                        c = e-b;
                    }
                }
                d=opts.duration;
                //scrollId = setInterval(scrollFunc, opts.scrollDelay);
                if(scrollId) clearTimeout(scrollId);
                scrollId = setTimeout(scrollFunc, opts.scrollDelay);
            }
            function start(){
                rollId = setInterval(function(){
                    rollFunc();
                }, opts.time*1000);
            }
            function stop(){
                clearInterval(rollId);
            }
            function easeOutQuad(t,b,c,d){
                return -c *(t/=d)*(t-2) + b;
            }
            function easeOutQuint(t,b,c,d){
                return c*((t=t/d-1)*t*t*t*t + 1) + b;
            }
        });
    };
    $.fn.kxbdSuperMarquee.defaults = {
        isMarquee:false,//是否为Marquee
        isEqual:true,//所有滚动的元素长宽是否相等,true,false
        loop: 0,//循环滚动次数，0时无限
        newAmount:3,//加速滚动的步长
        eventA:'mousedown',//鼠标事件，加速
        eventB:'mouseup',//鼠标事件，原速
        isAuto:true,//是否自动轮换
        time:5,//停顿时间，单位为秒
        duration:50,//缓动效果，单次移动时间，越小速度越快，为0时无缓动效果
        eventGo:'click', //鼠标事件，向前向后走
        direction: 'left',//滚动方向，'left','right','up','down'
        scrollAmount:1,//步长
        scrollDelay:10,//时长
        eventNav:'click'//导航事件
    };
    $.fn.kxbdSuperMarquee.setDefaults = function(settings) {
        $.extend( $.fn.kxbdSuperMarquee.defaults, settings );
    };
})(jQuery);

images文件夹用的图标：
JQuery页面图片切换和新闻列表滚动效果的具体实现

JQuery页面图片切换和新闻列表滚动效果的具体实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
深入理解JavaScript系列（45）：代码复用模式（避免篇）详解
Mar 04 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
JavaScript算法教程之sku（库存量单位）详解
Jun 29 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 #Javascript
jquery实现加载等待效果示例
Sep 25 #Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 #Javascript
jquery实现table鼠标经过变色代码
Sep 25 #Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 #Javascript
仿百度的关键词匹配搜索示例
Sep 25 #Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 #Javascript
全表扫描(1) geoserver(1) 匹配(1) lua(3) into outfile(1) 逻辑备份(1) sql模式(1) 索引树扫描(1) 相对定位(1) 异步机制(1)
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
如何取得中文输入的真实长度？
2006/06/24 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
2013/10/11 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
Javascript基础教程之数据类型 （数值 Number）
2015/01/18 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python3实现转换Image图片格式
2018/06/21 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
迪卡侬英国官网：Decathlon英国
2017/04/08 全球购物
亚马逊新加坡官方网站：Amazon.sg
2020/03/25 全球购物
开门红主持词
2014/04/02 职场文书
个人承诺书格式范文
2015/04/29 职场文书
员工保密协议范本，您一定得收藏！很有用！
2019/08/08 职场文书
竞聘演讲报告：基本写作有哪些？附开头范文
2019/10/16 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle