這個效果就是蝦米站長網(wǎng)首頁那個左右滾動那個效果,我先把代碼發(fā)給你,如果還有問題再追問吧:
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),和平企業(yè)網(wǎng)站建設(shè),和平品牌網(wǎng)站建設(shè),網(wǎng)站定制,和平網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,和平網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
$(".goleft").click(function?()?{????
var?$self?=?$(this).siblings(".scrollcon").children("ul");????
var?lineWidth?=?$self.find("li:last").outerWidth(true);????
!$self.is(":animated")($self.css({"marginLeft":-lineWidth+"px"}).find("li:last").prependTo($self),$self.animate({"marginLeft":0?+"px"},?600));????
?});????
$(".goright").click(function(){????
var?$self?=?$(this).siblings(".scrollcon").children("ul");????
var?lineWidth?=?$self.find("li:first").outerWidth(true);????
!$self.is(":animated")$self.animate({?"marginLeft"?:?-lineWidth?+"px"?},?600,?function(){$self.css({"marginLeft":0?+"px"}).find("li:first").appendTo($self);});????
});???
//這是蝦米站長網(wǎng)的網(wǎng)址:,?你可以先看一下里面的那個效果,如果還不懂,再問我吧。
jQuery輪播直接上插件,
引入插件js,在頁面中定義相關(guān)參數(shù)即可。
----
搜索jquery輪播插件,找個好看的下載,參考修改下就好
思路:可以在每張圖片上添加自定義屬性,此時的自定義屬性用來存放背景色。當(dāng)前圖片輪播到后獲取這個自定義屬性值,給parent設(shè)置背景色即可!
這篇文章主要介紹了jQuery實(shí)現(xiàn)幻燈片焦點(diǎn)圖,可實(shí)現(xiàn)非常炫目時尚的幻燈片效果,非常具有實(shí)用價值,基本能滿足你在網(wǎng)頁上使用幻燈片(焦點(diǎn)圖)效果,需要的朋友可以參考下
幻燈片效果描述:與前兩節(jié)不同的是,這款特效可以打開頁面隨機(jī)選擇切換方式(方向)
運(yùn)行效果截圖如下:
具體代碼如下
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/
titleJquery幻燈片焦點(diǎn)圖插件/title
script
src="js/jquery-1.4a2.min.js"
type="text/javascript"/script
script
src="js/jquery.-1.2.1.min.js"
type="text/javascript"/script
script
type="text/javascript"
//打開頁面隨機(jī)選擇
切換方式(方向),怕增大KinSlideshow.js文件
就沒把隨機(jī)切換寫到里面。
//使用時如有需要隨機(jī)自己寫在前面是一樣的。而且還可以只固定隨機(jī)切換哪幾種。
var
moveStyle
var
rand
=parseInt(Math.random()*4)
switch(rand){
case
0:
moveStyle="left"
;break;
case
1:
moveStyle="right"
;break;
case
2:
moveStyle="down"
;break;
case
3:
moveStyle="up"
;break;
}
$(function(){
$("#KinSlideshow1").KinSlideshow({moveStyle:moveStyle});
})
/script
style
type="text/css"
#KinSlideshow{
overflow:hidden;
width:600px;
height:300px;}
/style
/head
body
h2打開頁面隨機(jī)選擇切換方式(方向)---刷新看看
^_^/h2
div
id="KinSlideshow1"
style="visibility:hidden;"
a
target="_blank"img
src="images/11.png"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/23.png"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/4.jpg"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/5.jpg"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/22.png"
alt="Jquery幻燈片焦點(diǎn)圖插件"
width="600"
height="300"
//a
/div
/body
/html
希望本文所述對大家的Jquery特效設(shè)計有所幫助。