使用jQuery實現圖片循環滾動效果，當把光標移動圖上，停止滾動;當把光標從圖上移出后，圖片繼續滾動

?!DOCTYPE?html

成都創新互聯技術團隊10多年來致力于為客戶提供成都網站設計、做網站、品牌網站制作、全網整合營銷推廣、搜索引擎SEO優化等服務。經過多年發展，公司擁有經驗豐富的技術團隊，先后服務、推廣了上千家網站，包括各類中小企業、企事單位、高校等機構單位。

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

?請采納

jquery圖片滾動特效疑問 scrollpic

你需要每次點擊標簽切換的時候 都執行一次點擊箭頭的事件 就可以了（或者初始化一下）

意思就是當你 切換標簽的時候 讓滾動執行完畢

有沒有Jquery圖片滾動相關的教程?

然后在得出滾動內容全部滾出，則又將內容插回來。原理就是：將需要滾動的地方，

取出，

復制1下，

相當于就是無縫滾動了。很簡潔的，

我從0開始寫過1個。

jquery點擊按鈕圖片上下滾動怎么做？

!DOCTYPE html

html lange="en"

head

title點擊左右按鈕圖片橫向滾動/title

meta charset=utf-8" /

style type="text/css"

* { margin:0; padding:0;}

body { font-size:12px;}

.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }

.box

li { display:block; float:left; margin-left:5px; margin-right:5px;

width:100px;

height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center;

cursor:pointer;}

.box li:hover { color:#999; }

.box li.active { background-position:-174px 0; color:#555;cursor:default;}

a.prev,

a.next {background:url()

no-repeat 0 0; display:block;width:23px;height:43px; float:left;

margin:15px 0 0 0; cursor:pointer;}

a.next { background-image:url()}

.scroll_list{ width:10000em; position:absolute; }

/style

!-- 引入jQuery --

script src="" type="text/javascript"/script

script type="text/javascript"

$(function(){

var page= 1;

var i = 4;//每版四個圖片

//向右滾動

$(".next").click(function(){ //點擊事件

var v_wrap = $(this).parents(".scroll"); // 根據當前點擊的元素獲取到父元素

var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區域

var v_cont = v_wrap.find(".box"); //找到視頻展示區域的外圍區域

var v_width = v_cont.width();

var len = v_show.find("li").length; //我的視頻圖片個數

var page_count = Math.ceil(len/i); //只要不是整數，就往大的方向取最小的整數

if(!v_show.is(":animated")){

if(page == page_count){

v_show.animate({left:'0px'},"slow");

page =1;

}else{

v_show.animate({left:'-='+v_width},"slow");

page++;

}

}

});

//向左滾動

$(".prev").click(function(){ //點擊事件

var v_wrap = $(this).parents(".scroll"); // 根據當前點擊的元素獲取到父元素

var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區域

var v_cont = v_wrap.find(".box"); //找到視頻展示區域的外圍區域

var v_width = v_cont.width();

var len = v_show.find("li").length; //我的視頻圖片個數

var page_count = Math.ceil(len/i); //只要不是整數，就往大的方向取最小的整數

if(!v_show.is(":animated")){

if(page == 1){

v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");

page =page_count;

}else{

v_show.animate({left:'+='+ v_width},"slow");

page--;

}

}

});

});

/script

/head

body

!-- 例子 --

div class="scroll" style="margin:0 auto;width:550px;"

!-- "prev page" link --

a class="prev" href="#"/a

div class="box"

div class="scroll_list"

ul

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

li9/li

li10/li

li11/li

li12/li

li13/li

li14/li

li15/li

li16/li

/ul

/div

/div

!-- "next page" link --

a class="next" href="#"/a

/div

/body

/html

分享文章：圖片滾動jquery,圖片滾動操作方法
鏈接分享：http://m.newbst.com/article26/phhecg.html

成都網站建設公司_創新互聯，為您提供自適應網站、小程序開發、用戶體驗、關鍵詞優化、網站導航、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯