js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码_javascript技巧
程序员文章站
2022-05-15 09:06:20
...
今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码。
最后的效果如下:
Html代码部分:
图片轮播效果制作_赵一鸣随笔博客
Css代码部分:
*{margin:0px;padding:0px} li{list-style:none} a{text-decoration:none} img{border:0px} .banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden} .banner .pic{width:9999px;height:495px} .banner .pic li{width:350px;height:495px;float:left} .banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px} .banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline; cursor:pointer;border-radius:100%} .banner .anniu li.on{background:red} .banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none} .banner .lr a{color:white} .banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer} .banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}
Javascript代码部分:
$(function(){ //鼠标滑过banner,左右按钮进行显示和隐藏 $(".banner").hover(function(){ $(".lr").show(); },function(){ $(".lr").hide(); }); //点击下面的小按钮,图片进行左右切换效果 $(".anniu li").click(function(){ $(this).addClass("on").siblings().removeClass("on"); var num=$(this).index(); $(".pic").animate({marginLeft:-350*num},"slow"); }); //图片自动轮播效果 var a=0; var automatic=setInterval(function(){ a++; a=a%5; $(".pic").animate({marginLeft:-350*a},"slow"); $(".anniu li").eq(a).addClass("on").siblings().removeClass("on"); },6000); //点击左右按钮,图片进行切换效果 $(".pre").click(function(){ a--; a=(a+5)%5; $(".pic").animate({marginLeft:-350*a},"slow"); $(".anniu li").eq(a).addClass("on").siblings().removeClass("on"); }); $(".next").click(function(){ a++; a=a%5; $(".pic").animate({marginLeft:-350*a},"slow"); $(".anniu li").eq(a).addClass("on").siblings().removeClass("on"); }); });
下一篇: PHP的SESSION使用详解
推荐阅读
-
jquery实现点击左右按钮切换图片
-
js点击按钮实现多张图片循环切换
-
jquery实现点击左右按钮切换图片
-
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码_javascript技巧
-
js实现点击左右按钮轮播图片效果实例_javascript技巧
-
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码_javascript技巧
-
js实现点击左右按钮轮播图片效果实例_javascript技巧
-
基于jquery实现左右按钮点击的图片切换效果_jquery
-
基于jquery实现左右按钮点击的图片切换效果_jquery
-
js鼠标点击图片切换效果代码分享_javascript技巧