jquery图片切换带缩略图片滚动切换
来源:互联网 发布:php 设置北京时区 编辑:程序博客网 时间:2024/05/08 18:42
jquery图片切换效果,制作一个通过小图缩略图点击切换显示相应的大图,当缩略图过多时可以点击左右按钮控制缩略图片左右滚动,进行更多的图片切换。效果图如下:
简单例子demo.html如下:
<!DOCTYPE html><html lang="zh-CN" manifest="cache.manifest"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>详细-首页</title><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}/* zoombox */.zoombox{width:446px;margin:6px 0 0 0;}.zoompic{border:solid 1px #dfdfdf;width:444px;height:364px;background:url(images/loading.gif) no-repeat 50% 50%;}.sliderbox{height:76px;overflow:hidden;margin:6px 0 0 0;}.sliderbox .arrow-btn{width:38px;height:76px;background:url(images/arrow-btn.png) no-repeat;cursor:pointer;}.sliderbox #btn-left{float:left;background-position:0 0;}.sliderbox #btn-left.dasabled{background-position:0 -76px;}.sliderbox #btn-right{float:right;background-position:-38px 0;}.sliderbox #btn-right.dasabled{background-position:-38px -76px;}.sliderbox .slider{float:left;height:76px;width:365px;position:relative;overflow:hidden;margin:0 0 0 3px;display:inline;}.sliderbox .slider ul{position:absolute;left:0;width:999em;}.sliderbox .slider li{float:left;width:121px;height:76px;text-align:center;}.sliderbox .slider li img{border:solid 1px #dfdfdf;}.sliderbox .slider li.current img{border:solid 1px #3366cc;}</style></head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(document).ready(function (){//点击小图切换大图$("#thumbnail li a").click(function(){$(".zoompic img").hide().attr({ "src": $(this).attr("href"), "title": $("> img", this).attr("title") });$("#thumbnail li.current").removeClass("current");$(this).parents("li").addClass("current");return false;});$(".zoompic>img").load(function(){$(".zoompic>img:hidden").show();});//小图片左右滚动var $slider = $('.slider ul');var $slider_child_l = $('.slider ul li').length;var $slider_width = $('.slider ul li').width();$slider.width($slider_child_l * $slider_width);var slider_count = 0;if ($slider_child_l < 3) {$('#btn-right').css({cursor: 'auto'});$('#btn-right').removeClass("dasabled");}$('#btn-right').click(function() {if ($slider_child_l < 3 || slider_count >= $slider_child_l - 3) {return false;}slider_count++;$slider.animate({left: '-=' + $slider_width + 'px'}, 'fast');slider_pic();});$('#btn-left').click(function() {if (slider_count <= 0) {return false;}slider_count--;$slider.animate({left: '+=' + $slider_width + 'px'}, 'fast');slider_pic();});function slider_pic() {if (slider_count >= $slider_child_l - 3) {$('#btn-right').css({cursor: 'auto'});$('#btn-right').addClass("dasabled");}else if (slider_count > 0 && slider_count <= $slider_child_l - 3) {$('#btn-left').css({cursor: 'pointer'});$('#btn-left').removeClass("dasabled");$('#btn-right').css({cursor: 'pointer'});$('#btn-right').removeClass("dasabled");}else if (slider_count <= 0) {$('#btn-left').css({cursor: 'auto'});$('#btn-left').addClass("dasabled");}}});</script><body ><div class="zoombox"><div class="zoompic"><img src="images/3427.jpg" width="444" height="364" alt="美女配奥迪A4L墙纸" /></div><div class="sliderbox"><div id="btn-left" class="arrow-btn dasabled"></div><div class="slider" id="thumbnail"><ul><li class="current"><a href="images/3427.jpg" target="_blank"><img src="images/3427.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li><li><a href="images/52347.jpg" target="_blank"><img src="images/52347.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸02" /></a></li><li><a href="images/23463.jpg" target="_blank"><img src="images/23463.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸03" /></a></li><li><a href="images/3247.jpg" target="_blank"><img src="images/3247.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸04" /></a></li><li><a href="images/26547.jpg" target="_blank"><img src="images/26547.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸05" /></a></li><li><a href="images/2153.jpg" target="_blank"><img src="images/2153.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸06" /></a></li><li><a href="images/3427.jpg" target="_blank"><img src="images/3427.jpg" width="115" height="74" alt="美女配奥迪A4L墙纸01" /></a></li></ul></div><div id="btn-right" class="arrow-btn"></div></div> </div><!--slider end--></div></body></html>
- jquery图片切换带缩略图片滚动切换
- JS图片切换,带缩略图版
- jquery图片滚动带左右按钮控制焦点图片切换滚动
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
- jQuery底部带导航的图片切换,定时上下滚动效果(无滚轮切换效果)
- jQuery 循环图片滚动切换效果代码
- Jquery实现一个图片滚动切换
- jQuery图片文本滚动切换插件jCarousel
- JS滚动图片切换_html5+jQuery代码
- jquery鼠标悬停图片上下滚动切换
- jQuery带左右按钮控制图片切换
- scrollview滚动图片切换
- jQuery图片自动切换(带左右切换按钮)
- 带左右箭头切换的自动滚动图片JS特效
- JQUERY实现图片切换
- jquery图片切换效果
- 二进制 八进制 十进制 十六进制的相互转换(精简总结)
- [精通WindowsSocket网络开发-基于VC++实现]第三章——WindowsSockets基础—TCP,UDP程序
- hdu3695 Computer Virus on Planet Pandora
- JS代码的邮箱匹配
- java 链接mysql 链接数据库的步骤
- jquery图片切换带缩略图片滚动切换
- Considering VSAN
- ubuntu上的MySql无视外键约束
- RSS练习
- Java 集合学习<6>map
- linux线程
- 【leetcode】Valid Number
- 锋利的JQuery----JavaScript基础知识(一)
- 数据结构-栈-顺序栈完整可执行代码