自写： 点击或划过圆点 轮播效果

$(function(){

var g_index = 0;
function slide_index(){
g_index = g_index + 1;
if(g_index>2){
g_index = 0;
}
$(".group-"+g_index).show().siblings(".right-group").hide();
$("#rad-"+g_index).css("background-color","red").siblings(".rad-5").css("background-color","#fff");
}
setInterval(slide_index,2000);

var r_index;
$(".rad-5").click(function(){
var id_val = $(this).attr("id");
id_arr = id_val.split(‘-‘);
//document.title = id_arr[1];
$(this).css("background-color","red").siblings(".rad-5").css("background-color","#fff");
$(".group-"+id_arr[1]).show().siblings(".right-group").hide();

});
$(".rad-5").hover(function(){
var id_val = $(this).attr("id");
id_arr = id_val.split(‘-‘);
//document.title = id_arr[1];
$(this).css("background-color","red").siblings(".rad-5").css("background-color","#fff");
$(".group-"+id_arr[1]).show().siblings(".right-group").hide();

});

});

时间： 2024-10-09 06:46:26

自写： 点击或划过圆点 轮播效果的相关文章

点击轮播图片左右button，实现轮播效果

点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width(); //图片展示区外围div的大小 //注:若为整数,前边不能再加var.否则会被提示underfine p_count =

点击轮播图片左右按钮，实现轮播效果

点击左右按钮,实现图片轮播效果,js代码如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width(); //图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示underfine p_count = $v_ci

原生js解决图片点击左右切换（简单轮播图）

想写一个综合性的小案例,主要会运用到数组和判断以及我前面几篇博客所复习到的js的知识.今天案例想要实现的效果图如下图所示: 效果是:点击"循环切换"按钮,那么"一号"位置的文案就要写入"图片可以循环",而下面的左右箭头在点击过程中可以循环点击,并且"二号"和"三号"要响应切换到相对应的数字和文字内容:否则,点击"顺序切换"按钮,那么"一号"位置的文案就要写入"

tab内容超过一定的宽度后，可以点击左右按钮进行左右轮播显示

<div id="page-wrapper">                                                    <div class="z_nav-tabs">                                                        <span id="leftArrow" class="toleft"></s

写了一个简单轮播效果实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{height:100%;} *{margin:0;padding:0;} .box{ width:100%; height:100%; text-align:center; }

滚动轮播效果，.net 没得混看来只能去写js 了

<!DOCTYPE html> <html> <head> <title> 滚动图片 </title> <style type="text/css"> .imageBox{ height: 438px; width: 960px; overflow: hidden; position:relative; margin: auto; } .scrollContainer{ width: 4800px; height:

第一次自己写的轮播效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轮播图带遮罩层</title> <style type="text/css"> html,body,ul,li{ width: 100%;min-wid

如何使用swiper写轮播

之前大家都写过轮播图吧,相信在写轮播图的过程中也因为当中的某些细节烦恼过吧,接下来我给大家讲述一个方便快捷的轮播图吧! Swiper常用于移动端网站的内容触摸滑动 1.第一步先引入css---swiper.css插件和JQ---swiper.js 插件, 然后呢就开始写轮播图了 <div class="swiper-container">--首先定义一个容器 <div class="swiper-wrapper"> <div class

jquery特效（3）—轮播图①（手动点击轮播）

今天上班做设计做的头疼,就写了一个轮播图练练手,先写了一个手动点击轮播的轮播图,随后我会慢慢接着深入写自动轮播图和鼠标悬浮图片停止移动轮播图等~~~~~~虽然今天我生日,但是代码还是得写的,不能找借口放松自己,原地踏步也算后退~~~~ 下面来看看最终做的手动点击轮播效果: 哈哈哈,有没有看出来我的四张图片都是美男子哦~~~~找个赏心悦目的图片真不容易,这样才能激起我写轮播图的代码欲望,写出来就可以点击按钮翻他们牌子了~~~~ 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包