以下是 jQuery全屏响应式图片轮播代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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">
<meta name="robots" content="all">
<!--start-->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>jQuery全屏响应式图片轮播代码</title>
<!--end-->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!--默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。-->
<link href="css/all.css" type="text/css" rel="stylesheet">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/studio.js" type="text/javascript"></script>
</head>
<body id="portfolio" class="sel_portfolio">
<!-- container -->
<div class="container">
<div class="main">
<!--ps_box-->
<div class="ps_box">
<div class="pics_switch">
<div class="pb">
<div class="pic_box"><a class="pic_banner_001" target="_blank" href="#"></a></div>
<div class="pic_box"><a class="pic_banner_002" target="_blank" href="#"></a></div>
<div class="pic_box"><a class="pic_banner_003" target="_blank" href="#"></a></div>
<div class="pic_box"><a class="pic_banner_004" target="_blank" href="#"></a></div>
</div>
<div class="viewArrows prev">上一张</div>
<div class="viewArrows next">下一张</div>
<div class="pics_switch_clients">
<ul>
<li class="li_1"><span class="current">1</span></li>
<li class="li_2"><span>2</span></li>
<li class="li_3"><span>3</span></li>
<li class="li_4"><span>4</span></li>
</ul>
</div>
</div>
</div>
<!--case_box-->
</div>
</div>
</body>
</html>
JS代码(studio.js):
$(function(){
$('a').focus(function(){
$(this).blur();
}
);
}
);
///LOGO渐显渐隐////*$(function(){
$('.header .logo').live({
mouseenter:function(){
$(this).fadeTo(200,0.6);
}
,mouseleave:function(){
$(this).fadeTo(200,1);
}
}
);
}
);
*/
///导航渐显渐隐////*$(function(){
$('.header .nav a').click(function(){
$(this).addClass('current');
}
);
$('.header .nav a').live({
mouseenter:function(){
$(this).fadeTo(200,0.6);
}
,mouseleave:function(){
$(this).fadeTo(200,1);
}
}
);
}
);
*/
<!-- 首页超大banner切换效果 -->$(function(){
var index = 0;
var imgWidth = $('.pics_switch .pic_box').width();
//单张图片宽度//alert(imgWidth);
var len = $('.pics_switch .pic_box').length;
//图片数//alert(len)var totalImgWidth = imgWidth*len;
//图片序列宽度//默认banne宽度是1600，低于1600的分辨率会出现位置偏差，需要调整，故在低于1600下设置banner宽度为100%；if($(window).width()<imgWidth){
$('.ps_box .pics_switch').css({
'width':$(window).width()}
);
$('.ps_box .pics_switch .pic_box').css({
'width':$(window).width()}
);
$('.ps_box .pics_switch .pic_box a').css({
'width':$(window).width()}
);
imgWidth = $(window).width();
}
//小按钮鼠标滑过透明度$('.ps_box .pics_switch_clients ul li').css({
'opacity':0.3}
);
$('.ps_box .pics_switch_clients ul li span.current').css({
'opacity':0.8}
);
$('.pics_switch_clients li').hover(function(){
$(this).addClass('hover');
}
,function(){
$(this).removeClass('hover');
}
);
//左右翻页按钮滑过透明度$('.ps_box .pics_switch .viewArrows').css({
'opacity':0.4}
);
$('.ps_box .pics_switch .viewArrows').hover(function(){
$(this).fadeTo(200,0.8);
}
,function(){
$(this).fadeTo(200,0.4);
}
);
//为小按钮添加鼠标滑入事件，以显示相应的内容$('.ps_box .pics_switch_clients ul li').css("opacity",0.4).mouseover(function(){
index = $('.ps_box .pics_switch_clients ul li').index(this);
showPics(index);
}
).eq(0).trigger("mouseover");
//上一页按钮$(".ps_box .prev").click(function(){
index -= 1;
if(index == -1){
index = len - 1;
}
showPics(index);
}
);
//下一页按钮$(".ps_box .next").click(function(){
index += 1;
if(index == len){
index = 0;
}
showPics(index);
}
);
$('.ps_box .pb').css({
'width':totalImgWidth}
);
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放$('.ps_box .pb').hover(function(){
clearInterval(picTimer);
}
,function(){
picTimer = setInterval(function(){
showPics(index);
index++;
if(index == len){
index = 0;
}
}
,6000);
//此4000代表自动播放的间隔，单位：毫秒}
).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容function showPics(index){
var nowLeft = -index*imgWidth;
//根据index值计算ul元素的left值$('.ps_box .pb').stop(true,false).animate({
"marginLeft":nowLeft}
,1000,'easeInOutExpo');
//通过animate()调整ul元素滚动到计算出的position$('.ps_box .pics_switch_clients ul li span').stop(true,false).animate({
"opacity":"0.4"}
,600).eq(index).stop(true,false).animate({
"opacity":"1"}
,600);
//为当前的按钮切换到选中的效果}
}
);
<!--异步加载处理-->function loadPic(e,type){
//console.debug(e.currentTarget,type);
var span = e.srcElement || e.target;
if (span.tagName !== 'SPAN'){
span = span.parentNode;
}
type = type || 1;
$.get('ajax.php?cid='+type,function(data){
$('#picHtml').html(data);
setMarginRightBlank();
}
)$('.tabs span').removeClass('current');
//var temp = type-1;
//$('.tabs span:eq(' + temp + ')').addClass('current');
$(span).addClass('current');
}
$(function(){
$('.case_box .tabs span').hover(function(){
$(this).children().css({
'color':'#000'}
);
}
,function(){
$(this).children().css({
'color':''}
);
}
);
}
);
<!-- Tabs异步处理 -->$(function(){
$('.sel_portfolio .tabs span').live('click',function(){
var spanNum = $('.sel_portfolio .tabs span').index($(this));
$('.sel_portfolio .tabs span').removeClass('current');
$(this).addClass('current');
$('.sel_portfolio .case_box .inner_ul_box ul').css({
'display':'none'}
);
$(this).parent().parent().next().children().children().eq(spanNum).css({
'display':'block'}
);
}
);
}
);
///为#picHtml_1 #picHtml_2 #picHtml_3 #picHtml_4 每第4个li设置marigin-right为0////*$(function(){
var i = 1;
for (i=1;
i<=80;
i++){
var ulIndex = 4*i;
caseBoxUlIndex = $('#picHtml_1 li').eq(ulIndex-1).index('#picHtml_1 li');
$('#picHtml_1 li').eq(caseBoxUlIndex).addClass('mr0');
}
}
);
$(function(){
var i = 1;
for (i=1;
i<=80;
i++){
var ulIndex = 4*i;
caseBoxUlIndex = $('#picHtml_2 li').eq(ulIndex-1).index('#picHtml_2 li');
$('#picHtml_2 li').eq(caseBoxUlIndex).addClass('mr0');
}
}
);
$(function(){
var i = 1;
for (i=1;
i<=80;
i++){
var ulIndex = 4*i;
caseBoxUlIndex = $('#picHtml_3 li').eq(ulIndex-1).index('#picHtml_3 li');
$('#picHtml_3 li').eq(caseBoxUlIndex).addClass('mr0');
}
}
);
$(function(){
var i = 1;
for (i=1;
i<=80;
i++){
var ulIndex = 4*i;
caseBoxUlIndex = $('#picHtml_4 li').eq(ulIndex-1).index('#picHtml_4 li');
$('#picHtml_4 li').eq(caseBoxUlIndex).addClass('mr0');
}
}
);
*/
///案例图渐显渐隐////*$(function(){
$('.case_box ul li .cover').live({
mouseenter:function(){
$(this).find('img').fadeTo(100,0.4);
}
,mouseleave:function(){
$(this).find('img').fadeTo(100,1);
}
}
);
}
);
*/
///案例图滑过显示红色//$(function(){
var hoverMask = "<div class='hoverMask'></div>";
$('.case_box ul li .cover').live({
mouseenter:function(){
$(this).prepend(hoverMask);
$('.hoverMask').css({
'opacity':0}
);
$('.hoverMask').fadeTo(200,0.8);
}
,mouseleave:function(){
//$('.hoverMask').fadeTo(200,0);
$('.case_box ul li .cover .hoverMask').remove();
}
}
);
}
);
///案例图Viedo添加播放图标///$(function(){
$('.case_box ul li .video').append('<div class="play_icon"></div>');
var video_width = $('.case_box ul li .video img').width();
var video_height = $('.case_box ul li .video img').height();
$('.case_box ul li .video .play_icon').css({
'position':'absolute','left':(video_width-45)/2+'px','top':(video_height-45)/2+'px','width':'45px','height':'45px'}
);
//$('.case_box ul li .video').live({
mouseenter:function(){
$(this).find('div').addClass('play_icon_hover');
}
,mouseleave:function(){
$(this).find('div').removeClass('play_icon_hover');
}
}
);
}
);
///案例详情页左右箭头///$(function(){
$('.item_detail .pages span').css({
'opacity':0.2}
);
$('.item_detail .pages span.prev').hover(function(){
$(this).fadeTo(200,0.5);
}
,function(){
$(this).fadeTo(200,0.2);
}
);
$('.item_detail .pages span.next').hover(function(){
$(this).fadeTo(200,0.5);
}
,function(){
$(this).fadeTo(200,0.2);
}
);
}
);
///portfolio_all页面：异步加载中案例列表中默认让每一行的最后一个box的margin-right为0；$(function(){
setMarginRightBlank();
}
);
function setMarginRightBlank(){
var i = 1;
for (i=1;
i<=80;
i++){
var ulIndex = 4*i;
caseBoxUlIndex = $('#picHtml li').eq(ulIndex-1).index('#picHtml li');
//$('#picHtml li').eq(caseBoxUlIndex).addClass('mr0');
}
}
//查看更多案例view_more btn$(function(){
$('.view_more').css({
'opacity':0.9}
);
$('.view_more').hover(function(){
$(this).fadeTo(200,1);
}
,function(){
$(this).fadeTo(200,0.9);
}
);
}
);
//响应式针对收起导航的点击事件判断：iPhone4 横屏$(document).ready(function(){
if($(window).width()==480){
//alert($(window).width());
$('.header .nav a').live({
mouseenter:function(){
$(this).fadeTo(200,1);
}
,mouseleave:function(){
$(this).fadeTo(200,1);
}
}
);
$(".menu").click(function(){
$('.nav').toggle();
}
);
}
}
)//响应式针对收起导航的点击事件判断：iPhone4 竖屏$(document).ready(function(){
if($(window).width()==320){
//alert($(window).width());
$('.header .nav a').live({
mouseenter:function(){
$(this).fadeTo(200,1);
}
,mouseleave:function(){
$(this).fadeTo(200,1);
}
}
);
$(".menu").click(function(){
$('.nav').toggle();
}
);
}
}
)//文章列表滑过态$(function(){
$('.articles_box li').live({
mouseenter:function(){
$(this).addClass('hover');
}
,mouseleave:function(){
$(this).removeClass('hover');
}
}
);
}
);
CSS代码(all.css):
@charset "utf-8";/* css reset */
*{margin:0;padding:0;}
p{text-align:left;line-height:20px;}
img{border:none;}
li{list-style-type:none;}
a{color:#888888;text-decoration:none;}
a:link{color:#888888;}
a:visited{color:#888888;}
a:hover{text-decoration:underline;}
a:active{color:#888888;}
.fl{float:left;}
.fr{float:right;}
.clearf{zoom:1;}
.clearf:after{content:'\20';display:block;clear:both;}
html{overflow:scroll;overflow-x:hidden}
/******************** css sprite ********************/
body{font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#333333;background:#ffffff;}
.logo,.menu,.header .nav a,.ps_box .pics_switch_clients ul li span,.firmIntro .txt_1,.firmIntro .shares a,#case span em,.firmIntro .more,#home .case_box .shead,#service_type ul li .icon,#about .big_pic .txt_3 a,.item_detail .pages span{background:url(images/iov-studio.png) left top;overflow:hidden;}
.logo{background-position:-376px -3px;}
.menu{display:none;}
#service_type ul li .txt{background:url(images/dot_y.gif) right top repeat-y;}
#service .big_pic{}
#about .big_pic{background:url(images/about_banner.jpg) center top no-repeat;}
body{text-align:center;}
#wrapper{}
#inner_wrapper{}
#i_inner_wrapper{}
.header{width:960px;}
.container{}
.main{}
.content{}
/******************** home ********************/
/**/
.ps_box{margin-bottom:50px;}
.pics_switch{position:relative;width:1600px;margin:auto;height:580px;background:#1b1c24;overflow:hidden;}
.pics_switch .pb{height:580px;}
.pics_switch .pic_box{/*position:absolute;left:0;top:0;*/
float:left;width:1600px;height:580px;overflow:hidden;}
.pics_switch .pic_box a{margin:auto;display:block;width:1600px;height:580px;}
/*左右翻页箭头*/
.viewArrows{display:block;width:50px;height:50px;line-height:50px;cursor:pointer;text-indent:-99999999px;position:absolute;top:269px;}
.prev{left:200px;background:url(images/prev.png) center center no-repeat;}
.next{right:200px;background:url(images/next.png) center center no-repeat;}
.pics_switch .pic_box a.pic_banner_001{background:url(http://ww3.sinaimg.cn/large/adde8400gw1eblxy40vs6j218g0g4wi7.jpg) center top no-repeat;}
.pics_switch .pic_box a.pic_banner_002{background:url(http://ww2.sinaimg.cn/large/adde8400gw1eblxzy7emij218g0g4160.jpg) center top no-repeat;}
.pics_switch .pic_box a.pic_banner_003{background:url(http://ww3.sinaimg.cn/large/adde8400gw1eblxxxsai8j218g0g4jux.jpg) center top no-repeat;}
.pics_switch .pic_box a.pic_banner_004{background:#000 url(http://ww1.sinaimg.cn/large/adde8400gw1ebly43852cj218g0g4wi0.jpg) center top no-repeat;}
.pic_box_style_1{background:#000000;}
.pic_box_style_2{background:#1b55d7;}
.pic_box_style_3{background:#4264a9;}
.pic_box_style_4{background:#000000;}
.pic_box_style_5{background:#101117;}
.pic_box_style_6{background:#1e1e20;}
/**/
.ps_box .pics_switch_clients{display:;width:100%;height:80px;position:absolute;left:0;bottom:0;overflow:hidden;}
.ps_box .pics_switch_clients ul{margin:20px auto 0;width:95px;height:auto;overflow:hidden;}
.ps_box .pics_switch_clients ul li{float:left;padding:20px 0;cursor:pointer;}
.ps_box .pics_switch_clients ul li span{display:block;margin-right:5px;width:20px;height:1px;text-indent:-999999px;background:#FFF;}
.ps_box .pics_switch_clients ul li.li_1 span{background-position:0 -124px;}
/*normal*/
.ps_box .pics_switch_clients ul li.li_2 span{background-position:-159px -124px;}
.ps_box .pics_switch_clients ul li.li_3 span{background-position:-318px -124px;}
.ps_box .pics_switch_clients ul li.li_4 span{margin-right:0;background-position:-477px -124px;}
.ps_box .pics_switch_clients ul li.li_5 span{background-position:-636px -124px;}
.ps_box .pics_switch_clients ul li.li_6 span{background-position:-795px -124px;}
.ps_box .pics_switch_clients ul li.li_1 .hover{background-position:0 -185px;}
/*hover*/
.ps_box .pics_switch_clients ul li.li_2 .hover{background-position:-159px -185px;}
.ps_box .pics_switch_clients ul li.li_3 .hover{background-position:-318px -185px;}
.ps_box .pics_switch_clients ul li.li_4 .hover{background-position:-477px -185px;}
.ps_box .pics_switch_clients ul li.li_5 .hover{background-position:-636px -185px;}
.ps_box .pics_switch_clients ul li.li_6 .hover{background-position:-795px -185px;}
.ps_box .pics_switch_clients ul li.li_1 .current{background-position:0 -185px;}
/*current*/
.ps_box .pics_switch_clients ul li.li_2 .current{background-position:-159px -185px;}
.ps_box .pics_switch_clients ul li.li_3 .current{background-position:-318px -185px;}
.ps_box .pics_switch_clients ul li.li_4 .current{background-position:-477px -185px;}
.ps_box .pics_switch_clients ul li.li_5 .current{background-position:-636px -185px;}
.ps_box .pics_switch_clients ul li.li_6 .current{background-position:-795px -185px;}
/**/
/******************** 响应式 ********************/
@media all and (max-width:1030px){}
/* Default wide-screen styles */
@media all and (max-width:1024px){.header .inner_header{width:960px;height:90px;}
.pics_switch,.pics_switch .pic_box,.pics_switch .pic_box a{width:1024px;}
.prev{left:25px;}
.next{right:25px;}
}
@media all and (max-width:960px){.ps_box{overflow:hidden;}
.pics_switch{height:400px;}
.pics_switch .pb{height:400px;}
.pics_switch .pic_box a{height:400px;background-size:1103.4px 400px !important;}
.pics_switch,.pics_switch .pic_box,.pics_switch .pic_box a{width:960px;}
}
@media all and (max-width:768px){.ps_box{overflow:hidden;}
.pics_switch{height:400px;}
.pics_switch .pb{height:400px;}
.pics_switch .pic_box a{height:400px;background-size:1103.4px 400px !important;}
.pics_switch,.pics_switch .pic_box,.pics_switch .pic_box a{width:768px;}
.case_box{overflow:hidden;}
.case_box ul{width:740px;}
.case_box,.case_box .tabs{width:700px;}
.case_box .ul_box{width:740px;}
.case_box ul li .cover{width:218px;}
}
@media all and (max-width:640px){.prev{left:40px;}
.next{right:40px;}
.ps_box{margin-bottom:30px;overflow:hidden;}
.pics_switch{height:400px;}
.pics_switch .pb{height:400px;}
.pics_switch .pic_box a{height:400px;background-size:1103.4px 400px !important;}
.pics_switch,.pics_switch .pic_box,.pics_switch .pic_box a{width:640px;}
}
@media all and (max-width:480px){.prev{left:10px;}
.next{right:10px;}
.ps_box{margin-bottom:25px;overflow:hidden;}
.ps_box .pics_switch_clients{height:30px;}
.ps_box .pics_switch_clients ul{margin:0 auto;}
.ps_box .pics_switch_clients ul li{padding:15px 0;}
.pics_switch{width:480px;height:200px;}
.pics_switch .pb{height:250px;}
.pics_switch .pic_box a{height:200px;background-size:630px 218px !important;}
.pics_switch,.pics_switch .pic_box,.pics_switch .pic_box a{width:480px;}
}
@media all and (max-width:320px){.prev{left:10px;}
.next{right:10px;}
.ps_box{margin-bottom:15px;overflow:hidden;}
.ps_box .pics_switch_clients{height:30px;}
.ps_box .pics_switch_clients ul{margin:0 auto;}
.ps_box .pics_switch_clients ul li{padding:15px 0;}
.pics_switch{width:320px;height:200px;}
.pics_switch .pb{height:200px;}
.pics_switch .pic_box a{height:200px;background-size:568px 200px !important;}
.pics_switch,.pics_switch .pic_box,.pics_switch .pic_box a{width:320px;}
}
@media all and (max-width:240px){body{}
}
分享到QQ
分享到微博
微信扫一扫
