js、jquery图片动画，图片动态切换

本是古典何须时尚 2022-05-09 10:18 278阅读 0赞

<style type="text/css">
    #banner
            {
                padding: 5px;
                position: relative;
                width: 968px;
                height: 293px; /*border: 1px solid #666;*/
                overflow: hidden;
                font-size: 16px;
            }
            #banner_list img
            {
                border: 0px;
            }
            #banner_bg
            {
                margin-bottom: 5px;
                position: absolute;
                bottom: 0;
                background-color: #000;
                height: 30px;
                filter: Alpha(Opacity=30);
                opacity: 0.3;
                z-index: 1000;
                cursor: pointer;
                width: 968px;
            }
            #banner_info
            {
                position: absolute;
                bottom: 4px;
                left: 0px;
                height: 22px;
                color: #fff;
                z-index: 1001;
                cursor: pointer;
            }
            #banner_text
            {
                position: absolute;
                width: 120px;
                z-index: 1002;
                right: 3px;
                bottom: 3px;
            }
            #banner ul
            {
                position: absolute;
                list-style-type: none;
                filter: Alpha(Opacity=80);
                opacity: 0.8;
                z-index: 1002;
                margin: 0;
                padding: 0;
                bottom: 10px;
                right: 5px;
                height: 20px;
            }
            #banner ul li
            {
                padding: 0 8px;
                line-height: 18px;
                float: left;
                display: block;
                color: #FFF;
                border: #e5eaff 1px solid;
                background-color: #6f4f67;
                cursor: pointer;
                margin: 0;
                font-size: 16px;
            }
            #banner_list a
            {
                /* position: absolute;*/
                width: 968px;
                height: 293px;
                margin: 0px;
                padding: 0px;
            }
            #banner_list
            {
                margin: 0px;
                padding: 0px;
                width: 968px;
                height: 293px;
                border: #e7e7e7 1px solid;
            }
    </style>

<script type="text/javascript">
            var t = n = 0, count;
            $(function () {
                count = $("#banner_list a").length;
                $("#banner_list a:not(:first-child)").hide();
                $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
                $("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr('href'), "_blank") });
                $("#banner li").click(function () {
                    var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4 
                    n = i;
                    if (i >= count) return;
                    $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
                    $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr('href'), "_blank") })
                    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                    $(this).css({ "background": "#be2424", 'color': '#000' }).siblings().css({ "background": "#6f4f67", 'color': '#fff' });
                });
                t = setInterval("showAuto()", 4000);
                $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });//4秒钟切换一张图片});
            function showAuto() {
                n = n >= (count - 1) ? 0 : ++n;
                $("#banner li").eq(n).trigger('click');
            } 
        </script>

<div id="banner">
                                    <div id="banner_bg">
                                    </div>
                                    
                                    <div id="banner_info">
                                    </div>
                                    
                                    <ul>
                                        <li>1</li>
                                        <li>2</li>
                                        <li>3</li>
                                        <li>4</li>
                                    </ul>
                                    <div id="banner_list">
                                        <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgoneURL"]:""%>' target="_blank">
                                            <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgone"]:"Images/Singapore.jpg"%>'
                                                title="" alt="" width="968px" height="293px" border="0" /></a> <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtowURL"]:""%>'
                                                    target="_blank">
                                                    <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgtow"]:"Images/Malaysia.jpg"%>'
                                                        title="" alt="" width="968px" height="293px" border="0" /></a> <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthreeURL"]:""%>'
                                                            target="_blank">
                                                            <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgthree"]:"Images/HongKong.jpg"%>'
                                                                title="" alt="" width="968px" height="293px" border="0" /></a>
                                        <a href='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfourURL"]:""%>' target="_blank">
                                            <img src='<%:DicFlashImg!=null?DicFlashImg["PFI_FlashImgfour"]:"Images/flash4.jpg"%>'
                                                title="" alt="" width="968px" height="293px" border="0" /></a>
                                    </div>
                                </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter AnimatedSwitcher 实现优美的图片切换动画

> 志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会

忘是亡心i/ 2023年10月07日 17:25/ 0 赞/ 27 阅读

相关 java 图片动画_java 小动画图片出不来。。。。。。。。。。。。。

importjava.applet.\;importjava.awt.\;importjava.io.\;importjava.net.\;publicclassflashse

本是古典何须时尚/ 2022年11月06日 10:55/ 0 赞/ 158 阅读

相关 JavaScript图片切换实现

![效果图][SouthEast] html代码 <div id="pic"> <img src="" alt="" />

绝地灬酷狼/ 2022年09月30日 15:59/ 0 赞/ 256 阅读

相关图片切换效果!

学了一段时间tween算法,也学习了一些好的代码,也写了一些例子,不过都是模仿的, 但这个绝对是原创, HOHO <style type="text/css"> .s

忘是亡心i/ 2022年08月06日 05:17/ 0 赞/ 247 阅读

相关图片切换

![切换效果图][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Love The Way You Lie/ 2022年06月16日 13:29/ 0 赞/ 201 阅读

相关 3D图片切换

在网页中图片轮换效果有很多，今天分享下这个3d效果的图片轮换；先给出效果图： ![这里写图片描述][SouthEast] HTML代码： <div cl

末蓝、/ 2022年06月16日 05:48/ 0 赞/ 431 阅读

相关 js、jquery图片动画，图片动态切换

<style type="text/css"> banner { padding: 5px;

本是古典何须时尚/ 2022年05月09日 10:18/ 0 赞/ 279 阅读

相关 jQuery动画、图片切换 KinSlideshow jQuery 多样式图片幻灯片插件

$(function(){ $("KinSlideshow").KinSlideshow({ moveS

忘是亡心i/ 2022年04月06日 15:10/ 0 赞/ 319 阅读

相关图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/T

ゝ一纸荒年。/ 2021年10月08日 05:30/ 0 赞/ 485 阅读

相关 jquery实现图片切换

<div> <img class="imgclick" src="img/pic1.png" /> </div>

布满荆棘的人生/ 2021年09月19日 10:10/ 0 赞/ 459 阅读