圖片輪播及通知公告上滾動（無空隙滾動）

阿新 • • 發佈：2018-06-15

空隙 pts ext slide cti remove clear lap tco

圖片輪播

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-repeat\9;
            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

圖片輪播及通知公告上滾動（無空隙滾動）

空隙 pts ext slide cti remove clear lap tco 圖片輪播 1、樣式 <style> #banner { padding: 0px; width: 404px;

圖片輪播的兩種實現方式（一）

專案中用到的第一種方法，學習借鑑了https://github.com/qingse/ImageSlideshow 自定義ImageSlideshow，繼承自FrameLayout，在構造方法中，初始化資料： public ImageSlideshow(Context c

angular實現新聞公告滾動和圖片輪播

新聞公告滾動 //template <div id="news"> <div id="scrollBox" [class.scroll_top]="flag"> <span *ngFor="let item of news">{

使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播

value size 靠譜實現圖 active length oot function 想要 1.實現前端輸入的數據在console上顯示上一篇是解決了在前端的輸入信息在cygwin上顯示，這次要給前臺們能看見的數據，因為數據庫裏插入的數據少，所以寫的語句翻來覆去就那幾

【第五篇】Qt學習與使用---自定義的圖片輪播類（滾動播放圖片）

1、目標編寫一個類，可以展示幾張圖片。類似於現在流行的視訊播放器的首頁中出現的滾動展示的控制元件。 2、具體要求（1）一次性展示三張圖片，左中右。中間的圖片至於頂部，旁邊的圖片被覆蓋，只露出一部分。（2）切換圖片的時候，呈現動態效果，需要有一個移動的過程。

viewPager+photoView實現圖片輪播和手勢縮放功能支援手勢縮放的imageView 如何實現相簿左右滑動和手勢縮放如何讓圖片自適應控制元件大小 photoView如何使用(上)

import uk.co.senab.photoview.IPhotoView; import uk.co.senab.photoview.PhotoViewAttacher; import uk.co.senab.photoview.PhotoViewAttacher.OnMatrixChangedList

五滴水：使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播

前言嘚吧嘚三天沒更博了，嘻嘻嘻打自己：3 最近的狀態比開始的時候好太多，能看懂cygwin和console上報的錯誤了，知道到底是縮進出了問題還是我的程式碼邏輯不完整了，找資源也知道哪裡是我要的，也可以找到想要的了·······慢慢來，給自己立個flag ：

Android高階圖片滾動控制元件，編寫3D版的圖片輪播器

大家好，好久不見了，最近由於工作特別繁忙，已經有一個多月的時間沒寫部落格了，我也是深感慚愧。那麼今天的這篇既然是闊別了一個多月的文章，當然要帶來更加給力點的內容了，那麼話不多說，趕快進入到今天的正題吧。說到圖片輪播器，很多的Android應用中都會帶有這個功能，比如說網易新聞

Android之——史上最簡單圖片輪播廣告效果實現

如今的Android開發需求越來越來多，實現效果越來越酷炫，很多Android APP都要實現PC網站上那樣的圖片輪播效果，那麼，這些圖片的輪播效果是如何實現的呢？下面，我就跟大家一起來實現這些酷炫的功能。一、原理首先，將這些要輪播的圖片和一些文字分別放置在不同的資料集合中，程式啟動的時候預設

iOS 簡易無限滾動的圖片輪播器-SDCycleScrollView

@interface ViewController () <</span>SDCycleScrollViewDelegate> @end @implementation ViewController - (void)viewDidLoa

Android高階圖片滾動控制元件，編寫3D版的圖片輪播器一屏顯示多個圖片

大家好，好久不見了，最近由於工作特別繁忙，已經有一個多月的時間沒寫部落格了，我也是深感慚愧。那麼今天的這篇既然是闊別了一個多月的文章，當然要帶來更加給力點的內容了，那麼話不多說，趕快進入到今天的正題吧。說到圖片輪播器，很多的Android應用中都會帶有這個

iOS開發項目實戰——Swift實現圖片輪播與瀏覽

0.10 上網 timer類開發項目 cas hub string obj tle 近期開始開發一個新的iOS應用，自己決定使用Swift。進行了幾天之後，發現了一個非常嚴峻的問題。那就是無論是書籍，還是網絡資源，關於Swift的實在是太少了，隨便一

圖片輪播

切換 .get -c doctype onload left mouseover .class hidden <!DOCTYPE html> <html lang="en"> <head> &

圖片輪播插件slideBox.js

輪播插件 mouseover mat err imei time settime ttr mba 文檔說明地址：http://www.jq22.com/jquery-info385 原來的插件當只有一個圖片的時候有BUG，修改好了，以下為源碼 (function($) {

圖片輪播的手寫代碼

ava absolut 利用 one abs asc src num 輪播之前有人問過我關於圖片輪播的代碼怎麽寫，盡管我是專註於後臺的，但學習一些後臺的僅僅是還是比較有優點的，我有時候總是把簡單的問題復雜化，其原因還是自己對於知識點的掌握不夠堅固，導致不可以在實踐中充

面向對象編程---圖片輪播

lin 好的 order jquer utf-8 use logs num move 今天復習了一下面向對象編程，下面是我的效果圖看著這個圖片你會覺得這沒有什麽，那麽上代碼： html部分： 1 <!DOCTYPE html> 2 <

javascript圖片輪播

tel ++ 播放 ont idt images sna -a 取圖圖片輪播源代碼復制可用 <!doctype html><html lang="en"><head> <meta charset="UTF-8">

實現廣告圖片輪播效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用： 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

JS實例之圖片輪播，實現圖片播放效果

utf length pla get eight code func nsh java 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

js圖片輪播與索引變色

shu gin 標題 solid ansi name 素材 ++ 切換 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

圖片輪播 及通知公告上滾動 （無空隙滾動）

相關推薦

圖片輪播及通知公告上滾動（無空隙滾動）