/*焦点图*/
var Box=‘.carousel‘;//盒子
var Menu=$(Box+‘ .l_cursor li‘);//圆点菜单
var Con=$(Box+‘ .carouselChange li‘);//大图
var Text=$(Box+‘ .text li‘);//图注文字
var Prev=$(Box+‘ .Prev‘);//上一页
var Next=$(Box+‘ .next‘);//下一页
var Counts=$(Con).size();//获取li总数
var nowIndex=0;
var timer;
/* 点击切换 */
$(Menu).click(function(){
var i=$(Menu).index(this)
gotoPage(i);
});
/* 打开相应的标签 */
function gotoPage(i){
$(Menu).removeClass("current").eq(i).addClass("current");
$(Con).fadeOut(200).eq(i).fadeIn(200);
$(Text).hide().eq(i).fadeIn(200);
nowIndex=i;
};
/* 下一页 */
$(Next).click(function(){
gotoR();
});
function gotoR(){
nowIndex++;
if(nowIndex > Counts-1){
nowIndex=0;
}
gotoPage(nowIndex);
};
/* 上一页 */
$(Prev).click(function(){
nowIndex--;
if(nowIndex < 0){
nowIndex=Counts-1
}
gotoPage(nowIndex);
});
/* 自动轮播 */
function setAuto(){
if(Counts>1){
timer=setInterval(gotoR,3000);
};
};
setAuto();
/* 鼠标经过暂停,离开继续轮播 */
$(Box).hover(function(){
$(Prev).show();
$(Next).show();
if(timer){
clearInterval(timer);
}
},
function(){
$(Prev).hide();
$(Next).hide();
setAuto();
});
/*焦点图*/
js图片轮播图
时间: 2024-10-01 04:38:46
js图片轮播图的相关文章
js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=
定时图片轮播图
先是HTML部分 <div id="alternate"> <ul class="img_list clear"> <li><a href="#"><img src="1.jpg" /></a></li> <li><a href="#"><img src="2.jpg" /&
js实现轮播图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut
JS原生轮播图
哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol
图片轮播图插件的使用 unslider!!!
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者intellij idea中搭建一个可以正常运行的web工程 3.在WEB-INF下创建一个jsp文件夹,jsp文件夹下创建一个lunbo.jsp,颜色标记的代码是需要注意的!在WebRoot下创建js和img文件夹,存放js和所需要的图片. 页面的代码: <%@ page language="ja
封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left
原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过
js图片轮播与索引变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷
日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~