文档章节

网上看的轮播代码

如风般魅影
 如风般魅影
发布于 2014/03/19 13:28
字数 291
阅读 315
收藏 8

<script type="text/javascript">  
   var t = n = 0, count;
  
   $(document).ready(function(){
  
   count=$("#ban_list a").length;//获取图片数目
  
   $("#ban_list a:not(:first-child)").hide();//除第一张图片都隐藏
  
   $("#ban_info").html($("#ban_list a:first-child").find("img").attr('alt'));//这个是把alt里的内容作为标题
  
   $("#ban_info").click(function(){window.open($("#ban_list a:first-child").attr('href'), "_blank")});//给标题绑定点击事件,添加链接
  
   $("#ban li").click(function() { //按钮点击事件
  
   var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4
  
   n = i;
  
   if (i >= count) return;
  
   $("#ban_info").html($("#ban_list a").eq(i).find("img").attr('alt'));//重新获取标题
  
   $("#ban_info").unbind().click(function(){window.open($("#ban_list a").eq(i).attr('href'), "_blank")})//重新绑定标题点击事件
  
   $("#ban_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);//渐进渐出效果
  
   document.getElementById("ban").style.background="";
  
   $(this).toggleClass("on");//切换按钮样式
  
   $(this).siblings().removeAttr("class");
  
   });
  
   t = setInterval("showAuto()", 4000);
  
   $("#ban").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
  
   })//鼠标指上停止轮播

function showAuto()//实现轮播的函数
  
   {
  
   n = n >=(count - 1) ? 0 : ++n;
  
   $("#ban li").eq(n).trigger('click');
  
   }
  
   </script>
<div id="ban">  
   <div id="ban_bg"></div>  
   <div id="ban_info"></div>  
   <ul>  
   <li class="on">1</li>  
   <li>2</li>  
   <li>3</li>  
   </ul>  
   <div id="ban_list">  
     
   <a href="/Item/Show.asp?m=1&d=3824" target="_blank"><img src="/UploadFiles/2012-08/admin/2012081511562273110.jpg"  alt="" width="414" height="286" /></a>  
     
   </div>

© 著作权归作者所有

上一篇: 工作记录3.05
下一篇: html工作随记
如风般魅影
粉丝 4
博文 31
码字总数 8323
作品 0
昌平
程序员
私信 提问
高效图片轮播,两个imageView实现

在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,本人最近在网上发现用两个imageView也可高效实现了图片轮播,这里说说主要思路以及大概步骤,具体代...

邓博巍
2016/04/08
4
1
自定义广告图片轮播View——CarouselView

  因为一个广告机的需求,需要做一个广告轮播的效果,不需要什么特别的动画,正常的轮播就可以了。笔者看了网上很多文章,要么不好用,要么就是效果太多,太复杂,用不上。索性自己写了一个...

饮水思源为名
2018/08/08
0
0
bootstrap大图轮播手机端不能手指滑动解决办法

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到...

蓓蕾心晴
2017/03/10
0
0
TouchSlider 视频的图片与图片轮播插件求大神帮忙修改下代码或者指点 万分感谢

红色的箭头轮播的图片, 蓝色的是视频的图片 轮播的id 现在就是视频的图片添加不进轮播图里 滑动图片会报 as[active] is undefined ,也就是原本图片只有一张,现在有两张,轮播的图片和js是...

言午琅
06/20
31
1
bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播: 官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$('.carousel').carsouse...

fareise
2015/08/31
504
0

没有更多内容

加载失败,请刷新页面

加载更多

学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
17分钟前
3
0
支撑微博亿级社交平台,小白也能玩转Redis集群(实战篇)

上篇文章《支撑微博亿级社交平台,小白也能玩转Redis集群(原理篇)》介绍了Redis集群相关原理,这篇文章将介绍Redis Cluster集群的搭建、配置,运维、扩容等具体操作 集群搭建 2018年10月 Re...

分布式系统架构
18分钟前
5
0
JVM -- 垃圾回收算法及分代垃圾收集器

Hello,今天记录下 Java虚拟机中的其中一个重点知识 --> 垃圾回收算法及分代垃圾收集器。 一起学习,一起进步。继续沉淀,慢慢强大。希望这文章对您有帮助。若有写的不好的地方,欢迎评论给建...

猫狗熊
32分钟前
3
0
ERC-777以太坊新代币标准解读

ERC777是一个新的高级代币标准,可以视为ERC20的升级版本,因此它解决了ERC20以及ERC223存在的一些问题,开发者可以根据自己的具体需求进行选型。 1、使用ERC820进行合约注册 有别于ERC20的自...

汇智网教程
今天
7
0
代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部