jQ网站幻灯片切换效果焦点图代码

这款jQuery网站幻灯片切换效果焦点图非常大气,要是网站首页应用此款效果,必定是蓬荜生辉啊！

导入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;
}
时间： 2024-10-26 21:16:46

jQ网站幻灯片切换效果焦点图代码的相关文章

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

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"

jQuery实现标题有打字效果的焦点图代码_jquery

本文实例讲述了jQuery实现标题有打字效果的焦点图代码.分享给大家供大家参考,具体如下: 给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能.这款焦点图适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/ 完整实例代码代码点击此处本站

韩国四屏切换Flash焦点图轮换代码

本文章提供的这款flash焦点图是一款呢,这些焦点图具有韩国风格与风味哦,如果你就下载吧,复制下面的内容保存到dw里成.htm文件就OK了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码_jquery

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery图片轮播(焦点图)插件</title> <link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css

jquery带下拉菜单和焦点图代码分享_jquery

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图:                           ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"

Powerpoint动画教程：设置幻灯片切换效果

  今天我们用动画的形式介绍在Powerpoint演示文稿中设置幻灯片切换效果的方法和技巧. 为了增强Powerpoint幻灯片的放映效果,我们可以为每张幻灯片设置切换方式,以丰富其过渡效果. 1.选中需要设置切换方式的幻灯片. 2.执行"幻灯片放映→幻灯片切换"命令,打开"幻灯片切换"任务窗格. 3.选择一种切换方式(如"横向棋盘式"),并根据需要设置好"速度"."声音"."换片方式"

jquery-main-aim-jquery怎么点击左右箭头实现这样的幻灯片切换效果

问题描述 jquery怎么点击左右箭头实现这样的幻灯片切换效果 解决方案 jquery 实现图片切换幻灯片效果Jquery的点击切换效果 解决方案二: 忌讳用现成的框架吗?bootstrap有哦,而且很大方美观

android tab切换效果如图？？？求实现思路

问题描述 android tab切换效果如图???求实现思路 解决方案 Android实现Tab切换效果总结 解决方案二: 其实这个效果分块解释,这样的效果不难.上面的四个按钮要做style,选择和非选择要有相应的图片背景就ok了. 解决方案三: 谢谢,我真正想问的是 上边 白色 和 灰色倾斜的的圆角只能用图片?? 解决方案四: 上边的白色和灰色,用图片实现比较快,而且方便.也可以做动画什么的. 解决方案五: 上边的是使用图片显示,下面使用Viewpager就行了.

animate 实现滑动切换效果【实例代码】_jquery

今天和大家分享一下用 animate 实现滑动切换效果的小例子 大家都知道jQuery 提供的有一下几种方法能够实现滑动效果: 1.slideDown() 2.slideUp() 3.slideToggle() 但是以上的滑动不太方便控制其滑动的方向,所以我们还是自己动手写一个吧... 其代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equ