Javascript和jQuery WordPress 圖片輪播插件，內容滾動插件，先後切換幻燈片形式顯示

時間 2019-11-18

標籤 javascript jquery wordpress 圖片插件內容滾動先後切換幻燈片形式顯示欄目 JavaScript 简体版

原文原文鏈接

用於在有限的網頁空間內展現一組產品圖片或者照片，同時還有很是吸引人的動畫效果。本文向你們推薦12款實用的 jQuery 圖片輪播效果插件，幫助你在你的項目中加入一些效果精美的圖片輪播效果，但願這些插件可以幫助到你。
Nivo Slider
首先推薦的這款插件號稱世界上最棒的圖片輪播插件，有獨立的 jQuery 插件和 WordPress 插件兩個版本。
目前下載量已經突破 1,800,000 次！jQuery 獨立版本的插件主要有以下特點：
✓ 16個獨特的過渡效果✓ 簡潔和有效的標記✓ 加載參數設置✓ 內置方向和導航控制✓ 壓縮版本大小隻有12KB✓ 支持連接圖像✓ 支持 HTML 標題✓ 3套精美光滑的主題✓ 在MIT許可下無償使用✓ 支持響應式設計javascript

插件下載效果演示
3D Image Slider
很是很是酷的 3D 圖片滑動效果，有五種絢麗的效果演示。
立體效果是基於CSS3實現的，請使用最新 Chrome，Firefox 和 Safari 瀏覽器瀏覽效果。
對於不支持 CSS3 的瀏覽器提供了優雅的降級處理，這款插件還有詳細的製做教程。php

插件下載效果演示
Flexslider
FlexSlider 是一款輕量的響應式 jQuery 內容滾動插件，可以幫助你在項目輕鬆的建立漂亮的內容滾動效果。
這款插件也是 2011 年度最佳 jQuery 插件，今年被 WooThemes 收購併發佈了2.0版本，所以繼續入選 2012 年度榜單。
主要特點
✓ 簡單的，語義化的標籤；✓ 支持全部主流的瀏覽器；✓ 水平/垂直滑動和淡入淡出動畫；✓ 支持多個滑塊，回調 API，以及更多；✓ 觸摸滑動支持硬件加速；✓ 可以自定義導航選項。✓ 兼容最新版本的 jQuery。
Responsive jQuery Slider Plugins
插件下載效果演示
Elastislide
Elastislide 是一款很是優秀的響應式 jQuery 幻燈片插件，集成了 Touchwipe 插件以支持觸屏設備。
提供了四種效果
✓ 水平圖片傳送帶✓ 垂直圖片傳送帶✓ 固定在屏幕底部✓ 縮略圖形式預覽
這款插件也有詳細的製做教程，很是詳細，能夠學習到插件的製做方法。
Responsive jQuery Slider Plugins
插件下載效果演示
3D Gallery
特別推薦！精緻的立體圖片切換效果，特別適合企業產品展現，可當即用於實際項目中。
支持導航和自動播放功能，基於 CSS3 實現，推薦使用最新的 Chrome，Firefox 和 Safari 瀏覽器瀏覽效果。
60+ Impressive Jquery Image Gallery, Lightbox, Tabs, Menu, Text Effects
插件下載效果演示
Image Transitions
基於 jQuery 和 CSS3 動畫實現的圖片過渡效果。
共有Flip、Rotation、Multi-flip、Cube、Unfold等6種效果。
這款插件有詳細的製做教程能夠參考學習。
60+ Impressive Jquery Image Gallery, Lightbox, Tabs, Menu, Text Effects
插件下載效果演示
Slidesjs
Slides 是一個很是簡潔的 jQuery 圖片輪播插件，其特色是自動循環播放、圖片預加載以及自動分頁功能。
使用示例
✓ Images with captions✓ Linking✓ Product✓ Multiple slideshows✓ Simple (unstyled)✓ Standardcss

下載插件效果演示
Galleria
這是一個響應式的 JavaScript 相冊插件，目的是讓製做專業相冊功能變得更加簡單。
Galleria 支持縮略圖導航、全屏瀏覽和自動播放功能，支持 iPhone，iPad Touch 等移動觸屏設備。
jqueryimage
下載插件效果演示
AnythingSlider
AnythingSlider 由CSS-Tricks 的Chris Coyier 設計，功能齊全，效果精美，應用十分普遍。
主要特點
✓ 簡單的，語義化的標籤；✓ 水平/垂直滑動和淡入淡出動畫；✓ 主題能夠適用於單個滑塊；✓ 同一個頁面能夠顯示多個滑動模塊；✓ 提供了豐富的自定義參數選項。✓ 支持全部主流的瀏覽器；
jqueryimage
下載插件效果演示
WOW Slider
這是另一款效果精美的響應式圖片輪播插件，有衆多專業的模板。
提供了 Rotate,Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade 等精美的輪播效果。html

下載插件效果演示
An HTML5 Slideshow
基於 HTML5 Canvas 和 jQuery 製做的圖片幻燈片效果，有詳細的製做教程能夠學習。
詳細的製做教程和實現思路參考這裏，An HTML5 Slideshow With Canvas & jQuery。
jqueryimage
下載插件效果演示
Awkward Showcase
提供常見的圖片輪播效果，能夠先後切換，也能夠經過頁碼導航，可以在一頁上顯示也能夠幻燈片形式顯示。
效果演示
✓ Normal
✓ Vertical thumnbails
✓ Horizontal thumbnails
✓ Dynamic height
✓ Hundred percent
✓ Viewlinejava

Javascript實現圖片輪播效果(一)讓圖片跳動起來

2、分析佈局jquery

風小箏 利哥天佑天佑 沈曼資料
主盒子裏分上下兩個小盒子（1和2）。
包含圖片的盒子佔兩張圖片的寬（3），處於上盒子中，當前圖片在上盒子（1）中，其它圖片在盒子（3）的右側等待播放。
下邊的盒子（2）包括了六個小方塊及定位在主盒子上的兩個箭頭。
3、html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wangyi</title>
<link type="text/css" rel="stylesheet" href="css/guide.css"/>
<script type="text/javascript" src="../animate.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="w-slider">
<div class="slider">
<div class="slider-main" id="slider_main_block">
<div class="slider-main-img"><a href="#"><img src="images/1.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/2.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/3.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/4.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/5.jpg"/></a></div>
<div class="slider-main-img"><a href="#"><img src="images/6.jpg"/></a></div>ajax

</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-pre"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
4、CSS部分
* {
margin: 0;
padding: 0;
}
.w-slider {
width:310px;
height:265px;
margin:100px auto;
overflow: hidden;
position: relative;
}
.slider {
width:310px;
height:220px;json

}
.slider-main {
width:620px;
height:220px;
}
.slider-main-img{
width:310px;
height:220px;
position:absolute;
top:0;
left:0;
}
.slider-main-img img{
vertical-align: top;
}
.slider-ctrl {
width:310px;
height:45px;
text-align:center;
}
.slider-ctrl span {
cursor: pointer;
}
.slider-ctrl-con {
display:inline-block;
width:24px;
height:20px;
margin-right:8px;
text-indent: -20em;
overflow:hidden;
background:url(../images/icon.png)-24px -782px no-repeat;
}
.slider-ctrl .current {
background:url(../images/icon.png)-24px -762px no-repeat;
}
.slider-ctrl-pre,
.slider-ctrl-next {
width:27px;
height:38px;
position:absolute;
top:50%;
margin-top:-36px;
opacity:0.7;
filter:alpha(opacity=50);
}
.slider-ctrl-pre {
background:url(../images/icon.png)6px 1px no-repeat;
left:0;
}
.slider-ctrl-next {
background:url(../images/icon.png)-9px -44px no-repeat;
right:0;
}bootstrap

5、JS部
/**
* Created by 15623544233 on 2016/10/17.
*/
window.onload=function () {
//imgs的DOM對象
var slider_main_block =$("slider_main_block");
var sliderImgs =slider_main_block.children;
//最外層的slider大盒子
var sider_box =slider_main_block.parentNode.parentNode;
//slider-ctrl的DOM對象
var slider_ctrl = $("slider_ctrl");
var sliderCtrls =slider_ctrl.children;
//動態添加Ctrl
for(var i=0;i<sliderImgs.length;i++){
var spans = document.createElement("span");
spans.className="slider-ctrl-con";
//span中的數字爲當前的索引，後面有重要做用
spans.innerHTML =sliderImgs.length-i;
slider_ctrl.insertBefore(spans,sliderCtrls[1]);
}跨域

sliderCtrls[1].setAttribute("class","current slider-ctrl-con");
//imgW ---圖片寬
var imgW = sliderImgs[0].clientWidth;
//讓除第一張圖之外的全部圖右移
for(var i=1;i<sliderImgs.length;i++){
sliderImgs[i].style.left=imgW+"px";
}
//相當重要的標誌位，currentId 當前出現的盒子
var currentId = 0;
for(var key in sliderCtrls){
sliderCtrls[key].onclick =function () {
//左箭頭點擊的運動動畫
if(this.className=="slider-ctrl-pre"){
//與左移動參數相反
animate(sliderImgs[currentId],{left:imgW});
--currentId<0?currentId=sliderImgs.length-1:currentId;
sliderImgs[currentId].style.left=-imgW+"px";
animate(sliderImgs[currentId],{left:0});
//右箭頭的運動動畫，與自動輪播的運動動畫一致
}else if(this.className=="slider-ctrl-next"){
autoPlay();
}else{
//獲得當前要點擊的圖片索引號
var that = this.innerHTML-1;
if(that>currentId){
//像點擊右側按鈕同樣播放
animate(sliderImgs[currentId],{left:-imgW});
sliderImgs[that].style.left=imgW+"px";

}else if(that<currentId){
animate(sliderImgs[currentId],{left:imgW});
sliderImgs[that].style.left=-imgW+"px";

}
/*當點擊按鈕後，當前圖片currentId移動後，所點擊的盒子成爲當前的圖片，使圖片連續*/
currentId =that;
animate(sliderImgs[currentId],{left:0});

}
flashCurrent((currentId+1));
};

}
//小方塊控制slider動畫的函數
function flashCurrent(index) {
//console.log(index);
for(var i=1;i<sliderCtrls.length-1;i++){
sliderCtrls[i].setAttribute("class","slider-ctrl-con");
}
sliderCtrls[index].setAttribute("class","current slider-ctrl-con");
}
//添加定時器
var timer =null;
timer =setInterval(autoPlay,2000);
function autoPlay() {
animate(sliderImgs[currentId],{left:-imgW});
//當第6張左移走後，6>5,第0張回到框中
++currentId>sliderImgs.length-1?currentId = 0:currentId;
//上一張圖片左移後，下一張圖片快速到右邊
sliderImgs[currentId].style.left=imgW+"px";
//下張右側圖片左移
animate(sliderImgs[currentId],{left:0});
}
sider_box.onmouseover =function () {
clearInterval(timer);
}
sider_box.onmouseout=function () {
timer =setInterval(autoPlay,2000);
}

};
function $(id) {
return document.getElementById(id);
}
/*當前樣式屬性值的獲取 */
function curStyle(obj,attr){
if(obj.currentStyle){
//IE瀏覽器
return obj.currentStyle[attr];
}else{
//標準瀏覽器
return window.getComputedStyle(obj,null)[attr];
}
}
/*封裝的運動框架*/
/*obj ----作動畫的DOM對象；json----變化的部分是json數據 */
function animate(obj,json) {
//調用時先清定時器
clearInterval(obj.timer);
//定時器爲obj的內部定時器，不用每次調用都建立一個新的定時器
obj.timer = setInterval(function () {
//遍歷json數據，每次遍歷的標誌位爲flag
var flag=true;
//遍歷json數據，eg:{left:20,top:40,opacity:50,z-index:3}
for(var key in json){
//取得盒子運動當前的位置
var current= 0;
if(key=="opacity"){
//Ie6,7,8沒有設置透明度，默認爲undefined
current =Math.round(parseInt(curStyle(obj,key)*100))||1;
//console.log(current);
}else{
current= parseInt(curStyle(obj,key));
}

//運動步長：（目標位置-當前位置）/10
var step = (json[key]-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
//各屬性值的漸變更畫
if(key=="opacity"){
if("opacity" in obj.style){
obj.style.opacity = (current+step)/100;
}else{
//兼容ie6，7，8
obj.style.filter ="alpha(opacity ="+(current+step)*10+")";
}
}else if(key=="zIndex"){
obj.style[key] =json[key];
}else
{
obj.style[key] = current+step+"px";
}

//遍歷每一個屬性時都判斷標誌位
if(current!=json[key]){
flag =false;
}
}遍歷結束後，標誌位都爲true,判斷起全部動畫執行完畢，清除定時器
if(flag){
clearInterval(obj.timer);
}
},20)

}
以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持ASPKU源碼庫。

class設爲active是做爲當前輪播點的標識，結構以下。

code1

View Code

輪播的實現須要用到js間歇調用。通常不適用setInterval，由於它存在一些問題，例如兩次輪詢有可能並非互斥執行的等等。這裏適用setTimeout的方式實現，結構以下：

code2

interval = 1500; var func = function(){ console.log('time out'); }; setTimeout(function(){ func(); setTimeout(arguments.callee, interval); }, interval);

View Code

定義一個index變量標識當前輪播索引，而後 func 函數體變換一下，就能夠實現最簡單的輪播

code3

var func = function(){ if(++index > 5) index = 1; // _$,根據id獲取dom _$('img').setAttribute('src', 'images/' + index + '.jpg'); };

View Code

加上鼠標移入移出導航條的控制

code4

interval = 3000, // 每隔3秒切換一次 index = 1; navTriggers = _$('nav-triggers'); var childLis = getChildNodes(navTriggers, 'LI') var changePic = function(idx){ var tween = new Tween(); tween.setup(0.4,1,400); var isImgSeted = false; tween.move(function(cur){ _$('img').style.opacity = cur; if(!isImgSeted){ // _$,根據id獲取dom _$('img').setAttribute('src', 'images/' + idx + '.jpg'); isImgSeted = true; } }); addClassName(childLis[idx - 1], 'active'); }; var func = function(){ removeClassName(childLis[index - 1], 'active'); if(++index > 5) index = 1; changePic(index); }; var timeoutObj = setTimeout(function(){ func(); timeoutObj = setTimeout(arguments.callee, interval); }, interval); var isCleared = false; navTriggers.addEventListener('mouseover', function(e){ var target = e.target || e.srcElement; if(target.tagName !== 'LI') return; for(var i=0, len=childLis.length; i<len; i++){ if(target === childLis[i]) break; } clearTimeout(timeoutObj); isCleared = true; if(i == index-1) return; removeClassName(childLis[index - 1], 'active'); index = i+1; changePic(index); }); navTriggers.addEventListener('mouseout', function(e){ if(!isCleared) return; isCleared = false; timeoutObj = setTimeout(function(){ func(); timeoutObj = setTimeout(arguments.callee, interval); }, interval); });

View Code

要點1：

圖片輪播的控制點用index變量控制。當圖片要切換時，先清除掉index（變換前的）對應的列表項(li)的active class。

而後變換index，自增1或者用戶選了導航條後，取導航條的當前值。

最後經過index執行圖片變換邏輯changePic。

因爲這三個邏輯老是要綁在一塊兒操做的，所以封裝成函數多是更好的方式。同時index的變換方式是不肯定的，

注：相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
上一篇：淺談bootstrap使用中的一些問題以及解決過程
下一篇：原生JS實現勻速圖片輪播動畫
相關JavaScript/Ajax教程：
原生JS實現勻速圖片輪播動畫JSON對象詳解及實例代碼簡易的JS計算器實現代碼基於ajax html實現文件上傳技巧總結js跨域調用WebService的簡單實例Vue.js快速入門實例教程JavaScript隨機生成顏色的方法js實現目錄連接,內容跟着目錄滾動顯示的簡單實例
熱門標籤：
JavaScript/Ajax教程Rss訂閱JavaScript/Ajax教程搜索

搜索JavaScript/Ajax教程...

圖片輪播效果，在各大網站的首頁都能看到，比較常見。下面小編給你們分享這一效果的簡單實現。

1.圖片跳動起來

2.圖片序列控制的實現

3.先後按鈕控制的實現

天佑 流氓三金 畢加索 王冕

這篇文章來看圖片按照間隔時間進行切換.

咱們先把結構代碼完成,這個我就不作詳細的講解了.先給你們展現下效果圖：

代碼以下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
box-sizing: border-box;
}
a {
text-decoration: none;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
}
#slider{
width: 800px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#slider ul{
width: 2400px;
position: relative;
}
#slider ul:after{
content: " ";
width: 0;
height: 0;
display: block;
}
#slider ul li{
float: left;
width: 800px;
height: 300px;
overflow: hidden;
}
#slider ul li img{
width: 100%;
}
#slider ol{
position: absolute;
bottom: 10px;
left: 46%;
}
#slider ol li{
display: inline-block;
}
#slider ol li a{
display: inline-block;
padding:4px 8px;
border-radius:15px;
background-color: #000;
color: #fff;
}
#slider .prev, #slider .next{
display: inline-block;
position: absolute;
top: 49%;
background-color: #000;
opacity: 0.6;
color: #fff;
padding: 3px;
}
#slider .prev{
left: 10px;
}
#slider .next{
right: 10px;
}
</style>
</head>
<body>
<div id="slider">
<ul>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-1.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-2.jpg" /> </li>
<li> <img src="http://www.bates-hewett.com/images/sliders/slider-3.jpg" /> </li>
</ul>
<ol>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
</ol>
<a href="#">上一張</a>
<a href="#">下一張</a>
</div>
</body>
</html>

好的,如今咱們來經過JS控制圖片的跳轉.

大衣哥年度 王小源 帥總 囧囧丸

首先咱們須要找到圖片所在的位置,這裏咱們是經過ul來進行佈局的因此首先得找到UL下的LI的數目

接着讓圖片一張一張的展現,咱們使用了視窗的模式,就是遮罩層的模式.#slider是一個視窗,ul是視窗外的景色,而ul得景色是橫向排版的

而後就是讓外面的景色顯示爲視窗的大小,也就是讓每一張圖片做爲每一次的視窗景色,這裏就是控制圖片的大小要與視窗同等大小.

上面講解的是一個概念,也就是佈局的處理,下面咱們JS的控制了,要實現圖片間隔的顯示不一樣.咱們就須要用到JS的setInterval或者setTimeout.這裏咱們使用setInterval(由於這個用起來方便.)

每跳轉一次,咱們控制的是UL的position的left,這樣就可讓ul下的景色,在每一次都是顯示不同,而這個left是根據視窗的寬度來決定,第一張left固然是-800 * 0 ,第二種就是 -800*1,第三種是-800*2...依次類推.那咱們就能夠得出下面的代碼

<script>
(function(){
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
var index = 0;
setInterval(function(){
if(index >= len){
index = 0;
}
imgul.style.left = - (800 * index) + "px";
index++;
},2000);
})();
</script>

JS代碼這樣看起來就很簡單了. 我這裏是設置2秒跳轉依次,而後跳轉的次數大於等於圖片的數目後,讓其返回到第一張圖片.

以上內容是小編給你們介紹Javascript實現圖片輪播效果(一)讓圖片跳動起來的所有內容，但願對你們有所幫助。

jQuery圖片輪播爲什麼只有初次鼠標進入才能中止定時器？給個人感受是後面沒法中止自動播放，並且播放速度加快，調試好久不知問題出如今哪。
js主要代碼以下：

$(function () { var stage=$('.pic-stage'); var pic=$('.pic-box'); var panel=$('.panel'); var panelLi=$('.panel li'); //獲取單張圖片的大小 var picWidth=parseInt($('.pic-box li:eq(0)').css('width')); //獲取圖片的個數 var size=panelLi.size(); /*根據導航條li的個數實現居中佈局 *採用width（）方法獲取的寬度不包括margin */ var panelWidth=panel.width(); //獲取的margin包含上下邊距和左右邊距，用split（）方法取得margin左右的數值 var margin=parseInt(panelLi.css('margin').split(' ')[1]); var iNow=0; pic.css('width',picWidth*size); panel.css('margin-left',-(panelWidth+margin*size)/2); for(var i=0;i<size;i++){ panelLi.eq(i).attr('index',i); } //導航條事件 panelLi.hover(function() { iNow=$(this).attr('index'); pic.stop().animate({left:(-iNow*picWidth)+'px'}); }); //自動播放 function autoPlay(){ iNow++; if (iNow===size) { iNow=0; } pic.stop().animate({left:(-iNow*picWidth)+'px'}); } var timer=setInterval(autoPlay,1000); //鼠標懸浮中止定時器 stage.hover(function() { clearInterval(timer); }, function() { setInterval(autoPlay,1000); });