Jquery 点击切换,按10秒钟自动切换到下一个,依资助循环,点击按钮也可 ...
发布网友
发布时间：2022-05-11 20:56
我来回答
共1个回答
热心网友
时间：2022-04-23 03:12
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击切换，按时间循环自动切换</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 0;
font: 12px/1.5 \5b8b\4f53, Arial, sans-serif;
}
ol,ul,li {
list-style: none;
}
a {
color: #252525;
text-decoration: none;
}
a:hover {
color: #ba2636;
text-decoration: underline;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
*zoom: 1;
}
.tui2 {
margin: auto;
overflow: hidden;
height: 108px;
width: 648px;
position: relative;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #37B3D5;
}
.tui2 .tit {
line-height: 32px;
padding-left: 12px;
height: 32px;
}
.tui2 .tit h2 {
float: left;
font-size: 14px;
}
.focus {
height: 16px;
line-height: 16px;
overflow: hidden;
float: right;
position: relative;
right: 8px;
top: 50%;
margin-top: -8px;
}
.focus li {
float: left;
width: 16px;
height: 16px;
text-align: center;
background-color: #A1A1A1;
display: block;
color: #FFFFFF;
margin-left: 5px;
cursor: pointer;
}
.focus li.on {
background-color: #68A4DE;
}
.con {
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
width: 9999em;
overflow: hidden;
position: relative;
}
.txt {
width: 628px;
float: left;
margin-right: 8px;
}
.txt li {
float: left;
height: 25px;
width: 148px;
overflow: hidden;
line-height: 25px;
margin-right: 8px;
}
.txt li a {
font-size: 13px;
color: #3333FF;
font-family: Microsoft YaHei;
}
.yun {
right: 12px;
position: absolute;
bottom: 3px;
}
.ml {
margin-left: -628px;
}
</style>
<script src="../jquery-1.8.0.min.js"></script>
<script>
jQuery (function ($)
{
var con = $ ('div.con'), len = con.children ("ul").length, w = $ (".txt").width () + 5;
var lis = $ ('.focus li'), INDEX = lis.filter (".on").index ();
lis.click (function ()
{
var me = $ (this);
me.addClass ("on").siblings ("li").removeClass ("on");
con.stop ().animate (
{
left : -w * (INDEX = me.index ()) + "px"
}, "fast");
});
$ (".tui2").hover (function ()
{
stop ();
}, function ()
{
run (lis, INDEX);
});
run (lis, INDEX);
});
var INTERVAL = null, SLEEP = 1000, INDEX = -1;
var run = function (lis, INDEX)
{
if (!INTERVAL)
{
INTERVAL = setInterval (function ()
{
INDEX++;
INDEX = INDEX > lis.length - 1 ? 0 : INDEX;
lis.eq (INDEX).triggerHandler ("click");
}, SLEEP);
}
};
var stop = function ()
{
if (!!INTERVAL)
{
clearInterval (INTERVAL);
INTERVAL = null;
}
};
</script>
</head>
<body>
</body>
</html>
Jquery 点击切换,按10秒钟自动切换到下一个,依资助循环,点击按钮也可 ...
按时间循环自动切换* {padding: 0;margin: 0;}body {margin: 0;padding: 0;font: 12px/1.5 \5b8b\4f53, Arial, sans-serif;}ol,ul,li {list-style: none;}a {color: #252525
Jquery 一个每隔十秒自动切换,这样循环的效果
JS部分修改成下面这样就可以了 function switchContent() { $(this).addClass("on").siblings("li").removeClass("on"); $ ('.con .txt:eq(' + $(this).index () + ')').fadeIn("slow").siblings ().fadeOut();}function autoSwitch() { setInterval(function(){ var...
jquery实现图片自动切换和点击切换
(function () { $(".dummy").click(function () { return false; }); var flipDelay = 5500; var flipCount = $("div.banner_footer a").size(); // 图片总数 var flipId = 1; var flipId1 = 0; var flipTimer = null; var flipTimer1 = null; var ...
jquery点击切换div 实现http://www.kmsocial.cn/这个页面的这种效果 点 ...
jquery点击按钮跳转页面(jquery点击按钮弹出窗口)
方法一：去除你的edit方法、去除元素上面的onclick、添加如下，委派处理动态加载的元素。jquery()事件执行完后跳转页面你的代码实际上已经执行了ui.alert方法了。但是下面的的跳转相当于重新加载了页面。所以你的弹出就看不到了。你可以弹出一个确认框，然后将页面跳转绑定到确认框的某个按钮上。//点击...
用jq实现点击一个按钮,弹出提示框,用户什么都不操作5秒后自动跳转;点击...
首先任何效果希望你自己动手去完成，我可以给你思路，但是必须自己动手去实现。jquery能帮助你点击一个按钮弹出提示框，但是这个框是windows自带的alert框或者confime框等，你要那种关闭按钮的，推荐jqueryui实现。jquery绑定click事件我和你详细说下。第一，$("#aaa").click(function(){}),第二，$("#...
jquery一段时间内点击 button只执行一次click事件 怎么写?
方法有多种。主要是看需求。一般可以直接用setTimeout来实现。在点击的同时，增加一个样式到点击按钮，然后用setTimeout来删除这个判断性样式即可。('#xxx').click(function(){ if(!$(this).hasClass('Onclick')){ //样式不存在 (this).addClass('Onclick');//添加判断样式 //按钮执行内容 s...
jquery中怎么让 两个不同的按钮,间隔一定的时间,依次自动被点击,然后触 ...
$("botton2").click(); } $(function(){ ///TODU 按钮绑定按钮事件 ///不能有提交数据代码，只能是异步执行或者js执行代码才可以，不能让page刷新 否则定时没什么意义 //定时间执行 setInterval('clickFunction()',1000); })...
jquery怎么实现点击一个元素更换背景图片,连续点击永远在2张图片之间...
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。2、在index.html中的标签，输入jquery代码：。var no = 0;var arr = ['small2.png', 'small3.png'];function fun() { no ^= 1;('body').css('background-image', 'url(' + arr[no] + ')');} 3、浏览...
jquery如何实现点击一个按钮 div框从右→左,再点击按钮 div框从刚刚...
3、在test.html文件内，设置div标签的id属性为mytext，主要用于下面通过该id获得div对象。4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“切换内容”。5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行func（）函数。6、在js标签中，创建func()函数，在...
