首页
所有分类
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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
js打造数组转json函数
Jan 14 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
js实现登录注册框手机号和验证码校验（前端部分）
Sep 28 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 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
dict(1) Vite(1) 字符画(1) callback(1) 脚本(1) 数据备份(2) expdp(1) hook(1) cudnn(1) 热力图(1)
You might like
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
简单谈谈python中的多进程
2016/11/06 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python3 assert断言实现原理解析
2020/03/02 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
澳大利亚家具和家居用品在线：BROSA
2017/11/02 全球购物
Michael Kors香港官网：美国奢侈品品牌
2019/12/26 全球购物
POS解决方案：MUNBYN（热敏打印机、条形码扫描仪）
2020/06/09 全球购物
物业招聘计划书
2014/01/10 职场文书
个人近期表现材料
2014/02/11 职场文书
暑期研修感言
2014/02/17 职场文书
物业经理自我鉴定
2014/03/03 职场文书
小班上学期评语
2014/05/05 职场文书
小学庆六一活动总结
2014/08/28 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2015年司法局工作总结
2015/05/22 职场文书
郭明义电影观后感
2015/06/08 职场文书
委托收款证明
2015/06/23 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
详解nginx location指令
2022/01/18 Servers
css3应用示例：新增的选择器
2022/03/16 HTML / CSS