基于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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
axios封装与传参示例详解
Oct 18 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获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Apache如何部署django项目
2017/05/21 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python的常见矩阵运算(小结)
2019/08/07 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
交通事故调解协议书
2014/04/16 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
军训决心书范文
2015/09/22 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Go语言读取txt文档的操作方法
2022/01/22 Golang
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers