<!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" />

<link href="style/style.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.dev-module{background: url(img/bg1.jpg) center no-repeat; height: 450px;}

.wide{margin: 0 auto; width: 1000px; position: relative;}

.img1{position: absolute; left: 20px; bottom: 20px;}

.img2{position: absolute; left: 0px; bottom: 20px;}

.img3{position: absolute; left: 460px; bottom: 20px;}

.img4{position: absolute; right: 0; bottom: 20px;}

}

</style>

<title>jquery+css3响应式图片轮播 - 站长素材</title>

</head>

<body>

<div class="dev-module">

<!-- one bt one slider -->

<div class="wide">

<!-- <div class="fallback"><img src="p_w_picpaths/home_page_1_fallback.jpg" alt="" /></div> -->

<div id="obo_slider">  

<div class="oneByOne_item">

           <img class="img1" src="img/page2_pc.png" />

           <img class="img2" src="img/page2_pc2.png" />

           <img class="img3" src="img/page2_mobile.png" />

           <img class="img4" src="img/page2_con.png" />

</div>

<div class="oneByOne_item">                                

<a href="http://sc.chinaz.com/"><img src="p_w_picpaths/home7_slide_2.png" class="wp1_3 wp1_left slide2_bot" alt="sc.chinaz.com , ChinaCoder关注前端开发、关注中国IT从业者" /></a>            

<span class="txt1 blue txt_right2">这是一个以国际4A标准来打造的团队</span>

<span class="txt2 blue txt_right2" style="width:380px">一次合作，终身朋友</span>

<span class="txt2 blue txt_right2" style="width:350px">一对一量身定制</span>

<span class="txt4 txt_right2 txt4up"><a href="http://sc.chinaz.com/" onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a></span>

</div>

</div>    

</div>

<!-- /one bt one slider -->

</div>


</body>

<script type="text/javascript" src="js/pa.ui.min.js"></script> 

<script type="text/javascript" src="js/jquery-runbanner.js"></script> 

<script type="text/javascript">

$(function(){

    $('#obo_slider').runbanner({

className: 'oneByOne1',             

easeType: 'random',  //动画参数

slideShow: true  //为false时不会自动播放

});  

})

</script>


</html>