管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js、jquery图片动画、动态切换示例代码

复制代码 代码如下:

　　<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>

教程首页 更多教程