本文目录

样式表

1
2
3
4
5
6
7
8
9
<style type="text/css">
#slideBox{height:374px;width:990px;background-image:url('/votes/jcjmjmr/slideBox.png');background-repeat:no-repeat;background-color:#fef5f8;margin-top:10px;}
#slideLeft{width:580px;height:340px;margin-left:29px;float:left;margin-top:10px;background-size:580px 340px;transition:background-image 2s;}
#slideRight{width:350px;height:340px;float:right;margin-top:10px;margin-right:21px;}
#slideNumber{width:580px;height:24px;position:relative;top:316px;background-color:rgba(0,0,0,0.7);color:#fff;}
#slideNumber a{margin:4px;width:18px;display:inline-block;text-align:center;line-height:20px;height:18px;color:#fff;background-color:#18B8C4;}
#slideNumber a:hover{text-decoration:none;background-color:#09f;cursor:pointer;}
#slideText{width:440px;height:24px;line-height:24px;position:relative;top:292px;float:right;color:#fff;text-align:right;padding-right:12px;}
</style>

框架

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 幻灯片 我这里以5张为例 -->
<div id="slideBox">
    <div id="slideLeft">
        <div id="slideNumber"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a></div>
        <div id="slideText"></div>
    </div>
    <div id="slideRight">
        <div id="slideText"></div>
        <div id="slideQRCode"></div>
    </div>
    <div style="clear:both;"></div>
</div>

js

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
function ChangePic(ids)
{
    switch(ids)
    {
        case 1:
            jQuery("#slideLeft").css({"background-image":"url('http://www.sinaimg.cn/dy/slidenews/4_img/2014_50/704_1502763_259801.jpg')"});
            jQuery("#slideText").text("一号超威蓝猫");
            break;
        case 2:
            jQuery("#slideLeft").css({"background-image":"url('http://img.taopic.com/uploads/allimg/111227/9113-11122H0415612.jpg')"});
            jQuery("#slideText").text("二号金坷垃");
            break;
        case 3:
            jQuery("#slideLeft").css({"background-image":"url('http://pic.7y7.com/201312/2013121133604245_600x0.jpg')"});
            jQuery("#slideText").text("三号德玛西亚");
            break;
        case 4:
            jQuery("#slideLeft").css({"background-image":"url('http://img.taopic.com/uploads/allimg/111123/6441-111123104T214.jpg')"});
            jQuery("#slideText").text("四号开箱行动");
            break;
        case 5:
            jQuery("#slideLeft").css({"background-image":"url('http://static.ragnaroks.org/image/fun/funny-pictures-20150104/5.gif')"});
            jQuery("#slideText").text("五号张学友");
            break;
        default:
            console.log('Error');
            //console.log(ids);
    }
}
function AutoChangePic(ids)
{
    switch(ids)
    {
        case 1:
            jQuery("#slideLeft").css({"background-image":"url('http://www.sinaimg.cn/dy/slidenews/4_img/2014_50/704_1502763_259801.jpg')"});
            jQuery("#slideText").text("一号超威蓝猫");
            hdpid=2;
            break;
        case 2:
            jQuery("#slideLeft").css({"background-image":"url('http://img.taopic.com/uploads/allimg/111227/9113-11122H0415612.jpg')"});
            jQuery("#slideText").text("二号金坷垃");
            hdpid=3;
            break;
        case 3:
            jQuery("#slideLeft").css({"background-image":"url('http://pic.7y7.com/201312/2013121133604245_600x0.jpg')"});
            jQuery("#slideText").text("三号德玛西亚");
            hdpid=4;
            break;
        case 4:
            jQuery("#slideLeft").css({"background-image":"url('http://img.taopic.com/uploads/allimg/111123/6441-111123104T214.jpg')"});
            jQuery("#slideText").text("四号开箱行动");
            hdpid=5;
            break;
        case 5:
            jQuery("#slideLeft").css({"background-image":"url('http://static.ragnaroks.org/image/fun/funny-pictures-20150104/5.gif')"});
            jQuery("#slideText").text("五号张学友");
            hdpid=1;
            break;
        default:
            console.log('Error');
            //console.log(ids);
    }
    setTimeout(function(){AutoChangePic(hdpid)},5000);//递归调用
}
 
jQuery(document).ready(function(){
    jQuery("#frt").remove();//删除底部
    jQuery(".join_us").remove();//删除头部按钮
    jQuery("ul.navtop li a").text('');//删除导航文字
    jQuery("div.side_right").remove();//删除幻灯右侧
    //初始化幻灯片
    jQuery("#slideLeft").css({"background-image":"url('http://www.sinaimg.cn/dy/slidenews/4_img/2014_50/704_1502763_259801.jpg')"});
    jQuery("#slideText").text("一号超威蓝猫");    
    setTimeout(function(){AutoChangePic(hdpid)},5000);
});
 
jQuery("#slideNumber a").click(
    function(){
        ChangePic(parseInt(jQuery(this).text()));
    }
);

最终效果