您的位置：首页 > 其它

如何实现图片轮换的效果

2015-06-08 11:12 78 查看

实现上面的效果图：

HTML代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>-->
<title>3A</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">-->
<script src="jquery-2/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<!--<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>-->
</head>
<body>
<div class="homeWraper">
<div id="focus">
<ul>
<li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="img/banner01.jpg"/></a></li>
</ul>
</div>
</div>
</body>
</html>

css代码如下：

#focus{
width: 1239px;
height: 370px;
overflow: hidden;
position: relative;
margin: 25px auto;
}
#focus ul {
position: absolute;
}
#focus ul li{
float: left;
width: 1239px;
height: 370px;
overflow: hidden;
position: relative;
}

#focus ul li div {
position: absolute;
overflow: hidden;
}
#focus .btn {
position: absolute;
height: 18px;
right: 19px;
bottom: 11px;
}
#focus .btn span{
display: inline-block;
_display: inline;
_zoom: 1;
width: 19px;
height: 18px;
line-height: 18px;
margin-left: 10px;
_font-size: 0;
cursor: pointer;
background-color: #ffffff;
}
#focus .btn span.on {
background: #0593d3;
}
.proHotsLeft ol.proHotsLeftList{
float: left;
}
.proHotsLeftList li{
position: relative;
cursor: pointer;
width: 355px;
height: 50px;
line-height: 50px;
font-size: 16px;
color: #ffffff;
background-color: #e5e4e4;
border-bottom: 1px solid #fff;
}
.proHotsLeftList li .proHotsLeftNum{
font-size: 30px;
padding-left: 18px;
padding-right: 32px;
color: #b5b4b4;
}
.proHotsLeftList li.hover{
background-color: #0593d3;
border-bottom: 1px solid #91d0ec;
}
.proHotsLeftList li.hover span.arrow{
background-image: url("../images/icon01.png");
background-repeat: no-repeat;
}
.proHotsLeft li.hover span.proHotsLeftNum{
color: #ffffff;
}

js代码如下：

$(function(){
var sWidth = $("#focus").width();
var len = $("#focus ul li").length;
var index = 0;
var picTimer;
var $listItem = $(".proHotsLeft>ol>li");
var $divs = $('.itemRight>div');
var btn = "<div class='btn'>";
for( var i = 0; i < len; i++){
btn +="<span></span>";
}
btn +="</div>";
$("#focus").append(btn);
$("#focus .btn span").mouseenter(function(){
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

$("#focus ul").css("width",sWidth * (len));

$("#focus").hover(function(){
clearInterval(picTimer);
},function(){
picTimer = setInterval(function(){
showPics(index);
index++;
if(index == len) {index = 0;}
},1000)
}).trigger('mouseleave');

function showPics(index){
var nowLeft = -index*sWidth;
$("#focus ul").stop(true,false).animate({"left":nowLeft},300);
$("#focus .btn span").eq(index).addClass('on').siblings().removeClass('on');
}

$listItem.on("mouseenter",function(){
index = $(this).index();
$(this).addClass('hover').siblings().removeClass("hover");
$divs.eq(index).show().siblings().hide();
})
$(".itemCar").on('mouseenter',function(){
var $mask =$("<div class='shadow'></div>");
//        $mask.appendTo($(this).find('.itemImgs'));
$mask.appendTo($(this).children('.itemImgs'));
})
$(".itemCar").on("mouseleave",function(){
//        $(this).find(".shadow").remove();
//children鐨勯€熷害姣攆ind锛堟ā绯婃煡璇級瑕佸揩
$(this).children('.itemImgs').children(".shadow").remove();
})

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航