特效描述:图片轮播幻灯片 左右滚动图片。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>