是的！你没看错！还是轮播图。这次的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);

})

})

就是这样的！你们懂了吗？？？？

【前端】javascript实现带有子菜单和控件的轮播图slider

实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // ...

JQuery的使用案例(二级联动，隔行换色，轮播图，广告插入)

JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

jQuery之制作简单的轮播图效果

[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

jQuery淡入淡出轮播图实现

大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

【jQuery】全功能轮播图的实现(本文结尾也有javascript版)

轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

jquery里面的attr和css来设置轮播图竟然效果不一致

/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

用纯css、JavaScript、jQuery简单的轮播图

完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

jQuery淡入淡出效果轮播图

用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

随机推荐

Tips For Your Maya Plugin Development

(The reason why I write English blog is that I'm trying to improve my written English. The Chinese v ...

通过挂载系统光盘搭建本地yum仓库

1,配置本地yum源: 把系统光盘挂载到文件夹aaa(aaa为自己创建的文件夹). [root@localhost /]# mount dev/cdrom /aaa 2,修改yum配置文件: yum的 ...

Android IOS WebRTC 音视频开发总结(二九)-- 安卓噪声消除交流

Android上的音质一直被大家所困扰和诟病,这里面有很多原因, 下面是最近一位前UC同行发邮件跟我交流的一些记录,供参考,支持原创,文章来自博客园RTC.Blacker,转载请说明出处. 以下文字来 ...

什么是ADB

ADB, Android Debug Bridge, 是一个client-server程序,可以用来和安卓设备交流 Client: 用来发送命令的,client运行在开发机器上(电脑cmd, adb ...

Codeforces 486B - OR in Matrix

矩阵的 OR ,也是醉了. 题目意思很简单,就是问你有没有这么一个矩阵,可以变化,得到输入的矩阵. 要求是这个矩阵每行都可以上下任意移动,每列都可以左右任意移动. 解题方法: 1.也是导致我WA 的原 ...

PMBok项目管理

这就是项目管理的九大领域:整合管理.范围管理.时间管理.费用管理.质量管理.人力资源管理.沟通管理.风险管理.采购管理. 项目管理好像一头大象,将其大卸九块之后,要装进冰箱就容易多了. 看看书上是怎样 ...

[补档][COGS 426]血帆海盗

[COGS 426]血帆海盗 题目 传送门:http://cogs.pro/cogs/problem/problem.php?pid=426 随着资本的扩大,藏宝海湾贸易亲王在卡利姆多和东部王国大陆各 ...

sp_tableoption

设置用户定义表的选项值.sp_tableoption 可用于控制包含varchar(max).nvarchar(max).varbinary(max).xml.text.ntext 或 image 列 ...

Android Studio遇到Failed to sync Gradle project错误时的解决办法

一   报错显示 Gradle sync failed: Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust th ...

Linux nmcli 网络管理

Linux nmcli 网络管理 RHEL 和 CentOS 系统默认使用 NetworkManager 来提供网络服务,这是一种动态管理网络配置的守护进程,能够让网络设备保持连接状态.可以使用 nm ...