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


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;
}
Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 #Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 #Javascript
异步动态加载js与css文件的js代码
Sep 15 #Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 #Javascript
js左侧三级菜单导航实例代码
Sep 13 #Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 #Javascript
jquery mobile事件多次绑定示例代码
Sep 13 #Javascript
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python贪吃蛇游戏代码
2020/04/18 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
Django model update的多种用法介绍
2020/03/28 Python
python装饰器使用实例详解
2019/12/14 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
农村党支部先进事迹
2014/01/14 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
暑假家长评语大全
2014/04/17 职场文书
服务承诺书格式
2014/05/21 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
荒岛余生观后感
2015/06/09 职场文书
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle