Posted in Javascript onSeptember 15, 2013
导入jquery代码
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src="js/jquery-image-scale-carousel.js" type="text/javascript" charset="utf-8"></script> <script> var carousel_images = [ "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", "images/06.jpg", "images/07.jpg" ]; // Example without autoplay $(window).load(function() { $("#photo_container").isc({ imgArray: carousel_images }); }); // Example with autoplay /* $(window).load(function() { $("#photo_container").isc({ imgArray: carousel_images, autoplay: true, autoplayTimer: 5000 // 5 seconds. }); }); */ </script>
样式文件css有几个 需要加载个
body { font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; color: #FFF; font-size: 12px; background: #000; } h1 { font-size: 52px; text-align: center; } h1,h2,h3,h4 { font-weight: 100; } #photo_container { width: 960px; height: 400px; margin: auto; background-color: #000; } p { text-align: center; } /*定义文字样式*/ A {FONT-SIZE: 12px; COLOR: #000;} A:link {COLOR: #2d8931; TEXT-DECORATION: none;} A:visited {COLOR: #333; TEXT-DECORATION: none;} A:hover {COLOR: #333; TEXT-DECORATION:underline;} A:active {COLOR: #333; TEXT-DECORATION: none;} #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('prev.png') no-repeat center center; } #swipe_nav_next { background: #333 url('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('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; } .counter { float: left; height: 6px; background-color: #FFF; z-index: 200; height: 6px; padding: 0; margin: 0; } .counter:hover { cursor: pointer; background-color: #ff00fc !important; } .current { background-color: #ff00fc !important; }
基于jquery的网站幻灯片切换效果焦点图代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@