简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery

jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery

WBOY
WBOYasal
2016-05-16 15:41:461232semak imbas

Contoh dalam artikel ini menerangkan kesan gelongsor berbilang imej skrin penuh jquery kiri dan kanan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah pemalam yang melaksanakan kesan main balik gambar fokus sepanduk berdasarkan jquery, ia memenuhi skrin Ia mempunyai rasa yang sangat grafik Kesan persembahan adalah lebih baik dan lebih ketara, dan pengalaman visual pengguna adalah lebih konkrit. Ia adalah kod kesan khas yang sangat bergaya dan murah hati.
运行效果图：                                                -------------------查看效果 下砜-机-下载有--------

jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Jquery kiri dan kanan skrin penuh saiz besar kod kesan gelongsor berbilang imej yang dikongsi dengan anda adalah seperti berikut 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery商城网站全屏多张图片滑动切换代码</title>
<link rel="stylesheet" type="text/css" href="css/slide.css"/>
</head>
<body>

<!-- 代码部分begin -->
<div class="slides">
 <div class="slideInner">
 <a href="#" style="background: url(images/slide1.jpg) no-repeat;">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 </a>
 <a href="#" style="background: url(images/slide2.jpg) no-repeat">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide2p1.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 </a>
 <a href="#" class="slide3" style="background: url(images/slide3.jpg) no-repeat;">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide3p1.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide3p2.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 <div class="moveElem img3" rel="300,easeInOutExpo"> <img  src="images/slide3p3.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 </a>
 <a href="#" style="background: rgb(113, 209, 231);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 </a>
 <a href="#" style="background: rgb(178, 44, 44);">
 <div class="moveElem img1" rel="0,easeInOutExpo"> <img  src="images/slide1p1.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 <div class="moveElem img2" rel="150,easeInOutExpo"> <img  src="images/slide1p2.png" / alt="jquery kiri dan kanan skrin penuh saiz besar berbilang imej kesan gelongsor kod sharing_jquery" > </div>
 </a>
 </div>
 <div class="nav">
 <a class="prev" href="javascript:;"></a>
 <a class="next" href="javascript:;"></a>
 </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/slide.js"></script>
<script >
$(document).ready(function() {
 $(".slideInner").slide({
 slideContainer: $('.slideInner a'),
 effect: 'easeOutCirc',
 autoRunTime: 5000,
 slideSpeed: 1000,
 nav: true,
 autoRun: true,
 prevBtn: $('a.prev'),
 nextBtn: $('a.next')
 })
})
</script>
<!-- 代码部分end -->

</body>
</html>

Di atas ialah kod kesan gelongsor berbilang imej skrin penuh jquery kiri dan kanan yang dikongsi dengan anda.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Borang pendaftaran pengguna perkongsian kod kesan operasi segera dilaksanakan oleh jquery_jqueryArtikel seterusnya：Borang pendaftaran pengguna perkongsian kod kesan operasi segera dilaksanakan oleh jquery_jquery

Artikel berkaitan

Lihat lagi