js 手动轮播和自动轮播
$(function(){
//默认值
$("#carousel1").css("background-color","#FFF"); //第一张图的背景
if(typeof(title_arr) == 'undefined'){
return;
} $(".car_c_title p").html(title_arr[0]); //第一张图的标题
//以下数组中的颜色与主图两边颜色同步的背景色(不同用户用脑分辨率不同导致图片无法铺满时,通过背景色的补充,起到铺满的作用)
var rgb_arr = new Array("#FFF","#FFF","#FFF","#FFF","#FFF","#FFF");
//所有标题
//自动轮播方法
function roll(rgb_arr,title_arr){
setTimeout(function(){
for(var i=0;i<=5;i++){
var nowpic = $("#carousel1 .car_bigp a").eq(i);
if(nowpic.css("display") == "block"){
var showpicnum = i*1+1*1;
$("#carousel1 .car_bigp a").css("display","none"); //先隐藏所有主图
$(".car_c_smallpic img").css("border",""); //先隐藏所有小图边框
if(showpicnum == 6){
//最后一张时,跳转到第一张
$("#carousel1 .car_bigp a").eq(0).css("display","block");
$("#carousel1").css("background-color",rgb_arr[0]);
$("#carousel1").attr("name",0);
$(".car_c_smallpic img").eq(0).css("border","solid 2px #A52923");
$(".car_c_title p").html(title_arr[0]);
}else{
$("#carousel1 .car_bigp a").eq(showpicnum).css("display","block"); //主图
$("#carousel1").css("background-color",rgb_arr[showpicnum]); //主图背景
$("#carousel1").attr("name",showpicnum); //给div一个name值,代表当前自动轮到到哪张图,鼠标轮播时会用到这个值
$(".car_c_smallpic img").eq(showpicnum).css("border","solid 2px #A52923"); //小图边框
$(".car_c_title p").html(title_arr[showpicnum]); //标题
}
break;
}
}
roll(rgb_arr,title_arr);
},6000);
}
roll(rgb_arr,title_arr);
//点击左箭头
$(".car_c_inpt1").click(function(){
var showpicnum = $("#carousel1").attr("name"); //当前选中的图片eq编号
if(showpicnum <= 0){
var eqnum = 5;
}else{
var eqnum = showpicnum-1;
}
mouseRoll(rgb_arr,title_arr,eqnum); });
//点击右箭头
$(".car_c_inpt2").click(function(){
var showpicnum = $("#carousel1").attr("name"); //当前选中的图片eq编号
if(showpicnum >= 5){
var eqnum = 0;
}else{
var eqnum = showpicnum*1+1*1;
}
mouseRoll(rgb_arr,title_arr,eqnum);
});
//鼠标滑过小图
$(".car_c_smallpic img").mouseover(function(){
var eqnum = $(this).index()-1;
mouseRoll(rgb_arr,title_arr,eqnum);
});
//鼠标事件轮播方法
function mouseRoll(rgb_arr,title_arr,eqnum){
$(".car_c_smallpic img").css("border",""); //隐藏所有小图边框
$(".car_c_smallpic img").eq(eqnum).css("border","solid 2px #A52923"); //显示当前选中的小图边框
$("#carousel1 .car_bigp a").css("display","none"); //隐藏所有主图
$("#carousel1 .car_bigp a").eq(eqnum).css("display","block"); //显示当前选中的主图
$("#carousel1").css("background-color",rgb_arr[eqnum]); //显示当前选中的主图背景
$(".car_c_title p").html(title_arr[eqnum]); //标题
$("#carousel1").attr("name",eqnum); //最新的name值
} })
js 手动轮播和自动轮播的更多相关文章
- 原生js手动轮播图
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- 超级详细 一听就会:利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
前言 作为一个前端工程师,无论公司是什么行业,无论你做什么端,基本都会遇到一个避不开的动画效果:循环轮播.做轮播并不难,市场上的轮播插件有很多,其中比较著名的是swiper,使用也非常简单.但轮播插件 ...
- vxlan vs GRE(三层组播和二层组播如何对应起来)
www.huawei.com/ilink/cnenterprise/download/HW_401028 http://feisky.xyz/sdn/basic/vxlan.html 华为的vxlan ...
- 原生html、js手写 radio与checkbox 美化
原生html.js手写 radio与checkbox 美化 html <!DOCTYPE html> <html> <head> <meta charse ...
- 常见的JS手写函数汇总(代码注释、持续更新)
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
随机推荐
- NYOJ-1057 寻找最大数(三)(贪心)
寻找最大数(三) 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 给出一个整数N,每次可以移动2个相邻数位上的数字,最多移动K次,得到一个新的整数. 求这个新的整数的 ...
- oc UIAlertController封装
#define SHOWALERT(MESSAGE) \ UIAlertController *alertController = [UIAlertController alertController ...
- 【Python之路】第十篇--HTML
HTML 是什么? htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语 ...
- mysql安装和基本配置-redhat
1.redhat yum替换参考 url:http://blog.csdn.net/zcyhappy1314/article/details/17580943 2.yum卸载mysql rpm -qa ...
- 解决maven web项目Cannot detect Web Project version. Please specify version of Web Project through...的错误
前面已经创建maven web工程,但是问题来了,创建maven web工程之后会出现如下的错误,在pom.xml文件头部 有以下的错误 Description Resource Path Locat ...
- wso2 CEP集成storm实验
1.三台机子:192.168.225.1(manager,nimbus), 192.168.225.2(worker,supervisor), 192.168.225.3(worker,supervi ...
- Spring.net 学习
最近一段时间,在学习spring.net方面的知识,spring.net是什么,spring.net是用来干什么的,我们这里就不在介绍了,spring.net有两方面的内容---IOC(DI)与AOP ...
- easyui datagrid 的排序问题
今日遇到一个datagrid排序问题,sortable,sorter函数都已设置,但是始终没有效果,无法在界面自定义排序.后来发现,需要设置remoteSort:false. 切记!!! remote ...
- Android:Asmack能登录但是获取不到联系人的问题
先说一下:换了N个jar包,换了N个OpenFire,就是获取不到联系人.但是能登录.特别纳闷,百度不到,google一下,有人隐约说了下权限的问题. 终于搞出来了,总结一下,浪费了一整天的时间.(码 ...
- UILabel属性小解
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...