图片轮播 及通知公告上滚动 （无空隙滚动）

Posted 2020-11-19 lovable

图片轮播

1、样式

<style>
        #banner {
            padding: 0px;
            width: 404px;
            height: 260px;
        }

        .slides {
            width: 404px;
            height: 260px;
            overflow: hidden;
            position: relative;
        }

        .slide-pic {
            margin: 0px;
            padding: 0px;
            width: 404px;
            overflow: hidden;
        }

            .slide-pic img {
                width: 404px;
                height: 260px;
            }

            .slide-pic li {
                display: none;
            }

                .slide-pic li.cur {
                    display: block;
                }

        .slide-li {
            z-index: 1;
            margin: 0px;
            padding: 0px;
            left: 40%;
            bottom: 30px;
            position: absolute;
        }

            .slide-li li {
                width: 111.5px;
                height: 10px;
                float: left;
                /*margin-right: 3px;*/
                border-radius: 50%;
                overflow: hidden;
                list-style: none;
            }

            .slide-li a {
                height: 15px;
                color: #000;
                font-size: 12px;
                display: block;
            }

                .slide-li a:hover {
                    color: #d7d7d7;
                    text-decoration: none;
                }

        .op li {
            border: 2px solid transparent;
            background: #d7d7d7;
            filter: alpha(opacity=100);
            opacity: 1;
            width: 10px;
            margin-right: 5px;
        }

            .op li.cur {
                border-color: #48b2e2;
            }

        .slide-txt {
            z-index: 0;
            width: 100%;
            background: rgba(0, 0, 0,0.5);
            height: 47px;
            bottom: 0px;
            left: 0px;
        }

            .slide-txt li {
                text-align: center;
                padding-top: 25px;
                height: 20px;
                width: 100%;
            }

                .slide-txt li a {
                    font-size: 14px;
                    color: white;
                    text-decoration: none;
                }

            .slide-txt span {
                /*display: none;*/
            }




        .news_img .wenhuaBG {
            position: absolute;
            top: 0px;
        }

        .wenhua_cont {
            width: 680px;
            height: 150px;
            overflow: hidden;
            line-height: 29px;
            position: absolute;
            left: 125px;
            top: 83px;
            color: #735440;
        }

        .cont_box3 .tit_border {
            border-top: solid #530b00 7px;
            height: 11px;
            border-bottom: dotted #530b00 1px;
            margin-bottom: 10px;
        }

        .titcont {
            height: 65px;
        }

        .cont_box3 {
            height: 390px;
            width: 1200px;
            padding-top: 35px;
        }

        .product_cont {
            width: 915px;
        }

        .cont_box3 .news_what {
            width: 252px;
            float: right;
        }

            .cont_box3 .news_what .imgps {
                margin-bottom: 10px;
            }

            .cont_box3 .news_what p a {
                color: #735440;
                background: url("../images/home_33.jpg") no-repeat left;
                padding-left: 15px;
                line-height: 28px;
            }

            .cont_box3 .news_what .imgps a {
                background: none;
                padding: 0px;
            }

        .box {
            width: 100%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            _height: 100%;
        }

        .picbox {
            width: 100%;
            height: 285px;
            overflow: hidden;
            position: relative;
        }

        .piclist {
            height: 285px;
            position: absolute;
            left: 0px;
            top: 0px;
        }

            .piclist li { /*margin-right:40px;*/
                padding: 5px;
                float: left;
                width: 212px;
                overflow: hidden;
            }

            .piclist img {
                width: 211px;
                height: 194px;
            }

            .piclist li h4 {
                font-size: 14px;
                line-height: 35px;
                padding-top: 10px;
            }

                .piclist li h4 a {
                    color: #530b00;
                }

            .piclist li img:hover {
                box-shadow: 5px 5px 5px #ccc;
            }

            .piclist li p {
                color: #735440;
                font-size: 12px;
            }

        .swaplist {
            position: absolute;
            left: -3000px;
            top: 0px;
        }

        .og_prev, .og_next {
            width: 30px;
            height: 50px;
            background: url(../images/icon.png) no-repeat;
            background: url(../images/icon_ie6.png) no-repeat9;
            position: absolute;
            top: 75px;
            z-index: 99;
            cursor: pointer;
            filter: alpha(opacity=70);
            opacity: 0.7;
        }

        .og_prev {
            background-position: 0 -60px;
            left: 4px;
        }

        .og_next {
            background-position: 0 0;
            right: 4px;
        }
    </style>

图片轮播样式

2、html

<div class="slides">
        <ul class="slide-pic">
            <li class="" style="display: none;">
                <a href="" target="_blank">
                    <img alt="" src="./明蜀王陵_files/201507211707196638.jpg">
                </a>
            </li>
            <li class="" style="display: none;">
                <a href="" target="_blank">
                    <img alt="" src="./明蜀王陵_files/201508262121384035.png">
                </a>
            </li>
            <li class="cur" style="display: list-item;">
                <a href="" target="_blank">
                    <img alt="" src="./明蜀王陵_files/201507211706431326.jpg">
                </a>
            </li>
            <li class="" style="display: none;">
                <a href="" target="_blank">
                    <img alt="" src="./明蜀王陵_files/201507211706385076.jpg">
                </a>
            </li>
            <li class="" style="display: none;">
                <a href="" target="_blank">
                    <img alt="" src="./明蜀王陵_files/201507211706310076.jpg">
                </a>
            </li>
        </ul>
        <ul class="slide-li op">
            <li class=""></li>
            <li class=""></li>
            <li class="cur"></li>
            <li class=""></li>
            <li class=""></li>
        </ul>
        <ul class="slide-li slide-txt">
            <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">ddd</a></li>
            <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">fdfd</a></li>
            <li class="cur"><a href="http://shu.everythingnewell.com/main.aspx#">fdf</a></li>
            <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">fd</a></li>
            <li class=""><a href="http://shu.everythingnewell.com/main.aspx#">fdf</a></li>
        </ul>
    </div>

图片轮播html

3、js

jQuery(function ($) {

            $(".slide-pic li:first").addClass("cur").show();
            $(".slide-li li:first").addClass("cur").show();
            if ($(".slide-pic").length > 0) {
                var defaultOpts = { interval: 3000, fadeInTime: 300, fadeOutTime: 200 };
                var _titles = $("ul.slide-txt li");
                var _titles_bg = $("ul.op li"); //ol
                var _bodies = $("ul.slide-pic li");
                var _count = _titles.length;
                var _current = 0;
                var _intervalID = null;
                var stop = function () { window.clearInterval(_intervalID); };
                var slide = function (opts) {
                    if (opts) {
                        _current = opts.current || 0;
                    } else {
                        _current = (_current >= (_count - 1)) ? 0 : (++_current);
                    };
                    _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () {
                        _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
                        _bodies.removeClass("cur").eq(_current).addClass("cur");
                    });
                    _titles_bg.removeClass("cur").eq(_current).addClass("cur");
                    //_titles.removeClass("cur").eq(_current).addClass("cur");
                    _titles.hide().eq(_current).show();
                };
                var go = function () {
                    stop();
                    _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval);
                };
                var itemMouseOver = function (target, items) {
                    stop();
                    var i = $.inArray(target, items);
                    slide({ current: i });
                };
                _titles_bg.hover(function () { if ($(this).attr(‘class‘) != ‘cur‘) { itemMouseOver(this, _titles_bg); } else { stop(); } }, go);
                _bodies.hover(stop, go);
                go();
            }
        });

图片轮播js

 

新闻上下滚动

1、样式

<style type="text/css">
        .renav {
            width: 200px;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
        }

            .renav ul {
                padding: 0px;
            }

                .renav ul li {
                    list-style: none;
                    color: white;
                }

                    .renav ul li a {
                        font-size: 14px;
                        list-style: none;
                        color: white;
                    }

                        .renav ul li a:hover {
                            color: #48b2e2;
                        }

            .renav li {
                height: 40px;
            }
    </style>

上下滚动

2、html

<div class="renav">
        <ul style="margin-top: 0px;">
            <li><a>你好</a></li>
            <li><a>成都</a></li>
            <li><a>四川</a></li>
            <li><a>眉山</a></li>
            <li><a>乐山</a></li>
            <li><a>资阳</a></li>
            <li><a>简阳</a></li>
            <li><a>水库</a></li>
        </ul>
    </div>

View Code

3、js

<script>
        $(function () {
            var $this = $(".renav");
            var scrollTimer;
            $this.hover(function () {
                clearInterval(scrollTimer);
            }, function () {
                scrollTimer = setInterval(function () {
                    scrollNews($this);
                }, 2000);
            }).trigger("mouseout");
        });
        function scrollNews(obj) {
            var $self = obj.find("ul:first");
            var lineHeight = $self.find("li:first").height();
            $self.animate({ "margin-top": -lineHeight + "px" }, 600, function () {
                $self.css({ "margin-top": "0px" }).find("li:first").appendTo($self);
            })
        }
    </script>

jquery