基于JQuery制作的產品廣告效果

效果圖.如下：

動畫效果介紹：這組廣告效果是打開頁面后圖片會自動播放，從1-5共計5張圖片，如果屬標放到右下角的1、2、3、4、5列表上，可以自由進行切換到自己想看的圖片上去。圖片切換是由下到上變換的。

制作思路：先將這5張圖片分別放入到ul的5個li列表中,

《1》求出圖片個的總個數. 并當我們如果在單擊1.2.3.4.5時就將它對應的數字傳過去，就它顯示對應的圖片。

《2》如果屬標放上，就停止動畫(可以利用clearIntval() )，如果屬標移到，我們可以利用 setIntval(函數，時間) 去每隔3000毫秒去執行一下這個函數一次。

《3》完成這個動畫函數。在這個函數中首先我們可以得到這個動畫區域(.slider)的高度。再利用animate自定義動畫函數實現在TOP位置上變化。并且給當前li中的數字加上高亮效果。

《4》還有一點就是要使這里的TOP變化正常，一定要在當前區域的父標記(.ad)中設置"position:relative;" 一切就都已OK了。制作代碼如下：

1》html結構如下：

復制代碼 代碼如下:

• 1
• 2
• 3
• 4
• 5

2》jquery 代碼如下:

復制代碼 代碼如下:

//超鏈接文字提示

$(function(){

var len = $(".num >li").length;

var index = 0;

var adTimer;

$(".num li").mouseover(function(){

index = $(".num li").index(this); //這里的 " this " 可以換成 " $(this) "

showImg(index);

}).eq(0).mouseover(); //用來初如化，當打開頁面時，做第一個圖片為屬標放上時去觸發動畫.

//以為對象, 屬標滑入停止動畫，屬標滑出開始動畫

$(".ad").hover(function(){

clearInterval(adTimer);

},function(){

adTimer = setInterval(function(){

showImg(index);

index++;

if( index == len ){ index=0; }

} , 3000);

}).trigger("mouseleave");

})

//通過給定的的索引 顯示不同的圖片

function showImg(index){

var adHeight = $(".content_right .ad").height();

$(".slider").stop(true,false).animate( {"top": -adHeight*index},1000 );

$(".num li").removeClass("on")

.eq(index).addClass("on");

}

3》對應的CSS樣式：

復制代碼 代碼如下:

.content_right{

background:#eee;

border : 1px solid #AAAAAA;

width: 586px;

float:left;

}

.content_right .ad {

margin-bottom:10px;

width:586px;

height:150px;

overflow:hidden;

position:relative;

}

.content_right .slider,

.content_right .num {

position:absolute;

}

.content_right .slider li{

list-style:none;

display:inline;

}

.content_right .slider img{

width:586px;

height:150px;

display:block;

}

.content_right .num{

right:5px;

bottom:5px;

}

.content_right .num li{

float: left;

width: 16px;

height: 16px;

line-height: 16px;

text-align: center;

font-family: Arial;

font-size: 12px;

color: #FF7300;

background-color: #fff;

border: 1px solid #FF7300;

overflow: hidden;

margin: 3px 1px;

cursor: pointer;

}

.content_right .num li.on{

width: 21px;

height: 21px;

line-height: 21px;

color: #fff;

background-color: #FF7300;

font-size: 16px;

margin: 0 1px;

border: 0;

font-weight: bold;

}相關閱讀:

js 模仿網上的限時搶購效果

原創]如何回到先前的頁面的方法多中語言" target="_blank">[原創]如何回到先前的頁面的方法多中語言

PHP5經典教程之文件操作

Wine中中文存在很多的亂碼怎么解決？

Mysql權威指南讀書筆記(四)

什么叫標準網頁設計?

document.all與WEB標準

javascript跨域刷新實現代碼

使用yui3實現最簡單拖動

javascript關鍵字加亮加連接

css hack 記錄

55種網頁常用小技巧(javascript)

javascript(對象.屬性)集錦之二

正則表達式 表示 非指定字符串開頭的正則

總結

以上是生活随笔為你收集整理的php产品效果图,jQuery_基于JQuery制作的产品广告效果，效果图.如下： 动画效果介绍 - phpStudy...的全部內容，希望文章能夠幫你解決所遇到的問題。

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