手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jquery的网站幻灯片切换效果焦点图代码
基于jquery的网站幻灯片切换效果焦点图代码
摘要:导入jquery代码复制代码代码如下:varcarousel_images=["images/01.jpg","images/02.jpg"...

导入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;

}

【基于jquery的网站幻灯片切换效果焦点图代码】相关文章:

光标定位等TextRange的操作的范例代码

JS+CSS实现的拖动分页效果实例

jQuery实现强制cookie过期方法汇总

JavaScript实现点击文字切换登录窗口的方法

jQuery实现返回顶部效果的方法

JQuery分屏指示器图片轮换效果实例

基于jQuery插件实现环形图标菜单旋转切换特效

网页常用特效代码整理

jQuery实现div随意拖动的实例代码(通用代码)

jQuery预加载图片常用方法

精品推荐
分类导航