jQuery 实现图片轮播效果:
这是css代码部分:
*{
margin:0;
padding:0;
}
.container{
width:790px;
height:340px;
margin:200px auto;
position:relative;
overflow:hidden;
/*border:3px solid hotpink;*/
}
.inner{
width:7777px;
height:340px;
position:relative;
overflow: hidden;
}
.innerwraper{
float:left;
}
.arrow{
display:none;
}
.container:hover .arrow{
display:block;
}
.left-arrow,.right-arrow{
position:absolute;
top:45%;
font-weight: 400;
font-size:25px;
color: hotpink;
height:60px;
line-height: 60px;
width:30px;
background-color: rgba(192, 192, 192, 0.1);
cursor: pointer;
}
.left-arrow{
left:0;
}
.right-arrow{
right:0;
}
.right-arrow:hover,.left-arrow:hover{
background-color: rgba(192, 192, 192, 0.55);
}
.pagination{
position:absolute;
bottom: 5px;
width:200px;
height:20px;
/*background-color: silver;*/
color:white;
left:330px;
}
.pagination>span{
display:inline-block;
text-align: center;
background-color: #2e7fff;
width:20px;
height:20px;
margin:0 0.3px;
/*border:1px solid red;*/
-webkit-border-radius: 50%;
cursor: pointer;
}
.current{
background-color: #ff538d!important;
}
这是html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="inner">
<div class="innerwraper"><img src="images/1.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/2.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/3.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/4.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/5.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/6.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/7.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/8.jpg" alt=""/></div>
<div class="innerwraper"><img src="images/1.jpg" alt=""/></div>
</div>
<div class="arrow">
<span class="left-arrow"><</span>
<span class="right-arrow">></span>
</div>
<div class="pagination">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</div>
</div>
<script src="jQuery/jquery-1.12.4.js"></script>
<script src="jQuery/jq.js"></script>
</body>
</html>
这是jquery代码:
分别实现自动轮播、鼠标移入移出效果、底部导航以及左右翻页:
/**
* Created by DELL on 2019/3/3.
*/
$(function () {
var count = 0;
var timer = null;
var leftArrow = $(".left-arrow");
var rightArrow = $(".right-arrow");
var innerWraper = $(".innerwraper");
var imageWidth=$(".innerwraper img:first-child").eq(0).width();
var span = $(".pagination>span");
//自动轮播
autoGo();
function autoGo() {
timer=setInterval(selectPic, 1300);
}
function selectPic() {
count++;
go();
}
function go(){
span.eq(count).addClass("current").siblings().removeClass("current");
$(".inner").animate({left:-count*imageWidth},1000,function() {
if (count == span.length) {
count = 0;
$(".inner").css("left", 0);
span.eq(count).addClass("current").siblings().removeClass("current");
}
})
}
//鼠标移入/出
$(".container").hover(function(){
clearInterval(timer);
},function(){
autoGo();
});
//左右键
leftArrow.on("click",function(){
clearInterval(timer);
if (count == 0) {
count = span.length;
$(".inner").css("left", -(span.length ) * imgWidth);
}
count--;
go();
});
rightArrow.on("click", function () {
clearInterval(timer);
count++;
go();
});
//底部导航:
span.on("click",function(){
count=span.index($(this));
go();
})
});
。