html 图片放大缩小轮播,jQuery左右滚动支持图片放大缩略图图片轮播代码分享

本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果，常用的jQuery图片左右轮播效果，同时支持底部缩略图左右滚动展示，点击大图片后支持放大效果。

运行效果图：                                     -------------------查看效果-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

为大家分享的jQuery左右滚动支持图片放大缩略图图片轮播效果代码如下

jQuery左右滚动支持图片放大缩略图图片轮播代码

*{ margin:0; padding:0; list-style:none;}

img{ border:0;}

.ban{ width:500px; height:600px; position:relative; overflow:hidden;margin:40px auto 0 auto;}

.ban2{ width:500px; height:500px; position:relative; overflow:hidden;}

.ban2 ul{ position:absolute; left:0; top:0;}

.ban2 ul li{ width:500px; height:500px;}

.prev{ float:left; cursor:pointer;}

.num{ height:82px;overflow:hidden; width:430px; position:relative;float:left;}

.min_pic{ padding-top:10px; width:500px;}

.num ul{ position:absolute; left:0; top:0;}

.num ul li{ width:80px; height:80px; margin-right:5px; padding:1px;}

.num ul li.on{ border:1px solid red; padding:0;}<