jquery實現圖片水平滾動效果代碼分享_jquery

本文執行個體講述了jquery實現圖片水平滾動效果，分享給大家供大家參考。具體如下：
運行效果圖：-------------------查看效果-------------------

小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jquery實現圖片水平滾動效果代碼如下

<HEAD><META content="text/html; charset=gb2312" http-equiv="Content-Type"><TITLE>jquery實現圖片水平滾動效果</TITLE><LINK rel="stylesheet" type="text/css" href="css/style.css"><SCRIPT type="text/javascript" src="js/ga.js"></SCRIPT><SCRIPT type="text/javascript" src="js/jquery.js"></SCRIPT></HEAD><BODY><!--示範內容開始--><SCRIPT type="text/javascript" src="js/jquery.min.1.5.1.js"></SCRIPT><SCRIPT type="text/javascript" src="js/jquery.ui.1.8.10.js"></SCRIPT><SCRIPT type="text/javascript" src="js/jCoverflip.js"></SCRIPT><DIV class="artist_flow_contn"> <UL id="flip" class="ui-jcoverflip">  <LI style="left: 80px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 120px; display: inline-block;" border="0" src="images/01.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">jquery圖片切換外掛程式製作圖片層疊縮放展示效果</A></SPAN></LI>  <LI style="left: 220px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 160px; display: inline-block;" border="0" src="images/02.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">jquery映像投影片製作大小圖片切換滾動展示</A></SPAN></LI>  <LI style="left: 400px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 120px; display: inline-block;" border="0" src="images/03.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">jquery圖片放大外掛程式滑鼠滑過圖片放大效果</A></SPAN></LI>  <LI style="left: 530px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 120px; display: inline-block;" border="0" src="images/04.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">jquery圖片放大點擊小圖放大查看大圖效果</A></SPAN></LI>  <LI style="left: 660px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 120px; display: inline-block;" border="0" src="images/05.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">jquery圖片切換外掛程式製作圖片與文字切換特效</A></SPAN></LI>  <LI style="left: 790px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 120px; display: inline-block;" border="0" src="images/06.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">div+css多張背景圖片規範寫法圖片透明度顯示</A></SPAN></LI>  <LI style="left: 920px; bottom: 20px;" class="ui-jcoverflip--item"><A href="javascript:;"><IMG style="width: 120px; display: inline-block;" border="0" src="images/07.jpg"></A><SPAN style="display: none;" class="title"><A href="#" target="_blank">CSS如何定位工程</A></SPAN></LI>  <SPAN style="display: none; opacity: 0;" class="title ui-jcoverflip--title"><A href="#" target="_blank">CSS如何定位工程</A></SPAN><SPAN style="display: none; opacity: 0;" class="title ui-jcoverflip--title"><A href="#" target="_blank">div+css多張背景圖片規範寫法圖片透明度顯示</A></SPAN><SPAN style="display: none; opacity: 0;" class="title ui-jcoverflip--title"><A href="#" target="_blank">jquery圖片切換外掛程式製作圖片與文字切換特效</A></SPAN><SPAN style="display: none; opacity: 0;" class="title ui-jcoverflip--title"><A href="#" target="_blank">jquery圖片放大點擊小圖放大查看大圖效果</A></SPAN><SPAN style="display: none; opacity: 0;" class="title ui-jcoverflip--title"><A href="#" target="_blank">jquery圖片放大外掛程式滑鼠滑過圖片放大效果</A></SPAN><SPAN style="display: block; opacity: 1;" class="title ui-jcoverflip--title"><A href="#" target="_blank">jquery映像投影片製作大小圖片切換滾動展示</A></SPAN><SPAN style="display: none; opacity: 0;" class="title ui-jcoverflip--title"><A href="#" target="_blank">jquery圖片切換外掛程式製作圖片層疊縮放展示效果</A></SPAN> </UL> <DIV id="scrollbar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><A style="left: 16.66%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></A></DIV></DIV><SCRIPT type="text/javascript">$(document).ready(function(){ // cover flip effects // //var noOfArtists = 31; //jx var noOfArtists = 7; //jx  $('#flip').jcoverflip({ current: 0,  beforeCss: function(el, container, offset){  return [$.jcoverflip.animationElement(el, {  left: (container.width() / 2 - 220 - 150 * offset + 20 * offset) + 'px',  bottom: '20px'  }, {}), $.jcoverflip.animationElement(el.find('img'), {  width: Math.max(10, 120 - 0 * offset * offset) + 'px'  }, {})]; }, afterCss: function(el, container, offset){  return [$.jcoverflip.animationElement(el, {  left: (container.width() / 2 + 100 + 130 * offset) + 'px',  bottom: '20px'  }, {}), $.jcoverflip.animationElement(el.find('img'), {  width: Math.max(10, 120 - 0 * offset * offset) + 'px'  }, {})]; }, currentCss: function(el, container){  return [$.jcoverflip.animationElement(el, {  left: (container.width() / 2 - 80) + 'px',  bottom: '20px'  }, {}), $.jcoverflip.animationElement(el.find('img'), {  width: '160px'  }, {})]; }, change: function(event, ui){  //jx $('#scrollbar').slider('value', ui.to * 10);  $('#scrollbar').slider('value', ui.to * (100 / (noOfArtists - 1))); //jx } });  $('#scrollbar').slider({ //jx value: 50, value: 0, //init. pic is the beginning of the artists list, so change from 50 (middle) to 0 //jx step: 10, step: 100 / (noOfArtists - 1), //jx stop: function(event, ui){  if (event.originalEvent) {  //jx var newVal = Math.round(ui.value / 10);  var newVal = Math.round(ui.value / 100 * (noOfArtists - 1)); //jx  $('#flip').jcoverflip('current', newVal);  //jx $('#scrollbar').slider('value', newVal * 10);  $('#scrollbar').slider('value', newVal / (noOfArtists - 1) * 100); //jx  } } }); // cover flip effects //});</SCRIPT><!--示範內容結束--></BODY></HTML>

以上就是為大家分享的jquery實現圖片水平滾動效果代碼，希望大家可以喜歡。