Jquery图片轮播幻灯片左右滚动图片特效代码下载

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-image-scale-carousel.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
#photo_container{width:960px;height:400px;overflow:hidden;margin:40px auto;}
#swipe_nav_prev,#swipe_nav_next{position:absolute;top:0;left:0;z-index:2000;background-color:#ccc;cursor:pointer;text-align:center;display:none;}
#swipe_nav_prev{background:#333 url('images/prev.png') no-repeat center center;}
#swipe_nav_next{background:#333 url('images/next.png') no-repeat center center;}
.internal_swipe_container{position:relative;}
.trans{filter:alpha(opacity=75);-moz-opacity:0.75;-khtml-opacity:0.75;opacity:0.75;}
.jq_swipe_image{background:url('images/loader.gif') no-repeat center center;}
#count_container{padding:0;margin:0;position:absolute;top:0;left:0;background-color:pink;height:6px;list-style:none;}
#count_container .counter{float:left;height:6px;background-color:#FFF;z-index:200;height:6px;padding:0;margin:0;}
#count_container .counter:hover{cursor:pointer;background-color:#FFA4FE !important;}
#count_container .current{background-color:#ff00fc!important;}
</style>
<script type="text/javascript">
var carousel_images = [
	"images/01.jpg",
	"images/02.jpg",
	"images/03.jpg",
	"images/04.jpg",
	"images/05.jpg",
	"images/06.jpg",
	"images/07.jpg"
];
$(window).load(function() {
	$("#photo_container").isc({
		imgArray: carousel_images,
		autoplay: true,
		autoplayTimer: 5000 // 5 seconds.
	});	
});
</script>
<div id="photo_container"></div>