做一个JS实现带渐变可停顿功能的图片轮播

　　

　　

想用JS做一个图片轮播，图片切换时有渐变效果，鼠标游到图片上面时暂停播放，鼠标离开时又继续轮播，在网上查了很多关于图片轮播的JS代码，最终选择了一种方式，经加工测试达到了目的，全部代码如下：

<style type="text/css">

#play {    MARGIN: 0px; OVERFLOW: hidden; WIDTH: 950px; HEIGHT: 483px; POSITION:relative; }

#play IMG {MARGIN: 0px;    BORDER: 0px; wIDTH: 950px; HEIGHT: 483px;}

#play_text {    Z-INDEX: 102; left:0px; top:461px; WIDTH: 950px; height:18px; POSITION:absolute; }

#play_text .play_text1 {    MARGIN: 0 auto; WIDTH: 280px; HEIGHT: 16px; float:right;text-align:right;}

#play_text UL {    DISPLAY: block; FILTER: Alpha(Opacity=80); LIST-STYLE-TYPE: none; opacity: 0.8;FLOAT:right;MARGIN: 0px 5px;}

#play_text UL LI {    DISPLAY: block; FLOAT: left; MARGIN: 1px; WIDTH: 14px; CURSOR: pointer; COLOR: #fff; FONT-FAMILY: "Courier New"; HEIGHT: 14px; BACKGROUND-COLOR: #2f3492; TEXT-ALIGN: center;}

#play_list A {    DISPLAY: block; OVERFLOW: hidden; WIDTH: 950px; HEIGHT: 483px; }

</style>

<SCRIPT src="http://www.ecoswaya.com/images/jquery.js.php" type=text/javascript></SCRIPT>

<SCRIPT>

var t = n = count = 0;

$(function(){

    count = $("#play_list a").size();

    $("#play_list a:not(:first-child)").hide();

    $("#play_text li:first-child").css({"background":"#fff",'color':'#000'});

    $("#play_text li").mouseover(function() {

        var i = $(this).text() - 1;

        n = i;

        if (i >= count) return;

        $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);

        $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#2f3492",'color':'#fff'});

    });

        $("#play_list").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});  

    t = setInterval("showAuto()", 4000);

})

function showAuto()

{

    n = n >= (count - 1) ? 0 : n + 1;

    $("#play_text li").eq(n).trigger('mouseover');

}

</SCRIPT>

<DIV id=play>

<DIV id=play_text>

<DIV class=play_text1>

<UL>

<LI>1</LI><LI>2</LI><LI>3</LI><LI>4</LI><LI>5</LI><LI>6</LI><LI>7</LI></UL></DIV></div>

<DIV id=play_list><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image08.jpg></A><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image01.jpg></A><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image02.jpg></A><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image03.jpg></A><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image04.jpg></A><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image05.jpg></A><A href="http://www.ecosopp.com/home/cn628607" target=_blank><IMG title=进入科士威购物广场 src=http://www.ecoswaya.com/images/image06.jpg></A>

</DIV>

</DIV>

 

    点此查看运行效果！