正文

jquery滚动图片代码,jquery实现图片滚动

IP云
IP云V管理员/1 阅读
11/20
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用jQuery实现图片循环滚动效果，当把光标移动图上，停止滚动;当把光标从图上移出后，图片继续滚动

 !DOCTYPE html

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

 请采纳

相关问答

Q1: 基于jquery的滚动鼠标放大缩小图片效果

今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项：

复制代码

代码如下:

$(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;//去掉浏览器默认滚动事件

//e.stopPropagation();

return

false;

})

}else{

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

if(event.detail0)

resizeImg(this,false);

else

resizeImg(this,true);

event.preventDefault()//去掉浏览器默认滚动事件

//event.stopPropagation();

})

}

});

function

resizeImg(node,isSmall){

if(!isSmall){

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

}else

{

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

}

}

});

本文的demo请点击这里：滚动鼠标放大缩小图片效果

Q2: jquery实现的图片点击滚动效果

需要添加jquery文件才可以调试

复制代码

代码如下:

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

Q3: 求高手帮我看下我用jquery写的图片滚动代码，在下只有20分，请不要嫌少。

这个好像已经回答过了。$("#roll").eq(7)这里是因为ID值必需唯一的原因，eq(7)出来是空值。

Q4: 网页制作怎么实现图片左右定时自动滚动，用JS jquery代码怎么实现？

函数 描述

$(selector).hide() 隐藏被选元素

$(selector).show() 显示被选元素

$(selector).toggle() 切换（在隐藏与显示之间）被选元素

$(selector).slideDown() 向下滑动（显示）被选元素

$(selector).slideUp() 向上滑动（隐藏）被选元素

$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动

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

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

$(selector).fadeTo() 把被选元素淡出为给定的不透明度

$(selector).animate() 对被选元素执行自定义动画

speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称

自己整理，绝非抄袭!

Q5: jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

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

//加载当前的图片

//同时显示导航的项

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

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

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

},

1000);

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

//计算出将被显示的略缩图所在的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');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$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();

});

//点击略缩图，改变大的图片

$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'});

});

//隐藏当前已经打开了的菜单的函数

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');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

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

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$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);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。