怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图。这次的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代码:
js代码:
$(document).ready(function(){
//搜索按钮
$("#ss").click(function(){
var new_li = $("
"+ $("#skuang").val() +"");
$("#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
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);
})
})
以上这篇JQuery和html+css实现带小圆点和左右按钮的轮播图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...相关推荐
- html图片圆点切换,JQuery和html+css实现带小圆点和左右按钮的轮播图实例
搜索按钮 $("#ss").click(function(){ var new_li = $(" "+ $("#skuang").val() ...
- html图片圆点切换,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!持环开行打进对端架处参触架码我通会法时果你没看错!还是轮播图.这次的JQuery的直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如哟!! CSS代码: /*轮播图 左右按钮 小白点*/ # ...
- html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
- 纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
- css实现带小三角形的边框
主要方法是使用伪元素before和after,之前已经总结过伪元素before.after用法,它们效果相当于在标签的内部放置一个最前或者最后的标签,添加的标签同样的能够继承父元素的属性,那么通过伪元 ...
- html表单内加入小图标,精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
- Echarts tooltip 自定义 css 样式 带小三角的背景样式
var geoCoordMap = { '上海': [121.4648,31.2891], '东莞': [113.8953,22.901], '东营': [118.7073,3 ...
- 知道焊缝长度如何确定节点板尺寸_钢桁架节点图 中各尺寸确定原则 总结
本帖最后由 webyl 于 2011-11-24 18:58 编辑9 ^9 q% @% ]$ o! e, S ) W+ L" V( D9 J8 j 节点图中各尺寸确定原则 1.节点板尺寸 节 ...
最新文章
- python中类似对象吗_在Python中,两个对象什么时候相同? - python
- lftp 4.4.0 发布,命令行的FTP工具
- java 循环读取文件_您如何用Java连续读取文件?
- spring.profiles.active配置了没生效_一文带你彻底学会 Git Hooks 配置
- UVA11532 Simple Adjacency Maximization【位运算】
- 『TensorFlow』批处理类
- ArcPad 10 的安装和部署
- Mac 上有哪些值得推荐的软件?冷门小众软件但实用
- summit超级计算机gpu温度,揭秘Summit:加速计算赋力全球最快超级计算机
- vb webQQ登陆器
- C++程序设计:字符图形输出(数字三角形)
- VM虚拟机安装苹果雪豹操作系统
- WAV音乐文件无法修改标题
- 《缠中说禅108课》25:吻,MACD、背弛、中枢
- 华为交换机做qos案例_经典案例:QoS实现交换机带宽控制(1)
- 腾讯低代码平台实战体验
- html给看板娘添加语音,给网页添加看板娘
- Target: x86_64-linux-gnu下实现gcc -m32
- 有关微服务Zuul网关面试题分享【持续更新中】
- 数学建模之线性规划问题(含整数规划和0-1规划)