jquery实现图片轮换（美观）

最新推荐文章于 2024-07-12 20:49:16 发布

xiaolifangfulei

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量449

点赞数

分类专栏： jquery 文章标签： html jquery 图片轮换

本文链接：https://blog.csdn.net/xiaolifangfulei/article/details/48933581

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery实现图片轮换，本文章是自己编写，未经同意，不得转载，记录生活，不断成长

HTML源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮换</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
<div class="navy_show_img_div" id="navy_show_img_div">
<ul id="navy_show_img">
<li style="display:block" id="i_0"><a target="_blank"><img src="images/1.jpg"/></a></li>
<li id="i_1"><img src="images/2.jpg"/></li>
<li id="i_2"><img src="images/3.jpg"/></li>
<li id="i_3"><img src="images/4.jpg"/></li>
<li id="i_4"><img src="images/5.jpg"/></li>
<li id="i_5"><img src="images/6.jpg"/></li>
<li id="i_6"><img src="images/7.jpg"/></li>
<li id="i_7"><img src="images/8.jpg"/></li>
<li id="i_8"><img src="images/9.jpg"/></li>
<li id="i_9"><img src="images/10.jpg"/></li>
<li id="i_10"><img src="images/11.jpg"/></li>
<li id="i_11"><img src="images/12.jpg"/></li>
<li id="i_12"><img src="images/6.jpg"/></li>
<li id="i_13"><img src="images/7.jpg"/></li>
<li id="i_14"><img src="images/8.jpg"/></li>
<li id="i_15"><img src="images/9.jpg"/></li>
<li id="i_16"><img src="images/10.jpg"/></li>
<li id="i_17"><img src="images/11.jpg"/></li>
<li id="i_18"><img src="images/12.jpg"/></li>
</ul>
<div id="navy_show_title">
<ul>
<li style="display:block"><a target="_blank"><p>图片1</p></a></li>
<li><a target="_blank"><p>图片2</p></a></li>
<li><a target="_blank"><p>图片3</p></a></li>
<li><a target="_blank"><p>图片4</p></a></li>
<li><a target="_blank"><p>图片5</p></a></li>
<li><a target="_blank"><p>图片6</p></a></li>
<li><a target="_blank"><p>图片7</p></a></li>
<li><a target="_blank"><p>图片8</p></a></li>
<li><a target="_blank"><p>图片9</p></a></li>
<li><a target="_blank"><p>图片10</p></a></li>
<li><a target="_blank"><p>图片11</p></a></li>
<li><a target="_blank"><p>图片12</p></a></li>
<li><a target="_blank"><p>图片13</p></a></li>
<li><a target="_blank"><p>图片14</p></a></li>
<li><a target="_blank"><p>图片15</p></a></li>
<li><a target="_blank"><p>图片16</p></a></li>
<li><a target="_blank"><p>图片17</p></a></li>
<li><a target="_blank"><p>图片18</p></a></li>
<li><a target="_blank"><p>图片19</p></a></li>
</ul>
</div>
<div id="navy_show_divsmall">
<span id="navy_left" ></span>
<div id="navy_show_imgsmall_view">
<ul id="navy_show_imgsmall">
<li><a target="_blank"><img src="images/12.jpg" class="navy_out" id="s_0"/></a></li>
<li><a target="_blank"><img src="images/1.jpg" class="navy_over" id="s_1"/></a></li>
<li><a target="_blank"><img src="images/2.jpg" class="navy_out" id="s_2"/></a></li>
<li><a target="_blank"><img src="images/3.jpg" class="navy_out" id="s_3"/></a></li>
<li><a target="_blank"><img src="images/4.jpg" class="navy_out" id="s_4"/></a></li>
<li><a target="_blank"><img src="images/5.jpg" class="navy_out" id="s_5"/></a></li>
<li><a target="_blank"><img src="images/6.jpg" class="navy_out" id="s_6"/></a></li>
<li><a target="_blank"><img src="images/7.jpg" class="navy_out" id="s_7"/></a></li>
<li><a target="_blank"><img src="images/8.jpg" class="navy_out" id="s_8"/></a></li>
<li><a target="_blank"><img src="images/9.jpg" class="navy_out" id="s_9"/></a></li>
<li><a target="_blank"><img src="images/10.jpg" class="navy_out" id="s_10"/></a></li>
<li><a target="_blank"><img src="images/11.jpg" class="navy_out" id="s_11"/></a></li>
<li><a target="_blank"><img src="images/12.jpg" class="navy_out" id="s_12"/></a></li>
<li><a target="_blank"><img src="images/6.jpg" class="navy_out" id="s_13"/></a></li>
<li><a target="_blank"><img src="images/7.jpg" class="navy_out" id="s_14"/></a></li>
<li><a target="_blank"><img src="images/8.jpg" class="navy_out" id="s_15"/></a></li>
<li><a target="_blank"><img src="images/9.jpg" class="navy_out" id="s_16"/></a></li>
<li><a target="_blank"><img src="images/10.jpg" class="navy_out" id="s_17"/></a></li>
<li><a target="_blank"><img src="images/11.jpg" class="navy_out" id="s_18"/></a></li>

</ul>
</div>
<span id="navy_right"></span>
</div>
</div>
</body>
</body>
</html>

index.css源码：

*{
margin:0px auto;
padding:0px;

}
.navy_show_img_div{
width:650px;
height:400px;
position:relative;
overflow:hidden;
margin-top:50px;

-webkit-box-shadow:0 0 5px 3px rgba(255,0,0,6),0 0 5px 6px rgba(0,182,0,0.6),0 0 5px 10px rgba(255,255,0,0.6);
-moz-box-shadow:0 0 5px 3px rgba(255,0,0,6),0 0 5px 6px rgba(0,182,0,0.6),0 0 5px 10px rgba(255,255,0,0.6);
box-shadow:0 0 5px 3px rgba(255,0,0,6),0 0 5px 6px rgba(0,182,0,0.6),0 0 5px 10px rgba(255,255,0,0.6);
}
.navy_show_img_div li{
list-style-type:none;
float:left;
}
#navy_show_img {
display:block;
width:100%;
height:320px;
overflow:hidden;

}
#navy_show_img li{
display:none;
}
#navy_show_img img{
width:650px;
height:320px;
}

#navy_show_title{
width:100%;
height:50px;
line-height:50px;
background:#000;
position:absolute;
left:0px;
top:270px;
opacity:0.5;

}
.navy_out{
border:2px solid #0F3;
}
.navy_over{
border:2px solid #F00;
}
#navy_show_title ul li{
display:inline-block;
width:100%;
height:50px;
color:#FF3;
text-align:center;
font-size:26px;

}
#navy_show_divsmall{
display:block;
width:100%;
height:80px;
line-height:80px;
position:relative;
background:#000;

}
#navy_show_imgsmall_view{
width:90%;
overflow:hidden;
}
#navy_show_imgsmall{
width:500%;
display:block;
}
#navy_show_imgsmall li{
height:80px;
line-height:80px;
margin:0px 5px;
}

#navy_show_imgsmall li img{
height:60px;
width:60px;
margin-top:8px;
}
#navy_left{
display:inline-block;
float:left;
width:0px;
height:0px;
border:20px solid #000;
border-right-color:#999;
position:absolute;
left:-16px;
top:20px;
}
#navy_right{
display:inline-block;
float:right;
width:0px;
height:0px;
border:20px solid #000;
border-left-color:#999;
position:absolute;
right:-16px;
top:20px;
}
#navy_left:hover{
border-right-color:#cfc;

}
#navy_left:active{
border-right-color:#fff;

}
#navy_right:hover{
border-right-color:#cfc;

}
#navy_right:active{
border-right-color:#fff;

}

index.js源码：

var total;//图片总数
var index=0;//当前显示图片的索引
var time;//定时器
var speed=1000;//轮换速度
$(function(){
total=$("#navy_show_img li").length;//获取当前轮换的图片的总数

$("#navy_show_img").mousemove(function(e){
var e=window.event||arguments.callee.caller.arguments[0];
var positionX=(e.offsetX||e.layerX);
if(positionX<200){
$(this).css("cursor","url(images/left.png),default");
/*$(this).unbind();
$(this).bind("click",function(){
clearInterval(time);
var idx=$("#navy_show_img li:visible").eq(0).attr("id").replace("i_","");
show(parseInt(idx)+1);
});*/
}else if(positionX>450){
$(this).css("cursor","url(images/right.png),default");
/*$(this).unbind();
$(this).bind("click",function(){
clearInterval(time);
var idx=$("#navy_show_img li:visible").eq(0).attr("id").replace("i_","");
show(parseInt(idx)+1);
});*/
}else{
$(this).css("cursor","default");
}
});

$("#navy_show_img").click(function(){
var e=window.event||arguments.callee.caller.arguments[0];
var positionX=(e.offsetX||e.layerX);
if(positionX<200){
flag=false;
}else if(positionX>450){
flag=true;
}
clearInterval(time);
var idx=$("#navy_show_img li:visible").eq(0).attr("id").replace("i_","");
show(parseInt(idx)+1);
});
time=setInterval("show()",speed);
});
function show(){
if(arguments.length>0){
if(index<0){
index=0
}else if(index>total-1){
index=total-1;
}else{
index=arguments[0];
}
if(flag){
index++;
}else{
index--;
}
}else{
index=index%total;
}
$("#navy_show_img li,#navy_show_title li").css("display","none");
$("#navy_show_img li").eq(index-1).css("display","block");
$("#navy_show_title li").eq(index).css("display","bblock");

$("#navy_show_imgsmall li img").attr("class","navy_out");
$("#navy_show_imgsmall li img").eq(index).attr("class","navy_over");
$("#navy_show_title li").eq(index).css("display","block");
index++;

if(index!=0 && index%7==0){
$("#navy_show_imgsmall_view").animate({scrollLeft:index/7*450},300);
}else if(index==1){
$("#navy_show_imgsmall_view").animate({scrollLeft:0},300);
}
}