一个实用的图片切换支持点击切换和自动轮播

JavaScript 2018-12-31

不经意间看到了以前写的这个小东西，就贴上来了，支持点击切换和自动轮播，供前端新手看看吧！

代码如下：

项目二
项目三
项目四
项目五

html

此处只需将图片路径改成你本地的即可。

li {list-style:none;}

css

$(".btn li").each(function(index,element){
$(element).click(function(){
i = index;
$(this).addClass("on").siblings().removeClass("on");
$(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
})
$(element).hover(function(){
clearInterval(setInter);
},function(){
outPlay();
});
})

out_fun = function(){
if(i < listLen){i++;}else{i=0;};
$(".btn li").eq(i).addClass("on").siblings().removeClass("on");
$(".pic li").eq(i).animate({opacity:"show"},300);
}

outPlay = function(){
setInter = setInterval("out_fun()",speen);
}
outPlay();
})

图片切换点击切换自动轮播

让kindeditor显示高亮代码

kindeditor4.x代码高亮功能默认使用的是prettify插件，prett...

kindeditor4整合SyntaxHighlighter，让代码亮起来

这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...

js如何实现弹出form提交表单？

js如何实现弹出form提交表单？（图文+视频）

js怎么获取复选框选中的值

js如何实现倒计时跳转页面

如何用js控制图片放大缩小

一个实用的图片切换支持点击切换和自动轮播

相关文章