基于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 相关文章推荐
javascript自然分类法算法实现代码
Oct 11 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
浅谈JS的原型和原型链
Jun 04 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
怎样才能成为PHP高手?学会“懒惰”的编程
2006/12/05 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
php验证码生成代码
2015/11/11 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jQuery 入门讲解1
2009/04/15 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python pygame模块编写飞机大战
2018/11/20 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Django框架 querySet功能解析
2019/09/04 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
英国电气世界:Electrical World
2019/09/08 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
高中生评语大全
2014/04/25 职场文书
学雷锋月活动总结
2014/04/25 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL