jquery实现图片水平滚动的效果

这篇文章主要介绍了jquery实现图片水平滚动效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。

本文实例讲述了jquery实现图片水平滚动效果，分享给大家供大家参考。具体如下：
运行效果图：——————-查看效果——————-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现图片水平滚动效果代码如下

登录后复制  jquery图片切换插件制作图片层叠缩放展示效果  jquery图像幻灯片制作大小图片切换滚动展示  jquery图片放大插件鼠标滑过图片放大效果  jquery图片放大点击小图放大查看大图效果  jquery图片切换插件制作图片与文字切换特效  p+css多张背景图片规范写法图片透明度显示  CSS如何定位工程  CSS如何定位工程p+css多张背景图片规范写法图片透明度显示jquery图片切换插件制作图片与文字切换特效jquery图片放大点击小图放大查看大图效果jquery图片放大插件鼠标滑过图片放大效果jquery图像幻灯片制作大小图片切换滚动展示jquery图片切换插件制作图片层叠缩放展示效果  

$(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 //});

以上就是jquery实现图片水平滚动的效果的详细内容，更多请关注【创想鸟】其它相关文章！