基于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实现的支持lrc歌词的播放器
May 17 Javascript
通过修改referer下载文件的方法
May 11 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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安全性问题中的:Null 字符问题
2013/06/21 PHP
图片完美缩放
2006/09/07 Javascript
JavaScript中的私有成员
2006/09/18 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jquery选择器使用详解
2014/04/08 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python简单日志处理类分享
2015/02/14 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
2013年学期结束动员演讲稿
2014/01/07 职场文书
慰问信模板
2015/02/14 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL