首页
所有分类
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多线程的实现方法
May 08 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
javascript常见操作汇总
Sep 03 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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) 电台频率(32) Harman Kardon(1) 长波(3) 收音机(62) 保养(1) 广播(8) 下载(1) 无线电(12) 短波(8)
You might like
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php对象工厂类完整示例
2018/08/09 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python 两个数据库postgresql对比
2019/10/21 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
雅诗兰黛澳大利亚官网：Estée Lauder澳大利亚
2019/05/31 全球购物
Kendra Scott官网：美国领先的时尚配饰品牌
2020/10/22 全球购物
AOP的定义以及作用
2013/09/08 面试题
求网格中的黑点分布
2013/11/06 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
支行行长岗位职责
2015/02/15 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers