记录一下自己用jQuery写的轮播图
程序员文章站
2022-05-12 20:01:50
一个背景图，两个动画图片，写的不好，但是效果能实现；本人认为写效果一定先要布局好，不然的话效果实现起来可能会复杂；如果布局一目了然，效果实现起来思路就会清晰很多。 附上使用的一组图片 bj1.jpg; con1.png; text1.png ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#main {
width: 760px;
height: 300px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
#main .pic {
width: 760px;
height: 300px;
overflow: hidden;
}
#main .pic ul li {
width: 760px;
height: 300px;
position: relative;
}
#main .pic ul li .img1 {
position: absolute;
top: 0;
left: -760px;
}
#main .pic ul li .img2 {
position: absolute;
top: 0;
left: -20px;
display: none;
}
#main .nav {
position: absolute;
right: 20px;
bottom: 20px;
}
#main .nav ul li {
width: 10px;
height: 10px;
border: 1px solid #fff;
float: left;
margin-left: 5px;
}
#main .nav ul li.select{
background: #fff;
}
#main span{
display: block;
position: absolute;
height: 50px;
width: 30px;
color: #fff;
background: #000;
opacity: 0.3;
font-size: 24px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.left{
left: -30px;
top: 50%;
margin-top: -25px;
}
.right{
right: -30px;
top: 50%;
margin-top: -25px;
}
</style>
</head>
<body>
<div id="main">
<div class="pic">
<ul>
<li style="background: url(img/bg1.jpg);">
<img class="img1" src="img/text1.png"/>
<img class="img2" src="img/con1.png"/>
</li>
<li style="background: url(img/bg2.jpg);">
<img class="img1" src="img/text2.png"/>
<img class="img2" src="img/con2.png"/>
</li>
<li style="background: url(img/bg3.jpg);">
<img class="img1" src="img/text3.png"/>
<img class="img2" src="img/con3.png"/>
</li>
<li style="background: url(img/bg4.jpg);">
<img class="img1" src="img/text4.png"/>
<img class="img2" src="img/con4.png"/>
</li>
<li style="background: url(img/bg5.jpg);">
<img class="img1" src="img/text5.png"/>
<img class="img2" src="img/con5.png"/>
</li>
</ul>
</div>
<div class="nav">
<ul>
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<span class="left">〈</span>
<span class="right">〉</span>
</div>
<div style="width: 100px; height: 100px; background: red; display: none;"></div>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
//初始第一张显示
$(".pic li").eq(0).find(".img1").stop().animate({"left":"0"},1000)
.next().show().stop().animate({"left":"0"},1000);
var count = 0;
//定义动画
var move = function(){
count++;
if(count==$(".pic li").length){
count = 0;
}
donghua();
}
var donghua = function(){
$(".pic li").eq(count).fadein().find(".img1").stop()
.animate({"left":0},1000).next().show().stop()
.animate({"left":0},1000).parent().siblings().fadeout()
.find(".img1").stop().css({"left":"-760px"}).next()
.hide().stop().css({"left":"-20px"});
$(".nav li").eq(count).addclass("select").siblings()
.removeclass("select");
}
//定时器自动轮播
var timer = setinterval(function(){
move();
},2000)
//点击相应的角标
$(".nav li").click(function(){
var index = $(this).index();
count = index;
$(this).addclass("select").siblings().removeclass("select");
$(".pic li").eq(index).fadein().find(".img1").stop()
.animate({"left":0},1000).next().show().stop()
.animate({"left":0},1000).parent().siblings().fadeout()
.find(".img1").stop().css({"left":"-760px"}).next()
.hide().stop().css({"left":"-20px"});
})
//鼠标移入，清除定时器，左右按钮显示，移除开启定时器，左右按钮隐藏
$("#main").hover(
function(){
clearinterval(timer);
$(".left").stop().animate({"left":0},500);
$(".right").stop().animate({"right":0},500);
},
function(){
timer = setinterval(function(){
move();
},2000)
$(".left").stop().animate({"left":"-30px"},500);
$(".right").stop().animate({"right":"-30px"},500);
}
)
//点击右侧按钮
$(".right").click(function(){
count++;
if(count == $(".pic li").length){
count = 0;
}
donghua();
})
//点击左侧按钮
$(".left").click(function(){
count--;
if(count<0){
count = $(".pic li").length;
}
donghua();
})
})
</script>
</body>
</html>
一个背景图，两个动画图片，写的不好，但是效果能实现；本人认为写效果一定先要布局好，不然的话效果实现起来可能会复杂；如果布局一目了然，效果实现起来思路就会清晰很多。
附上使用的一组图片
bj1.jpg;
con1.png;
text1.png