图片轮播

图片轮播效果图:

html  test.html

?
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!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=gb2312" />
<title>test</title>
<link type="text/css" href="css/style.css" rel="stylesheet"  />
<script language="javascript" type="text/javascript" src="js/jquery-1.js" ></script>
<script language="javascript" type="text/javascript" src="js/index.js" ></script>
</head>
 
<body>
  
    <div class="j11308_slider_banner">
      <div class="j11308_slider_banner1">
       <div class="slides">
 <ul class="slide_pic">
            <li class="cur"><a rel="nofollow" href="http://www.j1.com/activity/maternal.html" target="_blank"><img alt="母婴特惠5折" src="http://img03.j1.com/images/images1308/index_father.jpg" /></a></li>
            <li><a rel="nofollow" href="http://miao.j1.com/" target="_blank"><img alt="9点半包邮秒杀" src="http://img03.j1.com/images/images1308/index_miao.jpg" /></a></li>
            <li><a rel="nofollow" href="http://tuan.j1.com/" target="_blank"><img alt="精品团购秘籍" src="http://img03.j1.com/images/images1308/index_jph.jpg" /></a></li>
            <li><a rel="nofollow" href="http://dongeejiao.j1.com/" target="_blank"><img alt="东阿阿胶优惠" src="http://img03.j1.com/images/images1308/index_deej_4.jpg" /></a></li>
            <li><a rel="nofollow" href="http://www.j1.com/promotion/1782.html" target="_blank"><img alt="参茸5折起" src="http://img03.j1.com/images/images1308/index_srzc.jpg" /></a></li>
            <li><a rel="nofollow" href="http://www.j1.com/promotion/1726.html" target="_blank"><img alt="汤臣倍健买1送2" src="http://img03.j1.com/images/images1308/index_dbzf.jpg" /></a></li>
            <li><a rel="nofollow" href="http://www.j1.com/activity/jsyp.html" target="_blank"><img alt="避孕套买就送" src="http://img03.j1.com/images/images1308/byt-20131119.jpg" /></a></li>
          </ul>
          <ul class="slide_txt op">
            <li class="cur"><a rel="nofollow" href="http://www.j1.com/activity/maternal.html" target="_blank">母婴特惠5折</a></li>
            <li><a rel="nofollow" href="http://miao.j1.com/" target="_blank">秒杀价1折起</a></li>
            <li><a rel="nofollow" href="http://tuan.j1.com/" target="_blank">精品团购秘籍</a></li>
            <li><a rel="nofollow" href="http://dongeejiao.j1.com/" target="_blank">东阿阿胶优惠</a></li>
            <li><a rel="nofollow" href="http://www.j1.com/promotion/1782.html" target="_blank">参茸5折起</a></li>
            <li><a rel="nofollow" href="http://www.j1.com/promotion/1726.html" target="_blank">汤臣倍健买1送2</a></li>
            <li><a rel="nofollow" href="http://www.j1.com/activity/jsyp.html" target="_blank">避孕套买就送</a></li>
          </ul>
        </div>
      </div>
      <div class="j11308_shadow"></div>
    </div>
 
 
</body>
 
</html>
 
 
index.js文件内容
 
    /*banner*/
jQuery(function ($) {
    if ($(".slide_pic").length > 0) {
        var defaultOpts = { interval: 3000, fadeInTime: 300, fadeOutTime: 200 };
        var _titles = $("ul.slide_txt li");
        var _titles_bg = $("ul.op li");
        var _bodies = $("ul.slide_pic li");
        var _count = _titles.length;
        var _current = 0;
        var _intervalID = null;
        var stop = function () { window.clearInterval(_intervalID); };
        var slide = function (opts) {
            if (opts) {
                _current = opts.current || 0;
            } else {
                _current = (_current >= (_count - 1)) ? 0 : (++_current);
            };
            _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () {
                _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
                _bodies.removeClass("cur").eq(_current).addClass("cur");
            });
            _titles.removeClass("cur").eq(_current).addClass("cur");
            _titles_bg.removeClass("cur").eq(_current).addClass("cur");
        };
        var go = function () {
            stop();
            _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval);
        };
        var itemMouseOver = function (target, items) {
            stop();
            var i = $.inArray(target, items);
            slide({ current: i });
        };
        _titles.hover(function () { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles); } else { stop(); } }, go);
        _bodies.hover(stop, go);
        go();
    }
});
 
style.css文件内容
 
img{border:0;}
.j11308_slider_banner{ padding:10px 10px 0 10px; width:750px; height:415px;float:left; }
    .j11308_slider_banner1{ height:414px;}
    /*banner*/
    .slides {width:750px; height:414px; overflow: hidden; position:relative;}
    .slide_pic { margin: 0px; padding: 0px; width:750px; overflow:hidden; list-style:none; }
    .slide_pic img { width:750px; height:414px; }
    .slide_pic li { display: none; }
    .slide_pic li.cur { display:block; }
    .slide_txt{ padding:0px; margin:0px; left:0px; bottom:0px; position:absolute;}
    .slide_txt li {width:107px; height:30px; float:left; overflow:hidden; list-style:none; line-height:30px; text-align:center;}
    .slide_txt a,.slide_txt a:link,.slide_txt a:visited{width:107px; height:30px; color:#fff; font-size:12px; display: block; text-decoration:none;}
    .slide_txt a:hover { color:#fff;}
    .op li { background:#000; filter:alpha(opacity=80); opacity:0.8;}
    .op li.cur {background:#666; filter:alpha(opacity=80); opacity:0.8; }

 

 

 

posted @   雨路亦露  阅读(468)  评论(1)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示