效果圖:

實現代碼:

hotmarquee

*

{

margin: 0;

padding: 0;

}

body

{

font: 12px;

padding-top: 50px;

padding-right: 200px;

padding-bottom: 100px;

padding-left: 200px;

}

ul

{

list-style: none;

}

img

{

padding: 2px;

border: 1px solid #eee;

}

a

{

outline: none;

}

#imgs

{

width: 410px;

margin-right: auto;

margin-left: auto;

}

.top, .btm

{

background: url(../images/sprite.gif) no-repeat;

overflow: hidden;

}

.top

{

background-position: 0 0;

height: 5px;

}

.btm

{

height: 7px;

}

.mid

{

width: 400px;

padding: 5px 7px 0;

border: 1px solid #999;

}

.mid ul

{

width: 400px;

height: 600px;

background: #fff;

position: relative;

overflow: hidden;

}

.mid ul li

{

width: 400px;

height: 600px;

position: absolute;

left: 490px;

top: 0;

}

.mid ul li.first

{

left: 0;

}

#img_list

{

width: 486px;

height: 20px;

padding-top: 5px;

overflow: hidden;

height: 1%;

}

#img_list a

{

display: block;

width: 14px;

height: 14px;

text-indent: -9999px;

float: left;

margin-right: 5px;

background: url(../images/sprite.gif) no-repeat 0 -13px;

}

#img_list a:hover, #img_list a.active

{

background-position: -14px -13px;

}

var curr = 0, next = 0, count = 0;

$(document).ready(function () {

// 記錄圖片的數量

count = $('#img_list a').size();

t = setInterval('imgPlay()', 3000);

// 鼠標移動到圖片或導航上停止播放，移開后恢復播放

$('#imgs li, #img_list a').hover(function () {

clearInterval(t);

}, function () {

t = setInterval('imgPlay()', 3000);

});

//點擊導航播放到相應的圖片

$('#img_list a').click(function () {

// index()函數返回當前導航的下標

var index = $('#img_list a').index(this);

if (curr != index) {

play(index);

curr = index;

};

return false;

});

});

// 播放圖片的函數

var imgPlay = function () {

next = curr + 1;

// 若當前圖片播放到最后一張，這設置下一張要播放的圖片為第一張圖片的下標

if (curr == count - 1) next = 0;

play(next);

curr++;

// 在當前圖片的下標加1后，若值大于最后一張圖片的下標，則設置下一輪其實播放的圖片下標為第一張圖片的下標，而next永遠比curr大1

if (curr > count - 1) { curr = 0; next = curr + 1; }

};

// 控制播放效果的函數

var play = function (next) {

// 當前的圖片滑到左邊-500px，完成后返回到右邊490px

// 下一張圖片滑到0px處，完成后導航的焦點切換到下一個點上

$('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-500px', 'opacity': '1' }, 'slow', function () {

$(this).css({ 'left': '490px' });

}).end()

.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {

$('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');

});

};

• target="_blank">

  alt="1" />

• alt="2" />

• alt="3" />

• alt="4" />

1 2 3

4

總結

以上是生活随笔為你收集整理的用html制作广告图片切换效果,基于jquery实现图片广告轮换效果代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。