用jquery实现带左右按键的轮播图
2021-06-12 14:03
标签：over 12px ul li 按键 显示 nal 火影忍者 ansi 记录 成品如下： 简单来说就是点击“右”按钮时，转换到右边的下一幅图片，同时上面的小方块颜色也跟着改变，如果已经是最后一幅图片，再点击“右”，则转换到第一幅图片，是直接向左移找到第一幅图的，明天再做一下无缝切换的效果，即最后一幅图放完了以后第一幅图从右滑进来跟上。点击“左”同理。 下面是html代码 css代码： 在程序中，用page来记录是第几屏在展示，然后选择相应的小方块让它变蓝，并且计算为了移到下一屏应该怎样进行相对定位。在布局里还有一个小技巧，就是包裹内容区的div要比外层div长，这样内容（总共4屏）在里层排成一排，但外层只能显示出1屏。 用jquery实现带左右按键的轮播图 标签：over 12px ul li 按键 显示 nal 火影忍者 ansi 记录 原文地址：http://www.cnblogs.com/mengqi-S/p/7287233.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>
link rel="stylesheet" href="test_ch4.css" id="herf" />
script type="text/javascript" src="jquery-3.2.1.js">script>
title>test_ch4title>
meta charset="utf-8"/>
head>
body>
div id="wrap">
div id="head" >
div id="head_l">
div id="head_l_w">
span class="white blue" >span>
span class="white">span>
span class="white">span>
span class="white">span>
div>
span id="left">左span>span id="right">右span>
div>
div>
div id="video">
div id="inner">
ul>
li>a href="">
img src="01.jpg" alt="" />a>
p>海贼王p>
span>播放：28,276span>li>
li>a href="">
img src="01.jpg" alt="" />a>
p>海贼王p>
span>播放：28,276span>li>
li>a href="">
img src="01.jpg" alt="" />a>
p>海贼王p>
span>播放：28,276span>li>
li>a href="">
img src="01.jpg" alt="" />a>
p>海贼王p>
span>播放：28,276span>li>
li>a href="">
img src="02.jpg" alt="" />a>
p>哆啦A梦p>
span>播放：33,326span>li>
li>a href="">
img src="02.jpg" alt="" />a>
p>哆啦A梦p>
span>播放：33,326span>li>
li>a href="">
img src="02.jpg" alt="" />a>
p>哆啦A梦p>
span>播放：33,326span>li>
li>a href="">
img src="02.jpg" alt="" />a>
p>哆啦A梦p>
span>播放：33,326span>li>
li>a href="">
img src="03.jpg" alt="" />a>
p>火影忍者p>
span>播放：28,276span>li>
li>a href="">
img src="03.jpg" alt="" />a>
p>火影忍者p>
span>播放：28,276span>li>
li>a href="">
img src="03.jpg" alt="" />a>
p>火影忍者p>
span>播放：28,276span>li>
li>a href="">
img src="03.jpg" alt="" />a>
p>火影忍者p>
span>播放：28,276span>li>
li>a href="">
img src="04.jpg" alt="" />a>
p>龙珠p>
span>播放：33,326span>li>
li>a href="">
img src="04.jpg" alt="" />a>
p>龙珠p>
span>播放：33,326span>li>
li>a href="">
img src="04.jpg" alt="" />a>
p>龙珠p>
span>播放：33,326span>li>
li>a href="">
img src="04.jpg" alt="" />a>
p>龙珠p>
span>播放：33,326span>li>
ul>
div>
div>
div>
body>
script type="text/javascript">
$(document).ready(function(){
var page = 1;
var v_width = $("#video").width() + 20;
$("#right").click(function(e){
if(!$("#video").is(":animated")){
if(page % 4 == 0)
{
$("#video").animate({left:"0px"},1000);
page = 1;
}
else {
$("#video").animate({left:‘-=‘+v_width},1000);
page++;
}
}
$("#head_l_w span").attr("class","white");
$("span.white").eq(page%4-1).attr("class","blue");
});
$("#left").click(function(){
if(!$("#video").is(":animated")){
if(page % 4 == 1)
{
$("#video").animate({left:‘-=‘+v_width*3},1000);
page = 4;
}
else {
$("#video").animate({left:‘+=‘+v_width},1000);
page--;
}
$("#head_l_w span").attr("class","white");
$("span.white").eq(page%4-1).attr("class","blue");
}
});
});
script>
html>
ul {list-style:none; padding: 0;}
ul li {
display:inline-block;
margin: 10px 2px 0;
padding: 8px;
}
ul li a {
display: block;
height: 80px;
width: 128px;
}
ul li img{
height: 80px;
width: 128px;
}
a { text-decoration:none;}
p{
color: blue;
font-size: 12px;
margin: 0;
padding:0;
}
span {
font-size: 12px;
color: gray;
}
#wrap {
width: 595px;
overflow: hidden;
border: 1px solid gray;
}
#video {
position: relative;
left: 0px;
height: 160px;
width: 592px;
}
#inner {
width: 2500px;
height: 170px;
margin-bottom: 10px;
}
#head {
background: #fff;
}
#head_l span {
display: inline-block;
}
#right,#left{
color: black;
font-size: 14px;
margin-right: 20px;
cursor: pointer;
}
.white {
width: 5px;
height: 5px;
background-color: white;
margin-right:10px;
border: 1px solid gray;
}
.blue{
width: 5px;
height: 5px;
background-color: blue;
margin-right:10px;
border: 1px solid gray;
}