提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

基于jquery的网站幻灯片切换效果焦点图代码

jQuery网站代码 基于 效果 切换 焦点 幻灯片
2023-06-13 09:15:05 时间

导入jquery代码

复制代码代码如下:


<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"type="text/javascript"></script>
 <scriptsrc="js/jquery-image-scale-carousel.js"type="text/javascript"charset="utf-8"></script>
 <script>
 varcarousel_images=[
  "images/01.jpg",
  "images/02.jpg",
  "images/03.jpg",
  "images/04.jpg",
  "images/05.jpg",
  "images/06.jpg",
  "images/07.jpg"
 ];

 //Examplewithoutautoplay
 $(window).load(function(){
  $("#photo_container").isc({
   imgArray:carousel_images
  });
 });

 //Examplewithautoplay
 /*$(window).load(function(){
  $("#photo_container").isc({
   imgArray:carousel_images,
   autoplay:true,
   autoplayTimer:5000//5seconds.
  });
 });*/
 </script>


样式文件css有几个需要加载个

复制代码代码如下:


body{
 font-family:"HelveticaNeue-Light","HelveticaNeueLight","HelveticaNeue",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:#333url("prev.png")no-repeatcentercenter;

}

#swipe_nav_next{
 background:#333url("next.png")no-repeatcentercenter;

}

.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-repeatcentercenter;

}

#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;
}

相关文章