Js+CSS淡入式效果图片幻灯切换效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Js+CSS淡入式效果图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css">
* {margin:0; padding:0;}
#focus {width:800px; height:280px; overflow:hidden; position:relative;}
#focus ul {height:280px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000; text-align:right; color:#FFF;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px;bottom:0; text-align:right; z-index:4}
#focus .btn span {display:block;width:25px; float:left; height:10px; font-size:10px; text-align:center; margin-left:5px; cursor:pointer; background:#fff;}
.title{ float:right; margin-right:20px;}
.red{ color:red;}
.sm{ text-align:right;position:absolute; bottom:0; right:0; width:800px; height:20px; line-height:20px; z-index:3;}
</style>
<script src="http://www.csrcode.cn//images/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var sWidth=$("#focus").width();
var sHeight = $("#focus").height();
var len=$("#focus ul li").length;
var sWidth=$("#focus").width();
var sm=$("<div class='sm'></div>")
var index=0;
var picTimer;
var btn="<div class='btnBg'></div><div class='btn'>";
for(var i=0;i<len; i++){
  var ii=i+1;
  btn +="<span>"+ii+"</span>";
  }
  $("#focus").append(btn);
  $("#focus").append(sm);
  $("#focus .btnBg").css("opacity",0.3);
  $("#focus .btn span").css("opacity",0.4).mouseenter(function(){
  index = $("#focus .btn span").index(this);
  sh(index);//向上滚动则改为showTop,向左滚动则改为showLeft,渐隐渐现则为sh
  }).eq(0).trigger("mouseenter");
  $("#focus").hover(function(){
    clearInterval(picTimer);
    },function(){
    picTimer=setInterval(function(){
      sh(index);//向上滚动则改为showTop,向左滚动则改为showLeft,渐隐渐现则为sh
      index++;
      if(index==len){index=0;}
      },5000) //滚动间隔，数越大间隔越长
     }).trigger("mouseleave");


  function sh(index){
   $("#focus ul").css({"width":sWidth,"height":sHeight});
   var title=$("#focus img").eq(index).attr("title")
   $(".sm").empty();
   $(".sm").append(title)
   $("#focus ul li img").css({position:"absolute",top:0,left:0}).parent().eq(index).stop(true,true).animate({"opacity":1},2000).css({display:"block"}).siblings().stop(true,true).animate({"opacity":0.2},1000).css({display:"none"});
   $("#focus .btn span").stop(true,false).animate({"opacity":0.4},300).removeClass("red").eq(index).stop(true,false).animate({"opacity":0.8},300).addClass("red");
   }
  function showLeft(index){
   $("#focus ul").css("width",sWidth*len);
   var nowLeft=-index*sWidth;
   var title=$("#focus img").eq(index).attr("title")
   $("#focus .sm").empty();
   $("#focus .sm").append(title)
   $("#focus ul").stop(true,false).animate({"left":nowLeft},300);
   $("#focus .btn span").stop(true,false).animate({"opacity":0.4},300).removeClass("red").eq(index).stop(true,false).animate({"opacity":0.8},300).addClass("red");
   }
  function showTop(index) {
   $("#focus ul").css("height",sHeight*len);
   var nowTop = -index*sHeight;
   var title=$("img").eq(index).attr("title")
   $(".sm").empty();
   $(".sm").append(title)
   $("#focus ul").stop(true,false).animate({"top":nowTop},300);
   $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).removeClass("red").eq(index).stop(true,false).animate({"opacity":"1"},300).addClass("red");
}
})
</script>
</head>
<body>
<div id="focus">
  <ul>
   <li><img src="http://www.csrcode.cn/images/m01.jpg" width="800" height="280" title="红叶传情"/></li>
   <li><img src="http://www.csrcode.cn/images/m02.jpg" width="800" height="280" title="野花绽放"/></li>
   <li><img src="http://www.csrcode.cn//images/m03.jpg" width="800" height="280" title="往事如茶"/></li>
   <li><img src="http://www.csrcode.cn//images/m04.jpg" width="800" height="280" title="油菜花开"/></li>
  </ul>
</div>
</body>
</html>

<br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/23/2652821.html

Js+CSS淡入式效果图片幻灯切换效果相关推荐

CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
新闻展示,滚动新闻程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...
通过js实现图片左右点击图片左右切换效果
通过js实现图片左右点击图片左右切换效果通过图片左右的点击实现图片的左右切换,其实先看一下代码吧() 这边HT ...
[JS]图片自动切换效果（学习笔记）
上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/ .container, .con ...
dw如何制作图片自动切换效果_dw怎么用css做图片轮播
Adobe Dreamweaver,简称"DW",中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购.DW是集网 ...
js中的图片指定切换效果
js中的图片指定切换效果的实现用到的js中的知识:js中的for循环的熟练运用 js中的this属性:指的是调用当前方法 (函数) 的那个对象 js中的自定义属性:js可以为任意的HTML元素添加 ...
手机端图片滑动切换效果
最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环 ...
html鼠标滚动效果代码,JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...

Js+CSS淡入式效果图片幻灯切换效果

Js+CSS淡入式效果图片幻灯切换效果相关推荐

最新文章

热门文章