實(shí)現(xiàn)即時(shí)通信軟件商城點(diǎn)擊左右滾動(dòng)框架焦點(diǎ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；}

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

/風(fēng)格

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

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

腳本類型="文本/javascript "

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

$.焦點(diǎn)(" #焦點(diǎn)001 ")；

$.焦點(diǎn)(" #焦點(diǎn)002 ")；

});

/腳本

/頭

身體

h1/h1

div class="focus" id="focus001 "

保險(xiǎn)商實(shí)驗(yàn)所

lia href=" http://www。51學(xué)點(diǎn)腦。com/" target=" _ blank " img src=" img/03。jpg " alt=" jquery特效//a/li

lia href=" http://www。51學(xué)點(diǎn)腦。com/" target=" _ blank " img src=" img/02。jpg "http://a/Li

lia href=" http://www。51學(xué)點(diǎn)腦。com/" target=" _ blank " img src=" img/03。jpg " alt="仿即時(shí)通信軟件商城點(diǎn)擊左右滾動(dòng)框架焦點(diǎn)圖特效//a/li

/ul

/div

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

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

/body

/html

射流研究…

$(function() {

jQuery.focus=function(slid) {

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

var len=$(slid).查找(" ul li ").長(zhǎng)度；//獲取焦點(diǎn)圖個(gè)數(shù)

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

var picTimer

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

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ù)返回在字符串中子字符串的位置。

//為小按鈕添加鼠標(biāo)滑入事件，以顯示相應(yīng)的內(nèi)容

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

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

展示圖片(索引);

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

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

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

$(這個(gè))。停止（對(duì)，錯(cuò))。動(dòng)畫({"opacity":"0.5"}，300)；

}，function() {

$(這個(gè))。停止（對(duì)，錯(cuò))。動(dòng)畫({"opacity":"0.2"}，300)；

});

//上一頁按鈕

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

index-=1；

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

展示圖片(索引);

});

//下一頁按鈕

$(滑動(dòng)的。下一個(gè))。單擊（函數(shù)(){

指數(shù)=1;

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

showPics(索引)；

});

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

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

//鼠標(biāo)向上滑動(dòng)焦點(diǎn)圖時(shí)自動(dòng)停止播放，滑出時(shí)自動(dòng)開始播放。

$(滑)。hover(function() {

clear interval(picTimer)；

}，function() {

picTimer=setInterval(function(){

showPics(索引)；

指數(shù)；

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

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

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

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

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

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

$(slid " ul ")。停止(對(duì)，錯(cuò))。animate({"left":nowLeft}，300)；//通過animate()調(diào)整ul元素滾動(dòng)到計(jì)算的位置

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

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

}

};

});

猜猜你喜歡什么：

1.jS獲取鼠標(biāo)坐標(biāo)和鼠標(biāo)像素。

2.如何用js實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)跟隨效果？

3.3.js如何獲取鼠標(biāo)在div中的相對(duì)位置？

4.js設(shè)置鼠標(biāo)光標(biāo)形狀

5.如何使用5的鼠標(biāo)手勢(shì)？Chrome瀏覽器

本文到此結(jié)束，希望對(duì)大家有所幫助。