2. 程式人生 > >jQuery實現輪播效果(一) - 基礎

jQuery實現輪播效果(一) - 基礎

阿新 • • 發佈：2017-06-08
時代 例如 自己 -1 fun 時間間隔 order .html 官方

前戲：


XXXX年XX月XX日，經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿，怎麽完畢得了網頁設計這樣高端的活兒呢！

之前盡管有學過一點HTML。CSS的知識。可是在實際的使用中，把頁面整的好看非常困難，最後信心沒了，就再也不想去做涉及網頁開發的事兒了。一心學習java。假設在小公司做java web開發，專門做後臺的開發時非常少的。一般還得弄前臺頁面（PS:做這些前臺也非常easy，要麽用一些前端框架，要麽就是把曾經的項目拷過來再改動下頁面）。拿到網頁開發這個活兒。我頓時楞了，只是好在不用我去設計頁面。僅僅要把美工做好的模板拿過來再進行一下排版就OK了。僅僅寫代碼當然難不住作為程序猿的我啦！

於是啪啦啪啦的去寫代碼了。突然發現。咦。這是個什麽玩意？每隔一段時間就會顯示下一張新聞圖片。問了下美工，他說這是一個叫“輪播”的東東，僅僅認為這個東西好奇妙，美工說你去網上找一下做輪播效果的代碼，然後改改即可啦~百度了一下，發現搜索到的結果特別多，並且大部分都是用jquery寫的，於是隨便找到一個效果拿過去用了，效果確實令人愜意。

拿過來改下確實能解決事兒，可是我已經對無腦的復制粘貼感到厭煩了，這終究不是個辦法，我不僅要知道他確實能實現這樣的效果，並且也要了解它究竟是如何工作的（據我觀察。公司的一些程序猿的一些代碼都是復制粘貼過來的。你去看裏面的一些代碼就會認為非常淩亂，有時代碼出問題了，你去問他，他竟然不知道！當然我這裏不是為了黑大夥。只不過復制代碼不會對我們技術的提升有不論什麽效果）。於是依據自己的一些理解，提供了這篇jquery輪播效果的解說。假設文中有什麽疏漏。還奢望不吝賜教。


正文：


首先看一下效果：

技術分享

輪播效果分析：

  1. 輪播效果大致能夠分為3個部分：輪播圖片（圖片或者是包括容器），控制輪播圖顯示的button（向左、向右button，索引button(比如上面效果圖的頂部的數字button)），每隔一段時間輪流顯示輪播圖片。

  2. 輪播圖的顯示：要顯示的輪播圖顯示。不須要顯示的輪播圖隱藏；通常將這些輪播圖片以定位的方式重疊在一起，每次顯示一張輪播圖片。
  3. 控制button：鼠標點擊或者移到索引button上面時，顯示相應索引位置的輪播圖。向上、向下button負責控制顯示上一張、下一張輪播圖片。
  4. 其他：一般索引button有激活狀態和未激活狀態共2種狀態；鼠標移到輪播圖片上面時應該停止自己主動輪播，鼠標離開時開始自己主動輪播。

輪播效果實現筆記：

  1. jquery提供了豐富的選擇器以及用來挑選元素的方法，這極大的簡化了我們的開發，比如$(".slider-item").filter(".slider-item-selected")選擇了當前處於激活狀態的索引button。
  2. 兩張輪播圖的切換顯示效果是通過jquery的fadeOut()和fadeIn()方法來實現的，詳細的使用參照jquery的api。
  3. CSS透明背景的實現： background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （能夠參看以下的參看資料），兼容大部分主流瀏覽器包含IE。為什麽不使用opacity呢？由於opacity會使文字也透明（子元素也會透明）。
  4. HTML骨架非常重要，你寫的html的結果應該是良好的。

代碼部分：


-----------------------------------------------------------------------------------

HTML:

<pre name="code" class="html"><div class="slider">
	<ul class="slider-main">
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/1.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/2.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/3.jpg"></a>
		</li>
		<li class="slider-panel">
			<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/4.jpg"></a>
		</li>
	</ul>
	<div class="slider-extra">
		<ul class="slider-nav">
			<li class="slider-item">1</li>
			<li class="slider-item">2</li>
			<li class="slider-item">3</li>
			<li class="slider-item">4</li>
		</ul>
		<div class="slider-page">
			<a class="slider-pre" href="javascript:;;"><</a>
			<a class="slider-next" href="javascript:;;">></a>
		</div>
	</div>
</div>



   CSS:





* {
	padding: 0px;
	margin: 0px;
}
a {
	text-decoration: none;
}
ul {
	list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
	width: 650px;
	height: 413px;
}
.slider {
	text-align: center;
	margin: 30px auto;
	position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
	position: absolute;
	z-index: 8;
}
.slider-panel {
	position: absolute;
}
.slider-panel img {
	border: none;
}
.slider-extra {
	position: relative;
}
.slider-nav {
	margin-left: -51px;
	position: absolute;
	left: 50%;
	bottom: 4px;
}
.slider-nav li {
	background: #3e3e3e;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	margin: 0 2px;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	height: 18px;
	line-height: 18px;
	width: 18px;
}
.slider-nav .slider-item-selected {
	background: blue;
}
.slider-page a{
	background: rgba(0, 0, 0, 0.2);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
	color: #fff;
	text-align: center;
	display: block;
	font-family: "simsun";
	font-size: 22px;
	width: 28px;
	height: 62px;
	line-height: 62px;
	margin-top: -31px;
	position: absolute;
	top: 50%;
}
.slider-page a:HOVER {
	background: rgba(0, 0, 0, 0.4);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
	left: 100%;
	margin-left: -28px;
}



   JavaScript：





$(document).ready(function() {
	var length,
		currentIndex = 0,
		interval,
		hasStarted = false, //是否已經開始輪播
		t = 3000; //輪播時間間隔
	length = $(‘.slider-panel‘).length;
	
	//將除了第一張圖片隱藏
	$(‘.slider-panel:not(:first)‘).hide();
	//將第一個slider-item設為激活狀態
	$(‘.slider-item:first‘).addClass(‘slider-item-selected‘);
	//隱藏向前、向後翻button
	$(‘.slider-page‘).hide();
	
	//鼠標上懸時顯示向前、向後翻button,停止滑動。鼠標離開時隱藏向前、向後翻button。開始滑動
	$(‘.slider-panel, .slider-pre, .slider-next‘).hover(function() {
		stop();
		$(‘.slider-page‘).show();
	}, function() {
		$(‘.slider-page‘).hide();
		start();
	});
	
	$(‘.slider-item‘).hover(function(e) {
		stop();
		var preIndex = $(".slider-item").filter(".slider-item-selected").index();
		currentIndex = $(this).index();
		play(preIndex, currentIndex);
	}, function() {
		start();
	});
	
	$(‘.slider-pre‘).unbind(‘click‘);
	$(‘.slider-pre‘).bind(‘click‘, function() {
		pre();
	});
	$(‘.slider-next‘).unbind(‘click‘);
	$(‘.slider-next‘).bind(‘click‘, function() {
		next();
	});
	
	/**
	 * 向前翻頁
	 */
	function pre() {
		var preIndex = currentIndex;
		currentIndex = (--currentIndex + length) % length;
		play(preIndex, currentIndex);
	}
	/**
	 * 向後翻頁
	 */
	function next() {
		var preIndex = currentIndex;
		currentIndex = ++currentIndex % length;
		play(preIndex, currentIndex);
	}
	/**
	 * 從preIndex頁翻到currentIndex頁
	 * preIndex 整數，翻頁的起始頁
	 * currentIndex 整數。翻到的那頁
	 */
	function play(preIndex, currentIndex) {
		$(‘.slider-panel‘).eq(preIndex).fadeOut(500)
			.parent().children().eq(currentIndex).fadeIn(1000);
		$(‘.slider-item‘).removeClass(‘slider-item-selected‘);
		$(‘.slider-item‘).eq(currentIndex).addClass(‘slider-item-selected‘);
	}
	
	/**
	 * 開始輪播
	 */
	function start() {
		if(!hasStarted) {
			hasStarted = true;
			interval = setInterval(next, t);
		}
	}
	/**
	 * 停止輪播
	 */
	function stop() {
		clearInterval(interval);
		hasStarted = false;
	}
	
	//開始輪播
	start();
});




         首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，而且隱藏向前、向後button。使第一個索引button處於激活狀態。


         事件部分：通過jquery的hover()綁定鼠標上懸以及離開時的事件處理。 jquery的bind()方法綁定鼠標點擊事件處理向前、向後翻動、


         輪播控制：pre(), next(), play(), start()開始自己主動輪播，stop()停止自己主動輪播。





上面的js寫的比較散，結構也不太好，讀起來也比較費力。也不易使用。耦合度較高。下篇將給出一個純粹的jquery輪播插件， 該插件能夠定制各種效果。方便的配置以及可擴展。




-----------------------------------------------------------------------------------







以下是總體的代碼：




index.html




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery輪播效果圖 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
	* {
		padding: 0px;
		margin: 0px;
	}
	a {
		text-decoration: none;
	}
	ul {
		list-style: outside none none;
	}
	.slider, .slider-panel img, .slider-extra {
		width: 650px;
		height: 413px;
	}
	.slider {
		text-align: center;
		margin: 30px auto;
		position: relative;
	}
	.slider-panel, .slider-nav, .slider-pre, .slider-next {
		position: absolute;
		z-index: 8;
	}
	.slider-panel {
		position: absolute;
	}
	.slider-panel img {
		border: none;
	}
	.slider-extra {
		position: relative;
	}
	.slider-nav {
		margin-left: -51px;
		position: absolute;
		left: 50%;
		bottom: 4px;
	}
	.slider-nav li {
		background: #3e3e3e;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
		margin: 0 2px;
		overflow: hidden;
		text-align: center;
		display: inline-block;
		height: 18px;
		line-height: 18px;
		width: 18px;
	}
	.slider-nav .slider-item-selected {
		background: blue;
	}
	.slider-page a{
		background: rgba(0, 0, 0, 0.2);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
		color: #fff;
		text-align: center;
		display: block;
		font-family: "simsun";
		font-size: 22px;
		width: 28px;
		height: 62px;
		line-height: 62px;
		margin-top: -31px;
		position: absolute;
		top: 50%;
	}
	.slider-page a:HOVER {
		background: rgba(0, 0, 0, 0.4);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
	}
	.slider-next {
		left: 100%;
		margin-left: -28px;
	}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		var length,
			currentIndex = 0,
			interval,
			hasStarted = false, //是否已經開始輪播
			t = 3000; //輪播時間間隔
		length = $(‘.slider-panel‘).length;
		
		//將除了第一張圖片隱藏
		$(‘.slider-panel:not(:first)‘).hide();
		//將第一個slider-item設為激活狀態
		$(‘.slider-item:first‘).addClass(‘slider-item-selected‘);
		//隱藏向前、向後翻button
		$(‘.slider-page‘).hide();
		
		//鼠標上懸時顯示向前、向後翻button,停止滑動，鼠標離開時隱藏向前、向後翻button。開始滑動
		$(‘.slider-panel, .slider-pre, .slider-next‘).hover(function() {
			stop();
			$(‘.slider-page‘).show();
		}, function() {
			$(‘.slider-page‘).hide();
			start();
		});
		
		$(‘.slider-item‘).hover(function(e) {
			stop();
			var preIndex = $(".slider-item").filter(".slider-item-selected").index();
			currentIndex = $(this).index();
			play(preIndex, currentIndex);
		}, function() {
			start();
		});
		
		$(‘.slider-pre‘).unbind(‘click‘);
		$(‘.slider-pre‘).bind(‘click‘, function() {
			pre();
		});
		$(‘.slider-next‘).unbind(‘click‘);
		$(‘.slider-next‘).bind(‘click‘, function() {
			next();
		});
		
		/**
		 * 向前翻頁
		 */
		function pre() {
			var preIndex = currentIndex;
			currentIndex = (--currentIndex + length) % length;
			play(preIndex, currentIndex);
		}
		/**
		 * 向後翻頁
		 */
		function next() {
			var preIndex = currentIndex;
			currentIndex = ++currentIndex % length;
			play(preIndex, currentIndex);
		}
		/**
		 * 從preIndex頁翻到currentIndex頁
		 * preIndex 整數，翻頁的起始頁
		 * currentIndex 整數，翻到的那頁
		 */
		function play(preIndex, currentIndex) {
			$(‘.slider-panel‘).eq(preIndex).fadeOut(500)
				.parent().children().eq(currentIndex).fadeIn(1000);
			$(‘.slider-item‘).removeClass(‘slider-item-selected‘);
			$(‘.slider-item‘).eq(currentIndex).addClass(‘slider-item-selected‘);
		}
		
		/**
		 * 開始輪播
		 */
		function start() {
			if(!hasStarted) {
				hasStarted = true;
				interval = setInterval(next, t);
			}
		}
		/**
		 * 停止輪播
		 */
		function stop() {
			clearInterval(interval);
			hasStarted = false;
		}
		
		//開始輪播
		start();
	});
</script>
</head>
<body>
	<div class="slider">
		<ul class="slider-main">
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/1.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/2.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/3.jpg"></a>
			</li>
			<li class="slider-panel">
				<a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關註RiccioZhang的博客" title="關註RiccioZhang的博客" src="images/4.jpg"></a>
			</li>
		</ul>
		<div class="slider-extra">
			<ul class="slider-nav">
				<li class="slider-item">1</li>
				<li class="slider-item">2</li>
				<li class="slider-item">3</li>
				<li class="slider-item">4</li>
			</ul>
			<div class="slider-page">
				<a class="slider-pre" href="javascript:;;"><</a>
				<a class="slider-next" href="javascript:;;">></a>
			</div>
		</div>
	</div>
</body>
</html>




至此一個簡單的jquery輪播效果就完畢了。當然還有非常多須要改進的地方。


本篇文章的源碼能夠在例如以下幾個地址下載：


    

  • CSDN下載點擊這裏 (http://download.csdn.net/detail/qq791967024/8993769)
  • GitHub下載點擊這裏(https://github.com/ricciozhang/zslider_simple)
    



參考資料：


    

  1. 

    IE8下實現兼容rgba(透明效果)
    

  2. jquery官方api
  3. CSS3 opacity 屬性
    


   

jQuery實現輪播效果(一) - 基礎
   
 
 
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
jQuery實現輪播效果(一) - 基礎

     
 時代   例如   自己   -1   fun   時間間隔   order   .html   官方   

前戲：

         XXXX年XX月XX日，經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿，怎麽完畢得了網頁設計這樣高端的活兒呢！之前盡管有學過一點HTML。CSS的知識。可 



  
 

    


    
    
js實現輪播效果(一)

     
 
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <styl 



  
 

    


    
    
JQuery 基礎案例（3）—— jQuery實現輪播圖無縫（無回滾）滾動切換效果

     
 
							
							
							輪播圖無縫滾動切換原理

基本框架



<div class="slide">
    <!-- 導航點 -->
     <ul class="slide-nav">
        <li class="activ 



  
 

    


    
    
jQuery實現輪播圖效果

     
 代碼實現   idt   代碼   out   顯示   move   posit   技術   輪播圖   任務實現：用jQuery實現輪播圖。
來自瓶子啊之小白，歡迎來訪，歡迎指導。
相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原 



  
 

    


    
    
實現輪播效果

     
 fault   num   設置圖   pro   ren   pos   ont   mouseout   return   HTML

<div class="wrap">
	<div id="slide">
		<ul class="list">
			&l 



  
 

    


    
    
CSS實現輪播效果

     
 ini   html   out   mes   實現   discover   body   opacity屬性   blog   還沒有學習如何用JS實現輪播圖效果，所以就用CSS做了一個假的~
氮素！目前只調出三個圖實現輪播，圖越多代碼就越復雜，後面就沒調了，才不是因為我懶_(:з」∠)_
代碼如下↓↓ 



  
 

    


    
    
js實現輪播效果

     
  
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style>
       



  
 

    


    
    
swiper3 ajax獲取後臺資料渲染實現輪播效果

     
  
 
 1.呼叫介面獲取需要渲染的資料，根據返回的介面資料，渲染節點，緊接著在插入節點的後邊呼叫步驟2編寫的初始化方法 
                 // 將資料加入節點後，插入父節點中
                $('#swiper_demo').html(html);
            



  
 

    


    
    
詳解swiper輪播圖的各種坑以及呼叫ajax實現輪播效果

     
  
 
 Swiper常用於移動端網站的內容觸控滑動，對於前端開發人員來說使用swiper可以提高工作效率，不再需要寫太多的程式碼，輕輕鬆鬆的實現想要的效果，工作中最常用的就是輪播圖了，下面我來說說如何寫一個簡單的輪播圖： 
 1、首先需要下載一個swiper.css檔案和一個swiper.js檔案，到時候直 



  
 

    


    
    
js實現輪播效果(二)

     
  
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     



  
 

    


    
    
JQuery實現輪播圖原始碼

     
 
                設計：



根據上圖可以看出，輪播圖需要以下元素：外面的盒子div、放置圖片集合的盒子ul、放置兩側按鈕的盒子div、下側順序按鈕div

原始碼如下：

一、html原始碼如下：

<div class="outer">

    <ul class=" 



  
 

    


    
    
jquery 實現 輪播圖

     
 
                <!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>輪播圖</title>
		<script src="js/jque 



  
 

    


    
    
js實現輪播效果幾種方式

     
  
 
  
  小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。 
  
   
 輪播呢，也是各種網站上常見的一種展示效果，這裡我來寫一寫實現輪播的一些簡單方法。 // 



  
 

    


    
    
自制的Banner輪播圖 ，只需載入圖片地址集合，即可實現輪播效果

     
 
							
							
							BannerView

Extends from my another repository”AutoPlayViewpager”

BannerView從我的初始專案AutoPlayViewpager改進而來





簡介:

這是一個無限輪播圖片的控制元件 



  
 

    


    
    
Android實現輪播效果SliderLayout

     
 
							
							
							實現輪播效果有2種方法: 
(1)使用ViewPager+ImageView,通過Handler進行間隔傳送訊息,實現自動輪播效果 
xml程式碼:

<android.support.v4.view.ViewPager
        android:i 



  
 

    


    
    
react-slider-swiper 用react實現輪播效果，程式碼完整，直接複製下來就能執行

     
  
 
 
 
  demo1 
 
  
 App.js 
 import React, { Component } from 'react';
import Swiper from 'react-id-swiper';
import './Swiper.css'
import './App.css'
im 



  
 

    


    
    
jQuery實現輪播圖特效，仿京東——李帥醒部落格

     
 JS程式碼：<script type="text/javascript">
	var ArrImg=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
	var num=ArrImg.lengt 



  
 

    


    
    
使用css實現輪播效果

     
 
                

之前寫過一個點選切換的教程，這裡附上鍊接：
與點選切換一樣，首先先製作一個容器，用來容納所顯示的內容：
HTML程式碼：

<html>
<head>
    <meta charset="utf-8">   
    <link 



  
 

    


    
    
原生JS實現 輪播效果

     
 
                <div id="playImages" class="play">
    <ul class="big_pic">
        <div class="prev"></div>
        <div class 



  
 

    


    
    
點選輪播圖片左右按鈕，實現輪播效果

     
 
                
點選左右按鈕，實現圖片輪播效果，js程式碼如下：
$(function () {
    var index = 1;
    var pPage = 1;
    var $v_citemss = $(".citemss");
    var $v_show = $v_c