基于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 相关文章推荐
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
js读写json文件实例代码
Oct 21 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
初识PHP中的Swoole
2016/04/05 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python MySQLdb Linux下安装笔记
2015/05/09 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python装饰器结合递归原理解析
2020/07/02 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
详解python的super()的作用和原理
2020/10/29 Python
Python的信号库Blinker用法详解
2020/12/31 Python
大课间体育活动方案
2014/03/12 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
使用Python开发冰球小游戏
2022/04/30 Python