Jquery 焦点图-幻灯片效果

简介:

Jquery 焦点图-幻灯片效果(堪比Flash)

(图一)


(图二)


兼容ie6。只是观察发现比较耗资源(它的css是通过js动态的再变换)。

喜欢的可以down下来学习研究下。

Download地址:http://down.51cto.com/data/795354


附页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html  xmlns = "http://www.w3.org/1999/xhtml" >< head >
< meta  http-equiv = "content-type"  content = "text/html; charset=UTF-8" >
< script  type = "text/javascript"  src = "file/jquery-1.js" ></ script >
< script  type = "text/javascript"  src = "file/coin-slider.js" ></ script >
< link  rel = "stylesheet"  href = "file/styles.css"  type = "text/css" >
< link  rel = "stylesheet"  href = "file/coin-slider-styles.css"  type = "text/css" >
</ head >
< body >
     < div  id = "gamesHolder" >
         < div  class = "coin-slider"  id = "coin-slider-games" >
             < div  style = "background-image: url(&quot;games/05.jpg&quot;); width: 565px; height: 290px; position: relative; background-position: left top;"  id = "games" >
                                                         
             < a  href = "#"  target = "_blank" >
                 < img  style = "display: none;"  src = "file/01.jpg"  />
                 < span  style = "display: none;" >
                     < b >标题001</ b >< br >
                     介绍001
                 </ span >
             </ a >
                                                             
             < a  href = "#"  target = "_blank" >
                 < img  style = "display: none;"  src = "file/02.jpg"  />
             </ a >
                                                             
             < a  href = "#"  target = "_blank" >
                 < img  style = "display: none;"  src = "file/03.jpg"  />
             </ a >
                                                             
             < a  href = "#"  target = "_blank" >
                 < img  style = "display: none;"  src = "file/04.jpg"  />
             </ a >
                                                         
             < a  href = "#"  target = "_blank" >
                 < img  style = "display: none;"  src = "file/05.jpg"  />
             </ a >
                                                             
             < a  href = "#"  target = "_blank" >
                 < img  style = "display: none;"  src = "file/06.jpg"  />
                 < span  style = "display: none;" >
                     < b >标题006</ b >< br >
                     介绍006
                 </ span >
             </ a >
             </ div >
         </ div >
     </ div >
< script >
$(document).ready(function() {
     $('#games').coinslider({ hoverPause: false });
});
</ script >
</ body >
</ html >




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1202361,如需转载请自行联系原作者




相关文章
|
7月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
63 1
jQuery+CSS3自动轮播焦点图特效源码
|
Web App开发 JavaScript 前端开发
自制jQuery焦点图切换简易插件
首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下。
自制jQuery焦点图切换简易插件
|
JavaScript
|
JavaScript
jQuery垂直滑动切换焦点图
在线演示 本地下载
924 0
|
JavaScript
jQuery/CSS3 3D焦点图动画
在线演示 本地下载
635 0
|
JavaScript
jQuery图片分组切换焦点图
在线演示 本地下载
777 0
|
JavaScript
jQuery鼠标滑动切换焦点图
在线演示 本地下载
970 0
|
JavaScript
|
JavaScript
缩略图悬浮效果的jQuery焦点图
在线演示 本地下载
866 0
|
JavaScript
jQuery自动轮播图片焦点图
在线演示 本地下载
1214 0