基于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 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 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
PHP数据库操作面向对象的优点
2006/10/09 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php 表单数据的获取代码
2009/03/10 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python计算信息熵实例
2020/06/18 Python
优秀的计算机专业求职信范文
2013/12/27 职场文书
简历中的自我评价范文
2014/02/05 职场文书
说明书范文
2014/05/07 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
比赛主持人开场白
2015/05/29 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
解决pytorch-gpu 安装失败的记录
2021/05/24 Python