终极CGFinal · 打造精彩的设计网站
当前位置: 主页 > CG学院 > 简单实用的图片幻灯切换效果重振旗鼓

简单实用的图片幻灯切换效果重振旗鼓

发布时间:2016-09-15 00:16内容来源:终极CGFinal 点击:

<!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>
<title>简单实用的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
#container{width:422px;height:200px;border:5px #000000 solid;}
#container .left{width:340px;height:200px;float:left;background-color:#999999;overflow:hidden;}
#container .left ul{padding:0;margin:0;}
#container .left ul li{list-style:none;cursor:pointer;text-align:center;}
#container .right{width:80px;height:200px;float:right;background-color:gray;}
#container .right ul{margin:0;padding:0;}
#container .right ul li{list-style:none;width:80px;height:40px;line-height:40px;text-align:center;padding-top:5px;_padding-top:0px;_margin-top:4px;cursor:pointer;}
.on{border:1px white solid;}
#container img{border:none;}
</style>
<script type="text/javascript教程" src="http://www.111cn.net/effect/images/jquery-1.3.2.js"></script>
<script type="text/javascript教程">
$(function(){
  var len=$(".right li").length;
  var index=0;
  var time;
    $(".right li").mousemove(function(){
     index=$(".right li").index(this);
    show(index);
    }).eq(0).mousemove();
    $(".left").hover(function(){
        clearinterval(time);
   },function(){
    time=setinterval(function(){
      show(index)
   index++;
   if(index==len){index=0;}
   },2000);
   }).trigger("mouseleave");
})
function show(index){
  $(".left li").eq(index).fadein(100).siblings().fadeout(100);
  $(".right li").removeclass("on").eq(index).addclass("on");
}
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div>
  <div>
    <ul>
      <li>图片1<br>图片说明1</li>
      <li>图片2<br>图片说明2</li>
      <li>图片3<br>图片说明3</li>
      <li>图片4<br>图片说明4</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</div>
</body>
</html>

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------