jquery的网站幻灯片切换效果焦点图

来源:互联网 发布:淘宝销号 编辑:程序博客网 时间:2024/05/09 00:44

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   });  });  //http://www.unitymanual.com/topic/index.html  // 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;}