JQuery和html+css实现带小圆点和左右按钮的轮播图
2024-09-29 14:54:06
是的！你没看错！还是轮播图。这次的JQuery的哟！！
CSS代码：
/*轮播图 左右按钮 小白点*/
#second_div{
margin-top: 160px;
}
.img_box{
overflow: hidden;
width:100%;
height:420px;
border:1px solid;
position:relative;
}
.img_box img{
width:100%;
position:absolute;
}
.ul5{
list-style: none;
position:absolute;
left:580px;
top:565px;
}
.ul5 li{
float:left;
margin-left:20px;
width:40px;
height:5px;
border:0px;
background:lawngreen;
}
.d1,.d2{
width:50px;
height:60px;
background-color: rgba(10,10,10,0.5);
text-align: center;
font-size:26px;
font-weight: 800px;
line-height:60px;
cursor: pointer;
}
.d1{
position:absolute;
top:373px;
left:25px;
}
.d2{
position:absolute;
top:373px;
left:1445px;
}
HTML代码：
<!-- 轮播图 -->
<div id="second_div">
<div class="img_box">
<img src="img/ban1.jpg">
<img src="img/ban2.jpg">
<img src="img/ban3.jpg">
<img src="img/ban4.png">
</div>
<ul class="ul5">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="d1"><</div>
<div class="d2">></div>
</div>
js代码：
<script type="text/javascript">
$(document).ready(function(){
//搜索按钮
$("#ss").click(function(){
var new_li = $("<li>"+ $("#skuang").val() +"</li>");
$("#d1 ul").append(new_li);
$("#d1").hide();
$("#skuang").val(""); }) $("#skuang").focus(function(){
$("#d1").css("display","block");
}); $("#skuang").blur();
$("#qingch").click(function(){
$("#d1 li:gt(0)").remove();
$("#d1").hide(); }); //轮播图
var img=$(".img_box img");
var li=$(".ul5 li");
var divW=$(".img_box").width();
var len=$(".img_box img").length;
img.css("left",divW);
img.eq(0).css("left",0);
li.eq(0).css("background","red");
var index=0;
var next=0;
function show(){
next++;
if(next==len){
next=0;
}
img.eq(next).css("left",divW);
img.eq(index).animate({"left":-divW});
img.eq(next).animate({"left":0});
li.eq(next).css("background","red");
li.eq(index).css("background","lawngreen");
index=next;
}
t=setInterval(show,2000);
function show1(){
next--;
if(next==-1){
next=len-1;
}
img.eq(next).css("left",-divW);
img.eq(index).animate({"left":divW});
img.eq(next).animate({"left":0});
li.eq(next).css("background","red");
li.eq(index).css("background","lawngreen");
index=next;
}
img.hover(function(){
clearInterval(t);
},function(){
t=setInterval(show,2000);
})
//左右按钮
$(".d2").mousedown(function(){
clearInterval(t);
show();
})
$(".d2").mousedown(function(){
t=setInterval(show,2000);
})
$(".d1").mousedown(function(){
clearInterval(t);
show1();
})
$(".d1").mousedown(function(){
t=setInterval(show,2000);
})
//小白点 点击
li.mousedown(function(){
num=$(this).index();
if(num==next){
return;
}else if(num<next){
clearInterval(t);
img.eq(num).css("left",-divW);
img.eq(index).animate({"left":divW});
img.eq(num).animate({"left":0});
li.eq(num).css("background","red");
li.eq(index).css("background","lawngreen");
index=num;
next=num;
}else if(num>next){
clearInterval(t);
img.eq(num).css("left",divW);
img.eq(index).animate({"left":-divW});
img.eq(num).animate({"left":0});
li.eq(num).css("background","red");
li.eq(index).css("background","lawngreen");
index=num;
next=num;
}
})
li.mouseup(function(){
t=setInterval(show,2000);
})
})
</script>
就是这样的！你们懂了吗？？？？
最新文章
- bash的管道符与重定向
- Nginx配置文件nginx.conf详解
- zend studio 的使用
- yii框架
- 函数buf_LRU_free_from_unzip_LRU_list
- dev gridcontrol 单箱效果
- [置顶] 北漂的大三IT男（暂完）
- const对象默认是static的，而不是extern的
- 关于eclipse新建项目问题
- Git协作流程
- 面试题：电梯/雨伞/杯子/笔/A4纸/纸杯… 怎么测试？
- PyQt PySide QListWidget 添加自定义 widget
- spring boot thymeleaf 标签未关闭报错
- sitecore系列教程之营销人员和技术人员如何策划与消费者的对话以提升体验？
- CQRS：When to use CQRS
- Windows / VS下不同类型变量转换
- 织梦开启PHP 标签
- mysql与redis的区别与联系
- Python学习 ：常用模块（二）
- Java语言主要特点有哪些？