当前位置:奇幻城娱乐网址 > 母婴 > 案例集合母婴,js实现的一个简单的图片切换特效

案例集合母婴,js实现的一个简单的图片切换特效

文章作者:母婴 上传时间:2019-09-30

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
display: block;
}
#menu{
width:32px;height:360px;
position:fixed;
top:200px;left:0px;
}
#menu ul li{
width:32px;height:32px;
list-style-type:none;
color:#8F8583;
text-align:center;
line-height: 32px;
border-bottom:1px dotted #ddd;
position:relative;
}
#menu ul li span{
display:block;width:32px;height:32px;
background:#C81623;
position:absolute;
top:0;left:0;
color:#fff;font-size:12px;
display: none;
}
#menu ul li:hover span{display:block; }
#menu ul li span.active{color:#C81623;background:#fff;display:block;}
#content{
width:1220px;
margin:0 auto;
}
#footer{width:1220px;height:600px;background:#FE7678;}
.container{margin:0 auto;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>1F<span>服饰</span></li>
<li>2F<span>美妆</span></li>
<li>3F<span>手机</span></li>
<li>4F<span>家电</span></li>
<li>5F<span>数码</span></li>
<li>6F<span>运动</span></li>
<li>7F<span>居家</span></li>
<li>8F<span>母婴</span></li>
<li>9F<span>食品</span></li>
<li>10F<span>图书</span></li>
<li>11F<span>服务</span></li>
</ul>
</div>
<!-- 导航菜单 -->
<!-- 产品内容 -->
<div id="content">
<div class="louti" id="louti1"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti2"><img src="img/2.jpg" alt=""></div>
<div class="louti" id="louti3"><img src="img/3.jpg" alt=""></div>
<div class="louti" id="louti4"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti5"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti6"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti7"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti8"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti9"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti10"><img src="img/1.jpg" alt=""></div>
<div class="louti" id="louti11"><img src="img/1.jpg" alt=""></div>
</div>
<!-- 产品内容 -->
<!-- 底部 -->
<div id="footer" class="container"></div>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
var _index=0;
$("#menu ul li").click(function(){
$(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active");
_index=$(this).index()+1;
//通过拼接字符串获取元素,再取得相对于文档的高度
var _top=$("#louti"+_index).offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
var nav=$("#母婴,menu"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
//获取滚动元素对应的索引!!!重难点
var height = $(".louti").height();
var index=Math.floor(sc.scrollTop()/height);
$("#menu ul li span").eq(index).addClass("active").parent().siblings().find("span").removeClass("active");

html页面如下

*jq代码

//尺寸变动
$('.price_size ul li').click(function(){
//alert(1);
$(this).parents('ul').siblings('span').text( $(this).text());
})

<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;}
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;}
/* focus */
#focus{width:800px;height:280px;overflow:hidden;position:relative;}
#focus ul{height:380px;position:absolute;}
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;}
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus .btn span.on{background:#fff;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
</style>

});
});
</script>
</body>
</html>

//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔,单位:毫秒
}).trigger("mouseleave");

html代码

<div class="scrollNews">
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>

 //为小按钮添加鼠标滑入事件,以显示相应的内容
 $("#focus .btn span").css("opacity",0.4).mouseover(function() {
  index = $("#focus .btn span").index(this);
  showPics(index);
 }).eq(0).trigger("mouseover");

//显示图片函数,根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
});

*html代码

<div class="price_size">
尺寸:<span>未选择</span>
<ul>
<li>S</li>
<li>L</li>
<li>XL</li>
<li>XXL</li>
</ul>
</div>
<div class="price_num">
数量:
<select name="" id="num_sort">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>

 <div class="wrapper">
  <h1>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</h1>
 
  <div id="focus">
   <ul>
    <li><a href="" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>
    <li><a href="" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>
    <li><a href="" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li>
    <li><a href="" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li>
    <li><a href="" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li>
   </ul>
  </div><!--focus end-->
 
 </div><!-- wrapper end -->

$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积)
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;

html代码

<div class="jqzoom">
<img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg" >
</div>
<span>
<a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字">
<img alt="点击看大图" src="images/look.gif" />
</a>
</span>
<ul class="imgList">
<li><img src="images/pro_img/blue_one.jpg" alt="" /></li>
<li><img src="images/pro_img/blue_two.jpg" alt="" /></li>
<li><img src="images/pro_img/blue_three.jpg" alt="" /></li>
</ul>

[html] 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> 
<meta name="description" content="jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换" /> 
 
<style type="text/css"> 
*{margin:0;padding:0;} 
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} 
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix{zoom:1;} 
ul,li{list-style:none;} 
img{border:0;} 
.wrapper{width:800px;margin:0 auto;padding-bottom:50px;} 
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 
/* focus */ 
#focus{width:800px;height:280px;overflow:hidden;position:relative;} 
#focus ul{height:380px;position:absolute;} 
#focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} 
#focus ul li div{position:absolute;overflow:hidden;} 
#focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} 
#focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} 
#focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} 
#focus .btn span.on{background:#fff;} 
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;} 
#focus .pre{left:0;} 
#focus .next{right:0;background-position:right top;} 
</style> 
 
<script type="text/javascript" src="; 
<script type="text/javascript"> 
$(function() { 
    var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积) 
    var len = $("#focus ul li").length; //获取焦点图个数 
    var index = 0; 
    var picTimer; 
     
    //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 
    var btn = "<div class='btnBg'></div><div class='btn'>"; 
    for(var i=0; i < len; i++) { 
        btn += "<span></span>"; 
    } 
    btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 
    $("#focus").append(btn); 
    $("#focus .btnBg").css("opacity",0.5); 
 
    //为小按钮添加鼠标滑入事件,以显示相应的内容 
    $("#focus .btn span").css("opacity",0.4).mouseover(function() { 
        index = $("#focus .btn span").index(this); 
        showPics(index); 
    }).eq(0).trigger("mouseover"); 
 
    //上一页、下一页按钮透明度处理 
    $("#focus .preNext").css("opacity",0.2).hover(function() { 
        $(this).stop(true,false).animate({"opacity":"0.5"},300); 
    },function() { 
        $(this).stop(true,false).animate({"opacity":"0.2"},300); 
    }); 
 
    //上一页按钮 
    $("#focus .pre").click(function() { 
        index -= 1; 
        if(index == -1) {index = len - 1;} 
        showPics(index); 
    }); 
 
    //下一页按钮 
    $("#focus .next").click(function() { 
        index += 1; 
        if(index == len) {index = 0;} 
        showPics(index); 
    }); 
 
    //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 
    $("#focus ul").css("width",sWidth * (len)); 
     
    //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 
    $("#focus").hover(function() { 
        clearInterval(picTimer); 
    },function() { 
        picTimer = setInterval(function() { 
            showPics(index); 
            index++; 
            if(index == len) {index = 0;} 
        },4000); //此4000代表自动播放的间隔,单位:毫秒 
    }).trigger("mouseleave"); 
     
    //显示图片函数,根据接收的index值显示相应的内容 
    function showPics(index) { //普通切换 
        var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 
        $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 
         
        $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 
    } 
}); 
 
</script> 
</head> 
 
<body> 
 
    <div class="wrapper"> 
        <h1>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</h1> 
     
        <div id="focus"> 
            <ul> 
                <li><a href="" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li> 
                <li><a href="" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li> 
                <li><a href="" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li> 
                <li><a href="" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li> 
                <li><a href="" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li> 
            </ul> 
        </div><!--focus end--> 
     
    </div><!-- wrapper end --> 
 
</body> 
</html> 

/* qqshop focus */
#focus {width:800px; height:280px; overflow:hidden; position:relative;}
#focus ul {height:380px; position:absolute;}
#focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;}
#focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;}
#focus .pre {left:0;}
#focus .next {right:0; background-position:right top;}
</style>

js代码

//横向滚动
var i = 4;//可见页面有几个
var m = 4;//变量的变化
var count = $('.goods_content li').length;
var goods_content = $('.goods_content');
$('.right').click(function(){
//alert(1);
if(! goods_content.is(":animated")){
if(m<count){
m++;
goods_content.animate({left:'-=146px'},600);
}
}
})
$('.left').click(function(){
if(! goods_content.is(":animated")){
if(m>i){
m--;
goods_content.animate({left:'+=146px'},600);
}
}
})

<body>

css样式

css代码

.scrollNews{
background:#fff;
width:200px;
height:85px;
line-height:20px;
overflow:hidden;
}
.tip{
position:absolute;
border: 1px solid #000;
background:#ffe699;
color:#f00;
z-index:1000;
}

] !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titlejquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动/title...

<style type="text/css">
* {margin:0; padding:0;}
body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {zoom:1;}
ul,li {list-style:none;}
img {border:0;}

*html 代码

<div class="price_num">
数量:
<select name="" id="num_sort">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="price_total">
总计 : <span>200</span>元
</div>

</body>
</html>效果图如下:

复制代码 代码如下:

*效果图

母婴 1

</script>
</head>

</div><!-- wrapper end -->
</body>

*css代码

.content_right{
width:586px;
background:#eee;
border: 1px solid #AAA;
float:left;
}

.content_right .ad{
width:586px;
height:150px;
overflow:hidden;
position:relative;
margin-bottom:10px;
}
.content_right .ad ul{
position:absolute;
z-index:8;
}
.content_right .ad ol{
position:absolute;
z-index:10;
bottom:10px;
right:0px;
}
.content_right .ad ol li{
float:left;
width:20px;
height:20px;
background:#fff;
border: 1px solid #000;
margin-right:10px;
line-height:20px;
text-align:center;
cursor:pointer;
font-weight:bolder;
}
.content_right .ad ol li.accuent{
border: 1px solid #f00;
color:#f00;
}

 //下一页按钮
 $("#focus .next").click(function() {
  index += 1;
  if(index == len) {index = 0;}
  showPics(index);
 });

母婴 2
该图片切换特效实现很简单,而且兼容性很好。

*效果图

母婴 3

 //上一页、下一页按钮透明度处理
 $("#focus .preNext").css("opacity",0.2).hover(function() {
  $(this).stop(true,false).animate({"opacity":"0.5"},300);
 },function() {
  $(this).stop(true,false).animate({"opacity":"0.2"},300);
 });

//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});

css代码

.content_right .goods{
width:586px;
height:220px;
margin-bottom:10px;
overflow:hidden;
background:#FFFFFF;
}
.content_right .goods .btn{
float:right;
margin:5px 10px 0px 0px;
}
.content_right .goods .goods_content{
width:1800px;
position:absolute;
top:26px;
left:0;
padding:20px 0px 0px 8px;
}
.goods .goods_content ul{
float:left;
height:220px;
float:left;
}
.goods .goods_content ul li{
float:left;
display:inline;
margin-right:22px;
text-align:center;
position:relative;
}
.goods .goods_content ul li img{
width:124px;
height:124px;
background:#eee;
border:none;
}

 //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
 $("#focus ul").css("width",sWidth * (len));
 
 //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
 $("#focus").hover(function() {
  clearInterval(picTimer);
 },function() {
  picTimer = setInterval(function() {
   showPics(index);
   index++;
   if(index == len) {index = 0;}
  },4000); //此4000代表自动播放的间隔,单位:毫秒
 }).trigger("mouseleave");
 
 //显示图片函数,根据接收的index值显示相应的内容
 function showPics(index) { //普通切换
  var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
  $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
  
  $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
 }
});

//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});

js代码

//左导航提示框
var Xzhi,Yzhi;
$('a.tooltip').mouseover(function(e){
Xzhi = e.pageX + 10;
Yzhi = e.pageY + 10;
var Tooltip = $('<div class="tip">'+this.title+'</div>');
$('body').append(Tooltip);
$('.tip').hide().show(1000);
$('.tip').css({'left':''+Xzhi+'px','top' : ''+Yzhi+'px'});
}).mouseout(function(){
$('.tip').remove();
}).mousemove(function(e){
Xzhi = e.pageX + 10;
Yzhi = e.pageY + 10;
$('.tip').css({'left':''+Xzhi+'px','top' : ''+Yzhi+'px'});
})
//向上移动部分
var timer;
$('.scrollNews ul').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
var Ul = $('.scrollNews ul');
var height = Ul.find("li:first").height();
Ul.animate({'marginTop':- height + 'px'},600,function(){
Ul.css({marginTop:0}).append(Ul);
})
},2000);
}).trigger("mouseleave");

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title>
<meta name="description" content="jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换" />

.wrapper {width:800px; margin:0 auto; padding-bottom:50px;}

*jq代码

//价格计算
var total = $('.price_total span');
var price = total.text();
//当数量变动时带动价格变动
$('#num_sort').change(function(){
var count = $(this).val();
var totalPrice = count*price;
total.text(totalPrice);
}).change();

<script type="text/javascript" src=";
<script type="text/javascript">
$(function() {
 var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积)
 var len = $("#focus ul li").length; //获取焦点图个数
 var index = 0;
 var picTimer;
 
 //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮
 var btn = "<div class='btnBg'></div><div class='btn'>";
 for(var i=0; i < len; i++) {
  btn += "<span></span>";
 }
 btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
 $("#focus").append(btn);
 $("#focus .btnBg").css("opacity",0.5);

<div class="wrapper">
<div id="focus">
<ul>
<li><a href="" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>
<li><a href="" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>
<li><a href="" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li>
<li><a href="" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li>
<li><a href="" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li>
</ul>
</div>

html代码

<div class="goods_content">
<ul>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_1.jpg" alt=""><span></span></a></dt>
<dd>免烫高支棉衬衣3</dd>
<dd>$120.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_2.jpg" alt=""><span></span></a></dt>
<dd>免烫斜纹衬衣</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_3.jpg" alt=""><span></span></a></dt>
<dd>棉小方格正装衬衣</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_4.jpg" alt=""><span></span></a></dt>
<dd>小米兰格衬衣蓝色</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_1.jpg" alt=""><span></span></a></dt>
<dd>免烫高支棉衬衣3</dd>
<dd>$120.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_2.jpg" alt=""><span></span></a></dt>
<dd>免烫斜纹衬衣</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_3.jpg" alt=""><span></span></a></dt>
<dd>棉小方格正装衬衣</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_4.jpg" alt=""><span></span></a></dt>
<dd>小米兰格衬衣蓝色</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_1.jpg" alt=""><span></span></a></dt>
<dd>免烫高支棉衬衣3</dd>
<dd>$120.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_2.jpg" alt=""><span></span></a></dt>
<dd>免烫斜纹衬衣</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_3.jpg" alt=""><span></span></a></dt>
<dd>棉小方格正装衬衣</dd>
<dd>$129.00</dd>
</dl>
</li>
<li>
<dl>
<dt><a href="detail.html"><img src="images/img_4.jpg" alt=""><span></span></a></dt>
<dd>小米兰格衬衣蓝色</dd>
<dd>$129.00</dd>
</dl>
</li>
</ul>
</div>

 //上一页按钮
 $("#focus .pre").click(function() {
  index -= 1;
  if(index == -1) {index = len - 1;}
  showPics(index);
 });

复制代码 代码如下:

*效果图

母婴 4

 母婴 5  

该图片切换特效实现很简单,而且兼容性很好。 html页面如下 复制代码 代码如下: div class="wrapper" div id="focus" ul lia href="...

例五 *展开瘾藏

 

//以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);

*jq代码

$('.item li span').click(function(){
$(this).parent().toggleClass('active');
});

//为小按钮添加鼠标滑入事件,以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

*例一 鼠标提示并列整个列表向上滚动

复制代码 代码如下:

例六 引用jqzoom.js实现放大镜效果

母婴 6

*效果图

母婴 7

母婴 8

js脚本

*例二 左右滚动,每次只滚动一张图片

如图所示。

例八 价格变动例子

//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});

*例七 尺寸变动例子

//本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));

*css代码

.price_size{
float:left;
width:380px;
margin-top:20px;
margin-bottom:10px;
font-weight: bolder;
}
.price_size ul li{
float:left;
margin-right:10px;
padding:1px 12px;
border: 1px solid #000;
cursor:pointer;
}
.price_num{
font-weight:bolder;
width:380px;
float:left;
margin-bottom:10px;
}

用到的左右切换图片

*效果图

母婴 9

母婴 10

*css代码

ul.item{
padding:5px 0px 5px 15px;
}
.item{
background:#fff;
}
.procude .item li span{
background:url(..treeview-expanded.gif) no-repeat 0px 0px;
padding-left:20px;
}
.item li.active span{
background:url(..treeview-collapsed.gif) no-repeat 0px 0px;
}
.item ul{
margin-left:40px;
}
.item li{cursor:pointer;}
.item .active ul{
display:none;
}
.procude .item ul li{
list-style-image:url(..treeview-item.gif);
}

*jq代码

//引用jqzoom插件
$(".jqzoom").jqueryzoom({
xzoom: 300, //放大图的宽度(默认是 200)
yzoom: 300, //放大图的高度(默认是 200)
offset:-300, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload: 1
});
//大图切换小图
$('.imgList li img').click(function(){
//alert(1);
var imgSrc = $(this).attr("src");
var i = imgSrc.lastIndexOf(".");//最后位置以.匹配
var unit = imgSrc.substring(i);//从字符串中提取一些字符
imgSrc = imgSrc.substring(0,i);
var imgSrc_small = imgSrc + "_small"+ unit;
var imgSrc_big = imgSrc + "_big"+ unit;
$("#bigImg").attr({"src": imgSrc_small ,"jqimg": imgSrc_big });
$("#thickImg").attr("href", imgSrc_big);
});

*html代码

<ul id="skin">
<li id="skin_0" title="蓝色" class="selected">蓝色</li>
<li id="skin_1" title="紫色">紫色</li>
<li id="skin_2" title="红色">红色</li>
<li id="skin_3" title="天蓝色">天蓝色</li>
<li id="skin_4" title="橙色">橙色</li>
<li id="skin_5" title="淡绿色">淡绿色</li>
</ul>

母婴 11

*html代码

<ul class="item">
<li class="active">
<span>衬衫</span>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
</ul>
</li>
<li >
<span>卫衣</span>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li>
<span>裤子</span>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">免烫卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
</ul>

*jq代码

//网页换肤部分
$('#skin li').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
$('#cssfile').attr('href','css/skin/'+this.id+'.css');
})
*需要的按钮换肤图片

母婴 12

*例三滚动轮播图

*css代码

.price_num,
.price_total{
font-weight:bolder;
width:380px;
float:left;
margin-bottom:10px;
}

效果图

母婴 13

html代码

<div class="ad">
<ul>
<li><img src="images/ads/1.gif" alt=""></li>
<li><img src="images/ads/2.gif" alt=""></li>
<li><img src="images/ads/3.gif" alt=""></li>
<li><img src="images/ads/4.gif" alt=""></li>
<li><img src="images/ads/5.gif" alt=""></li>
</ul>
<ol>
<li class="accuent">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>

jq代码

//ad广告部分
var num =0,
timer = null,
index= 0,
length = $('.ad ol li').length;

function changeImg(index){
var height = $('.ad').height();
$('.ad ul').animate({top:-height * index},1000);
$('.ad ol li').removeClass('accuent').eq(index).addClass('accuent');
}
$('.ad ol li').mouseover(function(){
index = $('.ad ol li').index(this);
changeImg(index);
})
$('.ad').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
changeImg(index);
index ++ ;
if(index == length){
index= 0;
}
},2000);
}).trigger("mouseleave");

*效果图

母婴 14

母婴 15

回到顶部
var timerl = null;
$('.top').click(function(){
timerl = setInterval(function(){
var oStop = $(document).scrollTop();
var Speed = Math.ceil(oStop / 6);
$(document).scrollTop(oStop - Speed);
if(oStop == 0){
clearInterval(timerl);
}
},30)
})
$(window).scroll(function(){
var Scroll=$(window).scrollTop();
var height=$(window).height();
if(Scroll>=height){
$(".top").css("display","block");
}else{
$(".top").css("display","none");
}
})

*css代码

母婴 16

母婴 17

母婴 18

效果图

母婴 19

*例四网页换肤

*css代码

.jqzoom{
border:1px solid #BBB;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}
div.zoomdiv {
z-index: 999;
position: absolute;
top:0px;
left:0px;
width: 200px;
height: 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
div.jqZoomPup {
z-index : 999;
visibility : hidden;
position : absolute;
top:0px;
left:0px;
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #ffffff ;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}
.jqzoom .fs{
width:300px;
height:300px;
}
.detail_left span{
display:block;
width:310px;
text-align:center;
padding:10px 0px;
}
.detail_left .imgList{
height:80px;
}
.detail_left .imgList li{
float:left;
margin-right:10px;
}
.detail_left .imgList li img{
width:60px;
height:60px;
padding:1px;
background:#EEE;
cursor:pointer;
}
.detail_left .imgList li img:hover{
padding:1px;
background:#999;
}

本文由奇幻城娱乐网址发布于母婴,转载请注明出处:案例集合母婴,js实现的一个简单的图片切换特效

关键词: