首页
所有分类
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 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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
cvzone(1) mediapipe(1) while(1) 无限迭代(1) sched(1) re模块(2) 分词器(1) 事件调度器(1) okenizer(1) for(1)
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
如何使用php输出时间格式
2013/08/31 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
优秀学生自我鉴定范例
2013/12/18 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
共青团员自我评价
2015/03/10 职场文书
交通事故起诉书
2015/05/19 职场文书
会议室管理制度范本
2015/08/06 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers