使用jQuery實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果，當(dāng)把光標(biāo)移動(dòng)圖上，停止?jié)L動(dòng);當(dāng)把光標(biāo)從圖上移出后，圖片繼續(xù)滾動(dòng)

?!DOCTYPE?html

游仙網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

html?lang="en"

head

meta?charset="UTF-8"

link?rel="stylesheet"?href=""

style

.swiper-wrapper?{

height:?300px;

}

.swiper-slide?{

display:?flex;

justify-content:?center;

align-items:?center;

}

.swiper-slide:nth-child(1)?{

background:?red;

}

.swiper-slide:nth-child(2)?{

background:?green;

}

.swiper-slide:nth-child(3)?{

background:?blue;

}

/style

/head

body

div?class="swiper-container"

div?class="swiper-wrapper"

div?class="swiper-slide"Slide?1/div

div?class="swiper-slide"Slide?2/div

div?class="swiper-slide"Slide?3/div

/div

/div

/body

script?src=""/script

script?language="javascript"

var?mySwiper?=?new?Swiper(document.querySelector(".swiper-container"),?{

autoplay:?true,

})

document.querySelector('.swiper-container').onmouseover?=?()?=?{

mySwiper.autoplay.stop();

}

document.querySelector('.swiper-container').onmouseout?=?()?=?{

mySwiper.autoplay.start();

}

/script

/html

?請(qǐng)采納

基于jquery的滾動(dòng)鼠標(biāo)放大縮小圖片效果

今天要出個(gè)鼠標(biāo)滾動(dòng)放大縮小圖片的功能，看似很簡(jiǎn)單，從網(wǎng)上一搜，出現(xiàn)的都是onmousewheel的例子，全部只支持IE瀏覽器，結(jié)果查出火狐有對(duì)應(yīng)的DOMMouseScroll來(lái)處理這個(gè)功能，代碼如下,并加上注意的注釋項(xiàng)：

復(fù)制代碼

代碼如下:

$(function(){

$(".body

img").each(function(){

if($.browser.msie){

$(this).bind("mousewheel",function(e){

var

e=e||event,v=e.wheelDelta||e.detail;

if(v0)

resizeImg(this,false);//放大圖片唄

else

resizeImg(this,true);//縮小圖片嘍

window.event.returnValue

=

false;//去掉瀏覽器默認(rèn)滾動(dòng)事件

//e.stopPropagation();

return

false;

})

}else{

$(this).bind("DOMMouseScroll",function(event){

if(event.detail0)

resizeImg(this,false);

else

resizeImg(this,true);

event.preventDefault()//去掉瀏覽器默認(rèn)滾動(dòng)事件

//event.stopPropagation();

})

}

});

function

resizeImg(node,isSmall){

if(!isSmall){

$(node).height($(node).height()*1.2);

}else

{

$(node).height($(node).height()*0.8);

}

}

});

本文的demo請(qǐng)點(diǎn)擊這里：滾動(dòng)鼠標(biāo)放大縮小圖片效果

jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果

需要添加jquery文件才可以調(diào)試

復(fù)制代碼

代碼如下:

script

type="text/javascript"

src="jquery.js"/script

script

type="text/javascript"

$(function(){

//alert($('#findclose').closest('div').attr('id'));

var

pic_length

=

$('#gd

li').length;

var

n

=

0;

$('#toleft').click(function(){

if

(!$('#gd').is(':animated')

n)

{

$('#gd').animate({left:'+=120px'},500);

n--;

}

});

$('#toright').click(function(){

if

(!$('#gd').is(':animated')

pic_length

n+5)

{

$('#gd').animate({left:'-=120px'},500);

n++;

}

});

})

/script

style

type="text/css"

ul{

list-style:none;

margin:0px;

padding:0px;

text-align:center;

}

#gd

li

{

width:90px;

height:80px;

display:block;

float:left;

margin:9px

15px;

}

/style

div

style="width:702px;height:100px;background:#ccc;margin:0

auto"

div

style="width:30px;height:30px;background:red;margin:35px

10px;float:left;cursor:pointer;"

id="toleft"/div

div

style="width:600px;height:98px;float:left;border:1px

solid

#777;overflow:

hidden;"

ul

style="list-style:

none

outside

none;height:98px;display:block;background:yellow;position:relative;width:9999em;"

id="gd"

li

style="background:red"/li

li

style="background:orange"/li

li

style="background:green"/li

li

style="background:navy"/li

li

style="background:blue"/li

li

style="background:purple"/li

li

style="background:pink"/li

li

style="background:gray"/li

/ul

/div

div

style="width:30px;height:30px;background:red;margin:35px

10px;float:left;cursor:pointer;"

id="toright"/div

/div

求高手幫我看下我用jquery寫的圖片滾動(dòng)代碼，在下只有20分，請(qǐng)不要嫌少。

這個(gè)好像已經(jīng)回答過(guò)了。$("#roll").eq(7)這里是因?yàn)镮D值必需唯一的原因，eq(7)出來(lái)是空值。

網(wǎng)頁(yè)制作怎么實(shí)現(xiàn)圖片左右定時(shí)自動(dòng)滾動(dòng)，用JS jquery代碼怎么實(shí)現(xiàn)？

函數(shù) 描述

$(selector).hide() 隱藏被選元素

$(selector).show() 顯示被選元素

$(selector).toggle() 切換（在隱藏與顯示之間）被選元素

$(selector).slideDown() 向下滑動(dòng)（顯示）被選元素

$(selector).slideUp() 向上滑動(dòng)（隱藏）被選元素

$(selector).slideToggle() 對(duì)被選元素切換向上滑動(dòng)和向下滑動(dòng)

$(selector).fadeIn() 淡入被選元素

$(selector).fadeOut() 淡出被選元素

$(selector).fadeTo() 把被選元素淡出為給定的不透明度

$(selector).animate() 對(duì)被選元素執(zhí)行自定義動(dòng)畫

speed 參數(shù)規(guī)定顯示或隱藏的速度。可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。

callback 參數(shù)是在 hide 或 show 函數(shù)完成之后被執(zhí)行的函數(shù)名稱

自己整理，絕非抄襲!

jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)實(shí)例

本文實(shí)例講述了jQuery實(shí)現(xiàn)帶滾動(dòng)導(dǎo)航效果的全屏滾動(dòng)相冊(cè)。分享給大家供大家參考。具體如下：

運(yùn)行效果圖如下：

主要代碼如下：

$(function()

{

//加載時(shí)的圖片

var

$loader=

$('#st_loading');

//獲取的ul元素

var

$list=

$('#st_nav');

//當(dāng)前顯示的圖片

var

$currImage

=

$('#st_main').children('img:first');

//加載當(dāng)前的圖片

//同時(shí)顯示導(dǎo)航的項(xiàng)

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出導(dǎo)航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//計(jì)算出將被顯示的略縮圖所在的div元素的寬度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每張略縮圖占有180像素的寬度和3像素的間距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是這元素具有滾動(dòng)性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//點(diǎn)擊菜單項(xiàng)目的時(shí)候（向上向下箭頭切換）

//使略縮圖的div層顯示和隱藏當(dāng)前的

//打開(kāi)菜單（如果有的話）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//點(diǎn)擊略縮圖，改變大的圖片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隱藏當(dāng)前已經(jīng)打開(kāi)了的菜單的函數(shù)

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是當(dāng)前的略縮圖div層滾動(dòng)

//當(dāng)鼠標(biāo)移至菜單層的時(shí)候會(huì)自動(dòng)地進(jìn)行滾動(dòng)

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//獲取菜單的寬度

var

divWidth

=

$outer.width();

//移除滾動(dòng)條

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一張圖片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//當(dāng)用戶鼠標(biāo)離開(kāi)菜單的時(shí)候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。