js轮播功能 标签自动切换 同页面多轮播js
需要加入jquery 1.43及以上版本
下面还有个简单版,一个页面只支持一个轮播
同页面多轮播js
<div>
<div class="yt_content">
<ul class="ml_content_main ml_content_main_word ms__div">
<div class="cb"></div>
</ul>
<ul class="ml_content_main ml_content_main_word ms__div" style="display: none;">
<div class="cb"></div>
</ul>
</div>
<a href="javascript:void(0);" class="yt_left" onclick="_ms_active_continue('index','-')" id="yjq_prev">上一页</a>
<a href="javascript:void(0);" class="yt_right" onclick="_ms_active_continue('index','+')" id="yjq_next">下一页</a>
</div> <div class="yl_main">
<ul class="ml_content_main ml_content_main_word ms__div2">
<li><a href="#">连接1</a></li>
</ul>
<ul class="ml_content_main ml_content_main_word ms__div2" style="display: none;">
<li><a href="#">连接1</a></li>
</ul>
<ul class="ml_content_main ml_content_main_word ms__div2" style="display: none;">
<li><a href="#">连接1</a></li>
</ul>
</div>
//执行动画
/*
indexName 轮播ID
className 分组的样式表名称,自定义的不是美工设计的,使用美工的样式名,如果他更新轮播就会失效
time 每次执行的间隔时间
prev_id 上一页按钮ID
next_id 下一页按钮ID
*/
function _ms_run(indexName,className,time,prev_id,next_id) {
if(!window["_ms_"+indexName]||parseInt(window["_ms_"+indexName])<0){//第一次当前显示序号没有值或小于0,则赋值0,
window["_ms_"+indexName]=0;
}
window["_ms_"+indexName] = ""+(parseInt(window["_ms_"+indexName])+1);
var div=$("."+className);//获取要管理的class组,其他可以自己弄
if (window["_ms_"+indexName] > div.length) {//判断如果超过最大序号则调整到第一个
window["_ms_"+indexName] = 1;
}
var index=window["_ms_"+indexName]; for (var i = 1; i <= div.length; i++) {
$(div[i-1]).hide();//隐藏所有容器
}
$(div[index-1]).show();//显示容器
if(index==1&&prev_id){//显示第一个时,隐藏上一页图片
$("#"+prev_id).hide();
}else if(index!=1&&prev_id){
$("#"+prev_id).show();
}
if(index==div.length&&next_id){//显示最后一个时,隐藏下一页图片
$("#"+next_id).hide();
}else if(index!=div.length&&next_id){
$("#"+next_id).show();
}
//执行下次动画
window["_ms_clear_"+indexName] = setTimeout(function () {
_ms_run(indexName,className,time,prev_id,next_id)
}, time);
}
//暂时清除动画效果
function _ms_stop(indexName) {
clearTimeout(window["_ms_clear_"+indexName]);
}
//继续执行动画效果
function _ms_active_continue(indexName,activeType) {
clearTimeout(window["_ms_clear_"+indexName]);
if (activeType) {
if(activeType=="+"){//下一页
//index = num;
}else if(activeType=="-"){//上一页
window["_ms_"+indexName] -= 2;
}
_ms_runset(indexName);
} else {
window["_ms_clear_"+indexName] = setTimeout(function () {
_ms_runset(indexName)
}, time);
}
}
//配置每个轮播属性
function _ms_runset(keyName){
/* _ms_run函数说明
indexName 轮播ID
className 分组的样式表名称,自定义的不是美工设计的,使用美工的样式名,如果他更新轮播就会失效
time 每次执行的间隔时间
prev_id 上一页按钮ID
next_id 下一页按钮ID
*/
switch(keyName){
case "index":
_ms_run('index', 'ms__div',30000,'yjq_prev','yjq_next');
break;
case "index2":
_ms_run('index2','ms__div2',10000,'','');
break;
case "index3":
_ms_run('index3','ms__div3',10000,'','');
break;
}
}
//第一次需要执行的轮播任务
setTimeout(function(){
_ms_runset('index','--');
_ms_runset('index2','--');
_ms_runset('index3','--');
},10000);
简单版,一个页面只能有一个
<div class="bd" onmouseover="stop()" onmouseleave="a_click()">
<div class="img" id="img_1"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>图片标题呢</span></a></div>
<div class="img" id="img_2"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>图片标题呢2</span></a></div>
<div class="img" id="img_3"><a href="#" target="_blank"><img src="css/img/img.jpg" alt=""><span>图片标题呢3</span></a></div>
<div class="numbar">
<a href="javascript:void(0)" id="img_a_1" onclick="a_click(1)">1</a>
<a href="javascript:void(0)" id="img_a_2" onclick="a_click(2)">2</a>
<a href="javascript:void(0)" id="img_a_3" onclick="a_click(3)">3</a>
</div>
</div>
<script type="text/javascript">
var index=0;
var _settimeout;
function run(){
for (var i = 1; i < 4; i++) {
$("#img_"+i).hide();
$("#img_a_"+i).removeClass("active");
}
index+=1;
if(index>3){
index=1;
}
$("#img_"+index).show();
$("#img_a_"+index).addClass("active");
_settimeout=setTimeout(function(){run()},3000);
}
function stop(){
clearTimeout(_settimeout);
}
function a_click(num){
if(num){
clearTimeout(_settimeout);
index=num-1;
run();
}else{
_settimeout=setTimeout(function(){run()},3000);
}
}
$(function(){
run();
})
</script>
js轮播功能 标签自动切换 同页面多轮播js的更多相关文章
- 创意编程,Python开发多功能壁纸自动切换工具!
import ctypes import time import requests import os from threading import Thread from tkinter import ...
- js -- 移动端pc端自动切换
1. 判断浏览器类型 浏览器判断使用的github开源项目current-device,下面是地址: https://github.com/matthewhudson/current-device 在 ...
- swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- 广告banner:手动滑动切换,自动切换,点击跳转,异步加载网络图片
效果图: 该banner功能有自动切换图片,点击图片可以自定义事件,手动滑动切换,异步加载图片 代码说话: 布局文件: <!-- 广告位 --> <FrameLayout andro ...
- js实现相册翻页,滚动,切换,轮播功能
我们在做web开发的时候,前台的效果要求是很高的,因为对于不懂程序的用户来说,前台的视觉冲击,无疑是对我们产品的第一印象. 在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的 ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换
为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...
- ViewFlipper 淘宝头条 轮播 自动切换
ViewFlipper介绍 ViewFilpper类继承于ViewAnimator,而ViewAnimator类继承于FrameLayout. ViewAnimator: Base class ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
随机推荐
- spring_150904_hibernatetemplate
实体类: package com.spring.model; import javax.persistence.Entity; import javax.persistence.Id; import ...
- BZOJ4327 [JSOI2012] 玄武密码 [AC自动机]
题目传送门 玄武密码 Description 在美丽的玄武湖畔,鸡鸣寺边,鸡笼山前,有一块富饶而秀美的土地,人们唤作进香河.相传一日,一缕紫气从天而至,只一瞬间便消失在了进香河中.老人们说,这是玄武神 ...
- HDU 6052 To my boyfriend(概率 贡献)
To my boyfriend Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 程序 查看 jvm版本
System.getProperty("java.version")返回你所需要的.
- Python操作Mongo数据库
连接数据库 import pymongo # 连接到数据库,以下两种方式均可 client = pymongo.MongoClient(host='localhost', port=27017) cl ...
- Redis学习篇(九)之生存时间
EXPIRE 设置生存时间,以秒为单位 #### EXPIREAT 设置生存时间,秒时间戳格式 #### PEXPIRE 设置生存时间,毫秒为单位 #### PEXPOREAT 设置生存时间,毫秒时间 ...
- UESTC 1330 柱爷与远古法阵【高斯消元】
题目链接[http://acm.uestc.edu.cn/#/problem/show/1330] 题意:有一个长度为L(L <= 300)的长廊,有一人站在最左边,他要到最右边去,他每次可以走 ...
- 表白 代码 韩梦飞沙-画心.html
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 韩梦飞沙-画心.html <!DOCTYPE html> <html& ...
- Java Queue的测试
上传图片没上去,提交的时候已经结束 代码链接
- noip200807传纸条
试题描述: 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的 ...