實現(xiàn)即時通信軟件商城點擊左右滾動框架焦點圖特效的代碼！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " " http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-過渡。" DTD "

html xmlns=" http://。w3。" org/1999/XHTML "

頭

(資料圖片)

meta http-equiv=" Content-Type " Content=" text/html；charset=gb2312" /

style type="text/css "

body { font-size:12px；顏色：# 222;字體系列：凡爾登、阿里亞、Helvetica、無襯線；背景：# f0f0f0}

ul，李{列表式：無；邊距：0px填充：0px}

img { border:0；}

/* 仿即時通信軟件商城點擊左右滾動框架焦點圖特效插件*/。焦點{寬度：800像素高度：280像素溢出：隱藏；位置：相對；}。焦點ul {高度：380像素位置：絕對；}。focus ul Li { float:left；寬度：800像素高度：280像素溢出：隱藏；位置：相對；背景：# 000;}。聚焦ul李部門{位置：絕對；溢出：隱藏；}。專注btnBg {位置：絕對；寬度：800像素高度：20px左：0;底部：0;背景：# 000;顯示：無；}。專注btn {位置：絕對；寬度：780像素高度：23px填充：0px 10px 0px 10px右：0;底部：6px文本對齊：右對齊；}。專注BTN span { display:inline-block；_ display:inline；_ zoom:1；寬度：25px高度：24px行高：24px文本對齊：居中；_ font-size:0；左邊距：5px光標：指針；背景：# fff}。專注BTN跨度。在{ background:# fff；}。專注preNext { width:45px；高度：100像素位置：絕對；頂配：90px背景：url(img/sprite.png)無重復0 0;光標：指針；}。專注pre { left:0；}。專注。下一個{右：0;背景-位置：右上；}

/風格

腳本類型=" text/JavaScript " src=" js/jquery。量滴js "/腳本

腳本類型=" text/JavaScript " src=" js/sl。js "/腳本

腳本類型="文本/javascript "

$(文檔)。ready(function(){

$.焦點(" #焦點001 ")；

$.焦點(" #焦點002 ")；

});

/腳本

/頭

身體

h1/h1

div class="focus" id="focus001 "

保險商實驗所

lia href=" http://www。51學點腦。com/" target=" _ blank " img src=" img/03。jpg " alt=" jquery特效//a/li

lia href=" http://www。51學點腦。com/" target=" _ blank " img src=" img/02。jpg "http://a/Li

lia href=" http://www。51學點腦。com/" target=" _ blank " img src=" img/03。jpg " alt="仿即時通信軟件商城點擊左右滾動框架焦點圖特效//a/li

/ul

/div

p修改的幾個地方：1、隱藏了半透明背景條，2、把那個小常條滑塊讀出了1234這些數(shù)字。你不喜歡這樣你可以修改樣式和自己改動下框架代碼100元/人

p調用方法：很簡單，$.焦點(" #焦點001 ")；一些參數(shù)設置，可以修改射流研究…中的設置，源作者已經注釋的很清楚了100元/人

/body

/html

射流研究…

$(function() {

jQuery.focus=function(slid) {

var sWidth=$(slid).width()；//獲取焦點圖的寬度（顯示面積)

var len=$(slid).查找(" ul li ").長度；//獲取焦點圖個數(shù)

定義變量指數(shù)=0;

var picTimer

//以下代碼添加數(shù)字按鈕和按鈕后的半透明條，還有上一頁、下一頁兩個按鈕

var BTN=" div class=" btnBg "/div BTN；

for(var I=0；我leni ) {

var ii=I 1；

BTN=" span " ii "/span；

}

BTN="/div div class=" preNext pre "/div div class=" preNext next "/div；

$(滑)。追加(BTN)；

$(滑)。查找(" div.btnBg ").css("不透明度",0.5);//find()函數(shù)返回在字符串中子字符串的位置。

//為小按鈕添加鼠標滑入事件，以顯示相應的內容

$(slid " div.btn span ").css("不透明度",0.4)。mouseenter(function() {

index=$(slid " .BTN斯潘).指數(shù)（這個);

展示圖片(索引);

}).等式(0)。觸發(fā)器(‘鼠標回車’)；

//上一頁、下一頁按鈕透明度處理

$(滑動的。preNext).css("不透明度",0.2)。hover(function() {

$(這個)。停止（對，錯)。動畫({"opacity":"0.5"}，300)；

}，function() {

$(這個)。停止（對，錯)。動畫({"opacity":"0.2"}，300)；

});

//上一頁按鈕

$(滑動的。前")。單擊（函數(shù)(){

index-=1；

if(index==-1){ index=len-1；}

展示圖片(索引);

});

//下一頁按鈕

$(滑動的。下一個)。單擊（函數(shù)(){

指數(shù)=1;

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

showPics(索引)；

});

//這個例子是左右滾動，即所有l(wèi)i元素在同一行向左浮動，所以這里需要計算外圍ul元素的寬度。

$(slid " ul ")。css("width "，sWidth *(len))；

//鼠標向上滑動焦點圖時自動停止播放，滑出時自動開始播放。

$(滑)。hover(function() {

clear interval(picTimer)；

}，function() {

picTimer=setInterval(function(){

showPics(索引)；

指數(shù)；

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

},4000);//這個4000代表自動播放的間隔，以毫秒為單位。

}).觸發(fā)器(" mouse leave ")；

//顯示圖片功能，根據(jù)接收到的索引值顯示相應的內容

函數(shù)showPics(index) {//正常切換

var now left=-index * sWidth；//根據(jù)索引值計算ul元素的左值

$(slid " ul ")。停止(對，錯)。animate({"left":nowLeft}，300)；//通過animate()調整ul元素滾動到計算的位置

$(滑動的"。BTN span’)。removeClass("on ")。eq(指數(shù))。add class(“on”)；//切換到當前按鈕的選定效果

$(滑動的"。BTN span’)。停止(對，錯)。動畫({"opacity":"0.4"}，300)。eq(指數(shù))。停止(對，錯)。動畫({"opacity":"1"}，300)；//切換到當前按鈕的選定效果

}

};

});

猜猜你喜歡什么：

1.jS獲取鼠標坐標和鼠標像素。

2.如何用js實現(xiàn)簡單的鼠標跟隨效果？

3.3.js如何獲取鼠標在div中的相對位置？

4.js設置鼠標光標形狀

5.如何使用5的鼠標手勢？Chrome瀏覽器

本文到此結束，希望對大家有所幫助。